7.1 Tag <caption>
Các tag <caption>, <thead>, <tbody> và <tfoot> được sử dụng để cải thiện cấu trúc và ý nghĩa của bảng trong HTML. Chúng giúp tổ chức dữ liệu, làm cho bảng dễ hiểu hơn và thân thiện hơn với người dùng lẫn công cụ tìm kiếm.
Tag <caption>
Tag <caption> được sử dụng để thêm tiêu đề cho bảng. Nó giúp mô tả nội dung bảng và làm cho bảng dễ hiểu hơn đối với người dùng và dễ tiếp cận hơn với công cụ tìm kiếm.
Cú pháp:
<table>
<caption>Tiêu đề bảng</caption>
<!-- Nội dung bảng -->
</table>
Ví dụ:
<table>
<caption>Tiêu đề bảng</caption>
<tr>
<th>Tên</th>
<th>Điểm</th>
</tr>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</table>
7.2 Tag <thead>
Tag <thead> được sử dụng để nhóm các hàng tiêu đề của bảng. Nó giúp tách biệt tiêu đề bảng ra khỏi nội dung chính.
Cú pháp:
<table>
<thead>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
</tr>
</thead>
<!-- Nội dung bảng -->
</table>
Ví dụ:
<table>
<thead>
<tr>
<th>Tên</th>
<th>Điểm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.3 Tag <tbody>
Tag <tbody> được sử dụng để nhóm phần nội dung chính của bảng. Nó giúp tách biệt nội dung chính khỏi tiêu đề và phần "chân" của bảng.
Cú pháp:
<table>
<thead>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
</tr>
</thead>
<tbody>
<!-- Nội dung bảng -->
</tbody>
</table>
Ví dụ:
<table>
<thead>
<tr>
<th>Tên</th>
<th>Điểm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
</table>
7.4 Tag <tfoot>
Tag <tfoot> được sử dụng để nhóm các hàng dưới chân của bảng. Nó thường chứa thông tin tổng hợp hoặc dữ liệu tóm tắt.
Cú pháp:
<table>
<thead>
<tr>
<th>Tiêu đề 1</th>
<th>Tiêu đề 2</th>
</tr>
</thead>
<tbody>
<!-- Nội dung bảng -->
</tbody>
<tfoot>
<tr>
<td>Tổng 1</td>
<td>Tổng 2</td>
</tr>
</tfoot>
</table>
Ví dụ hoàn chỉnh:
<table>
<thead>
<tr>
<th>Tên</th>
<th>Điểm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>90</td>
</tr>
<tr>
<td>Maria</td>
<td>85</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Điểm trung bình</td>
<td>87.5</td>
</tr>
</tfoot>
</table>
Nhớ mấy cái này dễ ẹc luôn:
Giải thích cấu trúc bảng
<table>: thẻ chứa toàn bộ bảng<caption>: tiêu đề bảng, giúp mô tả nội dung của bảng<thead>: nhóm các hàng tiêu đề của bảng<tbody>: nhóm nội dung chính của bảng<tfoot>: nhóm các hàng ở chân bảng
Thực hành củng cố
Học xong rồi, giờ mình tạo cái bảng đầy đủ các tag đã học và thêm style vào nhé.
<table>
<caption>Kết quả kỳ thi</caption>
<thead>
<tr>
<th>Tên</th>
<th>Điểm</th>
</tr>
</thead>
<tbody>
<tr>
<td>Ivan</td>
<td>91</td>
</tr>
<tr>
<td>Maria</td>
<td>94</td>
</tr>
<tr>
<td>Nina</td>
<td>89</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Điểm trung bình</td >
<td>91.33</td>
</tr>
</tfoot>
</table>
table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
font-size: 18px;
text-align: left;
}
caption {
caption-side: top;
font-weight: bold;
font-size: 20px;
margin-bottom: 10px;
}
th, td {
padding: 12px 15px;
border: 1px solid #ddd;
}
thead th {
background-color: #f2f2f2;
}
tbody tr:nth-child(even) {
background-color: #f9f9f9;
}
tfoot td {
font-weight: bold;
background-color: #f2f2f2;
}
GO TO FULL VERSION