Bạn đã biết bảng trong trình bày văn bản rất quan trọng. Bạn có thể dùng bảng để trình bày một danh sách gồm nhiều thông tin giúp người đọc dễ hiểu, dễ phân biệt thông tin và có thể dùng trình bày các kết quả tính hoặc hoặc định vị các nội dung.
Trong HTML có thẻ <table> dùng đánh dấu khoanh vùng tạo bảng. Để hiển thị được bảng cần sử dụng thêm một số thẻ khác. Trước hết bạn cần tìm hiểu cách tạo ra bảng như thế nào. Bạn hãy quan sát 3 bước trong ảnh sau:
Các thẻ dùng để hiển thị bảng
| Tên thẻ | Ý nghĩa |
|---|---|
| <table> | Thẻ dùng định nghĩa một vùng là bảng |
| <tr> | Thẻ định nghĩa một dòng trong bảng |
| <th> | Thẻ định nghĩa một ô trong bảng, ô này có vai trò là tiêu đề |
| <td> | Thẻ định nghĩa một ô trong bảng, ô này dùng chứa nội dung thường |
| <caption> | Thẻ định nghĩa tiêu đề cho bảng |
| <tbody> | Thẻ bao gói các dòng là phần thân của bảng |
| <thead> | Thẻ bao gói các dòng là phần đầu của bảng |
| <tfooter> | Thẻ bao gói các dòng là phần cuối của bảng |
1) Tạo 1 bảng đơn giản
<table border="1">
<tr>
<td>Cột 1 dòng 1</td>
<td>Cột 2 dòng 1</td>
<td>Cột 3 dòng 1</td>
</tr>
<tr>
<td>Cột 1 dòng 2</td>
<td>Cột 2 dòng 2</td>
<td>Cột 3 dòng 2</td>
</tr>
<tr>
<td>Cột 1 dòng 3</td>
<td>Cột 2 dòng 3</td>
<td>Cột 3 dòng 3</td>
</tr>
</table>
Bạn chạy code để xem kết quả nhé
2) Các bước tạo 1 bảng
1. Bạn xác định bảng có bao nhiêu dòng, bao nhiêu cột. Thông thường 1 bảng sẽ có số ô trên các dòng bằng nhau. VD: dòng 1 có 3 ô thì dòng 2 cũng có 3 ô. Trường hợp khác sẽ nói chuyện ở bài viết tiếp theo.
2. Bạn viết thẻ bảng <table> trước sau đó viết thẻ <tr> để tạo dòng và viết tiếp thẻ <td> để tạo ô trong bảng.
3. Lưu ý: Thẻ <tr> phải được chứa trong cặp thẻ đóng mở <table>...</table>, thẻ <td> phải được chứa trong cặp thẻ đóng mở <tr> ... </tr>.
4. Thẻ mở <table> bạn thêm 1 thuộc tính border="1" để hiển thị khung
<table border="1">
<tr>
<td>Cột 1 dòng 1</td>
<td>Cột 2 dòng 1</td>
<td>Cột 3 dòng 1</td>
</tr>
</table>
5. Sau khi viết xong bạn chạy thử code bạn sẽ có bảng 1 dòng với 3 cột, sau đó bạn nhân bản khối code thẻ <tr>....</tr> xuống dưới để được bảng nhiều dòng.
| Cột 1 dòng 1 | Cột 2 dòng 1 | Cột 3 dòng 1 |
3) Tạo khung cho bảng
- Bạn có thể sử dụng thuộc tính border của thẻ tạo bảng <table border="1"> để hiển thị khung cho bảng như ở ví dụ trên.
- Cách khác là bạn có thể sử dụng CSS để định dạng khung cho bảng bằng cách trong thẻ <head> bạn thêm thẻ <style> và viết css như sau:
<style>
table, th, td {
border: 1px solid red; /*Khung dày 1 pixel, nét vẽ liền và màu nét vẽ đỏ*/
border-collapse: collapse; /*Thuộc tính này giúp loại bỏ khoảng cách mặc định giữa các ô*/
}
</style>
Bạn hãy chạy thử code để xem kết quả nhé.
4) Một số thuộc tính của bảng
- Thuộc tính cellpading: Dùng giãn cách khung với nội dung của ô
- Thuộc tính cellSpacing: Dùng giãn cách giữa các ô với nhau
- Thuộc tính style: Dùng định dạng nâng cao cho bảng (viết các thuộc tính css trong này)
- Thuộc tính width: Dùng thiết lập chiều rộng cho bảng. Mặc định là hiển thị đủ nội dung của bảng, bạn có thể đặt giá trị là bao nhiêu % để hiển thị bảng rộng tương ứng. Bạn cũng có thể dùng CSS để thiết lập chiều rộng cho bảng.
table{
width: 100%;
}
- Thuộc tính align: Dùng thiết lập bảng hiển thị ở bên trái hay phải, hay giữa màn hình. Khi dùng thuộc tính này thì chiều rộng bảng thường phải dưới 100% thì mới rõ hiệu ứng. Nếu align="center" thì cả bảng sẽ được hiển thị ở giữa màn hình theo chiều ngang.
Các thuộc tính bạn có thể kết hợp dùng chung hoặc dùng riêng một vài thuộc tính.
<!DOCTYPE html>
<html>
<head>
<title>Học HTML tại zezo.dev</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" cellpadding="10" cellspacing="20" style="background-color:cyan" width="40%" align="center" >
<tr>
<td>Cột 1 dòng 1</td>
<td>Cột 2 dòng 1</td>
<td>Cột 3 dòng 1</td>
</tr>
<tr>
<td>Cột 1 dòng 2</td>
<td>Cột 2 dòng 2</td>
<td>Cột 3 dòng 2</td>
</tr>
<tr>
<td>Cột 1 dòng 3</td>
<td>Cột 2 dòng 3</td>
<td>Cột 3 dòng 3</td>
</tr>
</table>
</body>
</html>
Kết quả bảng như sau
5) Thuộc tính colspan của thẻ <td> giúp trộn gộp 2 cột trên 1 dòng
Tình huống bạn cần hiển thị một bảng như trong ảnh sau (chú ý vị trí B):
Thao tác thực hiện như ảnh dưới đây:
<!DOCTYPE html>
<html>
<head>
<title>Học HTML tại zezo.dev</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" cellpadding="10" width="50%" >
<tr>
<td>A</td>
<td colspan="2">B</td> <!-- chú ý thuộc tính colspan viết ở thẻ <td> -->
<!-- <td>C</td> dòng này xóa đi-->
</tr>
<tr>
<td>X</td>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>Y</td>
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>
6) Thuộc tính rowspan của thẻ <td> giúp trộn gộp 2 ô trên cùng 1 cột
Tình huống như trong ảnh sau (Vị trí ô x)
Các bước thực hiện như trong ảnh sau:
<!DOCTYPE html>
<html>
<head>
<title>Học HTML tại zezo.dev</title>
<meta charset="UTF-8">
</head>
<body>
<table border="1" cellpadding="10" width="50%" >
<tr>
<td>A</td>
<td>B</td>
<td>C</td>
</tr>
<tr>
<td rowspan="2">X</td> <!-- Thêm thuộc tính rowspan vào ô này-->
<td>1</td>
<td>2</td>
</tr>
<tr>
<!-- <td>Y</td> xóa dòng này đi vì ô X đã chiếm vị trí ô này rồi-->
<td>1</td>
<td>2</td>
</tr>
</table>
</body>
</html>