<thead>: Phần tử Đầu Bảng

Try it

<table>
  <caption>
    Council budget (in £) 2018
  </caption>
  <thead>
    <tr>
      <th scope="col">Items</th>
      <th scope="col">Expenditure</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th scope="row">Donuts</th>
      <td>3,000</td>
    </tr>
    <tr>
      <th scope="row">Stationery</th>
      <td>18,000</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row">Totals</th>
      <td>21,000</td>
    </tr>
  </tfoot>
</table>

thead,
tfoot {
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

caption {
  caption-side: bottom;
  padding: 10px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

td {
  text-align: center;
}

Thuộc tính

Phần tử này bao gồm các thuộc tính toàn cục.

Thuộc tính không còn dùng

Các thuộc tính sau đây đã không còn được dùng và không nên sử dụng. Chúng được ghi lại dưới đây để tham khảo khi cập nhật code hiện có và chỉ vì lý do lịch sử.

align Deprecated

Xác định căn chỉnh ngang của mỗi ô đầu. Các giá trị enumerated có thể là left, center, right, justify và char. Khi được hỗ trợ, giá trị char căn chỉnh nội dung văn bản theo ký tự được định nghĩa trong thuộc tính char và độ lệch được định nghĩa bởi thuộc tính charoff. Thay vào đó hãy sử dụng thuộc tính CSS text-align, vì thuộc tính này đã không còn được dùng.

bgcolor Deprecated

Xác định màu nền của mỗi ô đầu. Giá trị là màu HTML; có thể là mã RGB thập lục phân 6 chữ số, có tiền tố #, hoặc một từ khóa màu. Các giá trị CSS <color> khác không được hỗ trợ. Thay vào đó hãy sử dụng thuộc tính CSS background-color, vì thuộc tính này đã không còn được dùng.

char Deprecated

Không có tác dụng. Ban đầu được dùng để xác định căn chỉnh nội dung theo một ký tự của mỗi ô đầu. Nếu align không được đặt thành char, thuộc tính này bị bỏ qua.

charoff Deprecated

Không có tác dụng. Ban đầu được dùng để xác định số ký tự để bù đầu nội dung ô đầu từ ký tự căn chỉnh được xác định bởi thuộc tính char.

valign Deprecated

Xác định căn chỉnh dọc của mỗi ô đầu. Các giá trị enumerated có thể là baseline, bottom, middle và top. Thay vào đó hãy sử dụng thuộc tính CSS vertical-align, vì thuộc tính này đã không còn được dùng.

Ghi chú sử dụng

• <thead> được đặt sau bất kỳ phần tử <caption> và <colgroup> nào, nhưng trước bất kỳ phần tử <tbody>, <tfoot> và <tr> nào.
• Cùng với các phần tử <tbody> và <tfoot> liên quan, phần tử <thead> cung cấp thông tin ngữ nghĩa hữu ích và có thể được sử dụng khi hiển thị cho màn hình hoặc in ấn. Việc chỉ định các nhóm nội dung bảng như vậy cũng cung cấp thông tin ngữ cảnh có giá trị cho công nghệ hỗ trợ, bao gồm trình đọc màn hình và công cụ tìm kiếm.
• Khi in tài liệu, trong trường hợp bảng nhiều trang, đầu bảng thường xác định thông tin vẫn giống nhau trên mỗi trang.

Ví dụ

Xem <table> để biết ví dụ bảng đầy đủ giới thiệu các chuẩn và thực hành phổ biến.

Cấu trúc đầu cơ bản

Ví dụ này minh họa một bảng được chia thành phần đầu với tiêu đề cột và phần thân với dữ liệu chính của bảng.

HTML

Các phần tử <thead> và <tbody> được sử dụng để cấu trúc các hàng bảng thành các phần ngữ nghĩa. Phần tử <thead> biểu diễn phần đầu của bảng, chứa một hàng (<tr>) các ô tiêu đề cột (<th>).

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Major</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

CSS

Một số CSS cơ bản được sử dụng để tạo kiểu và làm nổi bật đầu bảng để tiêu đề các cột nổi bật so với dữ liệu trong phần thân bảng.

thead {
  border-bottom: 2px solid rgb(160 160 160);
  text-align: center;
  background-color: #2c5e77;
  color: white;
}

tbody {
  background-color: #e4f0f5;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Kết quả

Nhiều hàng đầu

Ví dụ này minh họa một phần đầu bảng với hai hàng.

HTML

Chúng ta mở rộng markup bảng từ ví dụ cơ bản trong ví dụ này bằng cách bao gồm hai hàng bảng (<tr>) trong phần tử <thead> tạo ra đầu bảng nhiều hàng. Chúng ta thêm một cột bổ sung, chia tên sinh viên thành tên và họ.

<table>
  <thead>
    <tr>
      <th rowspan="2">Student ID</th>
      <th colspan="2">Student</th>
      <th rowspan="2">Major</th>
      <th rowspan="2">Credits</th>
    </tr>
    <tr>
      <th>First name</th>
      <th>Last name</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>3741255</td>
      <td>Martha</td>
      <td>Jones</td>
      <td>Computer Science</td>
      <td>240</td>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Victor</td>
      <td>Nim</td>
      <td>Russian Literature</td>
      <td>220</td>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Alexandra</td>
      <td>Petrov</td>
      <td>Astrophysics</td>
      <td>260</td>
    </tr>
  </tbody>
</table>

Trải rộng ô

Để liên kết và căn chỉnh các ô tiêu đề với đúng cột và hàng, các thuộc tính colspan và rowspan được sử dụng trên các phần tử <th>. Các giá trị được đặt trong các thuộc tính này xác định số ô mà mỗi ô tiêu đề (<th>) trải rộng. Do cách các thuộc tính này được đặt, hai ô tiêu đề hàng thứ hai được căn chỉnh với các cột mà chúng đứng đầu. Mỗi ô trải rộng một hàng và một cột vì các giá trị mặc định cho các thuộc tính colspan và rowspan đều là 1.

Trải rộng cột và hàng được minh họa bởi ví dụ này được minh họa trong hình sau:

CSS

CSS không thay đổi so với ví dụ trước.

thead {
  border-bottom: 2px solid rgb(160 160 160);
  background-color: #2c5e77;
  color: white;
}

table {
  border-collapse: collapse;
  border: 2px solid rgb(140 140 140);
  font-family: sans-serif;
  font-size: 0.8rem;
  letter-spacing: 1px;
}

tbody {
  background-color: #e4f0f5;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 8px 10px;
}

tbody > tr > td:last-of-type {
  text-align: center;
}

Kết quả

Tóm tắt kỹ thuật

Đặc tả

Tương thích trình duyệt

Xem thêm

• Học: Kiến thức cơ bản về bảng HTML
• <caption>, <col>, <colgroup>, <table>, <tbody>, <td>, <tfoot>, <th>, <tr>: Các phần tử liên quan đến bảng khác
• background-color: Thuộc tính CSS để đặt màu nền của mỗi ô đầu
• border: Thuộc tính CSS để kiểm soát đường viền của các ô đầu
• text-align: Thuộc tính CSS để căn chỉnh ngang nội dung mỗi ô đầu
• vertical-align: Thuộc tính CSS để căn chỉnh dọc nội dung mỗi ô đầu