Computer >> Hướng Dẫn Máy Tính >  >> Lập Trình >> HTML

Hiển thị thân bảng (tbody) trong HTML


Thẻ <tbody> nhóm các hàng dữ liệu chính của bảng, dùng cùng <thead> (header) và <tfoot> (footer).

Ví dụ

<!DOCTYPE html>
<html>
<head>
  <title>HTML tbody Tag</title>
  <style>
    table { width: 100%; border-collapse: collapse; margin: 20px 0; }
    th, td { border: 1px solid #ddd; padding: 12px; text-align: left; }
    thead { background: #343a40; color: white; }
    tfoot { background: #f8f9fa; font-weight: bold; }
    tbody tr:nth-child(even) { background: #f2f2f2; }
    tbody tr:hover { background: #e9ecef; }
  </style>
</head>
<body>
  <h1>Bảng Có Thead, Tbody, Tfoot</h1>
  <table>
    <thead>
      <tr>
        <th colspan="4">Danh Sách Sinh Viên</th>
      </tr>
      <tr>
        <th>MSSV</th><th>Họ Tên</th><th>Ngành</th><th>Điểm TB</th>
      </tr>
    </thead>
    <tfoot>
      <tr>
        <td colspan="3">Tổng cộng</td>
        <td>150 sinh viên</td>
      </tr>
    </tfoot>
    <tbody>
      <tr><td>SV001</td><td>Nguyễn Văn An</td><td>CNTT</td><td>3.8</td></tr>
      <tr><td>SV002</td><td>Trần Thị Bình</td><td>Kinh tế</td><td>3.5</td></tr>
      <tr><td>SV003</td><td>Lê Văn Cường</td><td>CNTT</td><td>3.9</td></tr>
    </tbody>
    <tbody>
      <tr><td>SV004</td><td>Phạm Thị Dung</td><td>Luật</td><td>3.6</td></tr>
      <tr><td>SV005</td><td>Hoàng Văn Em</td><td>Y khoa</td><td>3.7</td></tr>
    </tbody>
  </table>
</body>
</html>

Kết quả

Bảng có header đen, footer xám đậm, 2 tbody nhóm dữ liệu (có thể style khác nhau cho từng nhóm), zebra striping cho tbody.

Lưu ý

  • Có thể có nhiều <tbody> trong 1 bảng
  • Thứ tự trong DOM: <thead> → <tfoot> → <tbody> (nhưng hiển thị: thead, tbody..., tfoot)
  • Thuộc tính align, char, charoff, valign đã deprecated (dùng CSS)