Thẻ thead

Thẻ thead xác định phần đầu 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 nhất định. Một bảng chỉ có thể có một thẻ thead.

Thẻ thead thường được sử dụng cùng với tbody và tfoot để xác định phần đầu, phần thân chính và phần chân của bảng HTML.

Ví dụ

Hãy thêm màu chữ đỏ cho nhóm hàng được nhóm bởi thẻ thead, bằng cách 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: 1200$</td>
    </tr>
  </tfoot>
</table>

cssthead {
  color: red;
}

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

Результат:

Ví dụ

Ở đây thead không nằm ở trên cùng, và tfoot không nằm ở dưới cùng, tuy nhiên trình duyệt sẽ sắp xếp chúng vào đúng vị trí:

html<table>
  <tfoot>
    <tr>
      <td>số lượng: 2</td>
      <td>-</td>
      <td>tổ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>

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

Результат:

Xem thêm