<tbody>: Phần tử Thân 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 ô thân. 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 ô thân. 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

Xác định căn chỉnh nội dung theo một ký tự của mỗi ô thân. Các giá trị điển hình bao gồm dấu chấm (.) khi muốn căn chỉnh số hoặc giá trị tiền tệ. Nếu align không được đặt thành char, thuộc tính này bị bỏ qua.

charoff Deprecated

Xác định số ký tự để bù đầu nội dung ô thân 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 ô thân. 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

• <tbody> được đặt sau bất kỳ phần tử <caption>, <colgroup> và <thead> nào.
• Nếu các phần tử <tr> được chỉ định là con trực tiếp của phần tử <table> (xem "bỏ qua thẻ" trong tóm tắt kỹ thuật để biết mô tả khi nào điều này hợp lệ), thì markup được tạo bởi trình duyệt sẽ bao gồm phần tử <tbody> bao gồm chúng. Do đó, các selector CSS như table > tr sẽ không chọn các phần tử này. Xem thêm ví dụ Không chỉ định thân.
• Được phép sử dụng nhiều hơn một <tbody> trên mỗi bảng miễn là tất cả đều liên tiếp. Điều này cho phép chia các hàng (phần tử <tr>) trong bảng lớn thành các phần, mỗi phần có thể được định dạng riêng nếu muốn. Nếu không được đánh dấu là các phần tử liên tiếp, trình duyệt sẽ sửa lỗi này của tác giả, đảm bảo bất kỳ phần tử <thead> và <tfoot> nào được hiển thị là phần tử đầu tiên và cuối cùng của bảng tương ứng.
• Cùng với các phần tử <thead> và <tfoot> liên quan, phần tử <tbody> 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, các phần tử <thead> và <tfoot> thường xác định thông tin vẫn giống nhau—hoặc ít nhất rất giống—trên mỗi trang, trong khi nội dung của phần tử <tbody> thường sẽ khác nhau từ trang này sang trang khác.
• Khi bảng được trình bày trong ngữ cảnh màn hình (như cửa sổ) không đủ lớn để hiển thị toàn bộ bảng, user agent có thể cho phép người dùng cuộn nội dung của các khối <thead>, <tbody>, <tfoot> và <caption> riêng biệt với nhau cho cùng một phần tử <table> cha.

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.

Không chỉ định thân

Ví dụ này minh họa rằng trình duyệt tự động bao gồm các phần tử <tr> trong phần tử <tbody> nếu các hàng không được lồng trong một phần tử nhóm bảng (<tbody>, <tfoot> hoặc <thead>) và là con trực tiếp của phần tử <table> như trong ví dụ này.

HTML

Ở đây, một bảng rất cơ bản với một số hàng bảng (phần tử <tr>) chứa dữ liệu (phần tử <td>) về sinh viên được tạo ra.

<table>
  <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>
</table>

CSS

Lưu ý CSS trong ví dụ, trong đó background-color được chỉ định cho phần tử <tbody> và tbody được sử dụng như một phần của CSS selector bổ sung. Ngoài ra, công cụ dành cho nhà phát triển trình duyệt có thể được sử dụng để kiểm tra sự hiện diện của phần tử <tbody> trong DOM.

tbody {
  background-color: #e4f0f5;
}

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

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

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

Kết quả

Cấu trúc thân cơ bản

Ví dụ này mở rộng và nâng cao bảng cơ bản từ ví dụ trước.

HTML

Chúng ta giới thiệu đầu bảng (phần tử <thead>) và sử dụng rõ ràng phần tử <tbody> để cấu trúc bảng thành các phần ngữ nghĩa. Đầu bảng chứa các tiêu đề cột (phần tử <th>). Phần tử <tbody> biểu diễn phần thân của bảng, chứa một số hàng (phần tử <tr>) với dữ liệu chính của bảng, là dữ liệu của từng sinh viên.

Việc sử dụng các nhóm nội dung bảng như vậy và markup ngữ nghĩa không chỉ hữu ích cho trình bày trực quan (thông qua tạo kiểu CSS) và thông tin ngữ cảnh cho công nghệ hỗ trợ; hơn nữa, việc sử dụng rõ ràng phần tử <tbody> giúp trình duyệt tạo ra cấu trúc bảng đúng như ý định, tránh các kết quả không mong muốn.

<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

CSS hầu như không thay đổi so với ví dụ trước, ngoại trừ một số kiểu cơ bản để làm nổi bật đầu bảng để tiêu đề cột nổi bật so với dữ liệu trong phần thân bảng. Như trong ví dụ trên, bộ chọn kiểu tbody được sử dụng để tạo kiểu các ô thân.

tbody {
  background-color: #e4f0f5;
}

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

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;
}

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

Kết quả

Nhiều thân

Ví dụ này mở rộng và nâng cao bảng từ ví dụ trên hơn nữa bằng cách giới thiệu nhiều phần thân.

Sử dụng nhiều phần tử <tbody> cho phép tạo nhóm hàng trong một bảng. Mỗi phần thân bảng có thể có hàng đầu hoặc nhiều hàng đầu riêng; tuy nhiên, chỉ có thể có một phần tử <thead> trên mỗi bảng! Vì vậy, <tr> với các phần tử <th> có thể được sử dụng để tạo tiêu đề trong mỗi <tbody>.

HTML

Dựa trên bảng trong ví dụ cơ bản trước, nhiều sinh viên được thêm vào và thay vì liệt kê chuyên ngành của mỗi sinh viên trên từng hàng, các sinh viên được nhóm theo chuyên ngành. Lưu ý rằng mỗi chuyên ngành được bao gồm trong khối <tbody> riêng của mình, với hàng đầu tiên (phần tử <tr>) đóng vai trò là đầu của khối, hiển thị tên chuyên ngành trong phần tử <th> sử dụng thuộc tính colspan để trải rộng tiêu đề qua ba cột của bảng. Mỗi hàng còn lại trong <tbody> của mỗi chuyên ngành đại diện cho một sinh viên.

<table>
  <thead>
    <tr>
      <th>Student ID</th>
      <th>Name</th>
      <th>Credits</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <th colspan="3">Computer Science</th>
    </tr>
    <tr>
      <td>3741255</td>
      <td>Jones, Martha</td>
      <td>240</td>
    </tr>
    <tr>
      <td>4077830</td>
      <td>Pierce, Benjamin</td>
      <td>200</td>
    </tr>
    <tr>
      <td>5151701</td>
      <td>Kirk, James</td>
      <td>230</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Russian Literature</th>
    </tr>
    <tr>
      <td>3971244</td>
      <td>Nim, Victor</td>
      <td>220</td>
    </tr>
  </tbody>
  <tbody>
    <tr>
      <th colspan="3">Astrophysics</th>
    </tr>
    <tr>
      <td>4100332</td>
      <td>Petrov, Alexandra</td>
      <td>260</td>
    </tr>
    <tr>
      <td>8892377</td>
      <td>Toyota, Hiroko</td>
      <td>240</td>
    </tr>
  </tbody>
</table>

CSS

Hầu hết CSS không thay đổi. Tuy nhiên, một kiểu tinh tế hơn một chút được thêm vào cho các ô tiêu đề chứa trực tiếp trong <tbody> (trái với những ô nằm trong <thead>). Điều này được sử dụng cho các tiêu đề chỉ ra chuyên ngành tương ứng của mỗi phần bảng.

tbody > tr > th {
  border-top: 2px solid rgb(160 160 160);
  border-bottom: 1px solid rgb(140 140 140);
  background-color: #e4f0f5;
  font-weight: normal;
}

tbody {
  background-color: whitesmoke;
}

thead {
  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;
}

th,
td {
  border: 1px solid rgb(160 160 160);
  padding: 6px 8px;
  text-align: left;
}

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>, <td>, <tfoot>, <th>, <thead>, <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 ô thân
• border: Thuộc tính CSS để kiểm soát đường viền của các ô thân
• text-align: Thuộc tính CSS để căn chỉnh ngang nội dung mỗi ô thân
• vertical-align: Thuộc tính CSS để căn chỉnh dọc nội dung mỗi ô thân