Thẻ tfoot
Thẻ tfoot xác định phần dưới (chân) của bảng.
Được sử dụng để nhóm các hàng theo cách mà
có thể áp dụng ngay các kiểu CSS cho một nhóm nào đó.
Một bảng chỉ có thể có một thẻ tfoot.
Thẻ tfoot thường được sử dụng cùng với
thead
và tbody
để xác định phần trên, phần thân chính
và phần dưới của bảng HTML. Theo mặc định,
trình duyệt sẽ đặt nội dung của tfoot
ở phần dưới của bảng, còn thead -
ở phần trên.
Ví dụ
Hãy đặt màu đỏ cho văn bản của nhóm hàng
được nhóm bằng thẻ tfoot,
sử dụng thuộc tính color:
<table>
<thead>
<tr>
<th>Tên</th>
<th>Họ</th>
<th>Lương</th>
</tr>
</thead>
<tbody>
<tr>
<td>tên1</td>
<td>họ1</td>
<td>200$</td>
</tr>
<tr>
<td>tên2</td>
<td>họ2</td>
<td>1000$</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>số lượng: 2</td>
<td>-</td>
<td>tổng cộng: 1200$</td>
</tr>
</tfoot>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
Ví dụ
Ở đây, hãy xem, thead
không nằm ở trên cùng, và tfoot cũng không ở dưới cùng,
tuy nhiên trình duyệt vẫn sắp xếp chúng vào đúng
vị trí của mình:
<table>
<tfoot>
<tr>
<td>số lượng: 2</td>
<td>-</td>
<td>tổng cộng: 1200$</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>tên1</td>
<td>họ1</td>
<td>200$</td>
</tr>
<tr>
<td>tên2</td>
<td>họ2</td>
<td>1000$</td>
</tr>
</tbody>
<thead>
<tr>
<th>Tên</th>
<th>Họ</th>
<th>Lương</th>
</tr>
</thead>
</table>
tfoot {
color: red;
}
table, td, th {
border: 1px solid black;
}
:
