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:

html<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>

csstfoot {
  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:

html<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>

csstfoot {
  color: red;
}

table, td, th {
  border: 1px solid black;
}

Результат:

Xem thêm