HTML <tbody> 标签

Định nghĩa và cách sử dụng

<tbody> thẻ được sử dụng để nhóm nội dung chính của bảng HTML.

<tbody> phần tử với <thead> và <tfoot> phần tử kết hợp sử dụng để chỉ định mỗi phần của bảng (nội dung, tiêu đề, chân trang).

browser có thể sử dụng các phần tử này để hiển thị tiêu đề và chân trang độc lập khi cuộn nội dung bảng. Ngoài ra, khi in bảng lớn跨越 nhiều trang, các phần tử này có thể giúp in tiêu đề và chân trang ở đầu và cuối mỗi trang.

Lưu ý:<tbody> phần tử nội bộ phải có một hoặc nhiều thẻ <tr>.。

<tbody> thẻ phải được sử dụng trong ngữ cảnh sau: làm <table> phần tử con của phần tử, ở bất kỳ <caption>và<colgroup> và <thead> sau phần tử.

Lưu ý:Mặc định, các phần tử <thead>, <tbody> và <tfoot> không ảnh hưởng đến bố cục của bảng. Tuy nhiên, bạn có thể sử dụng CSS để đặt样式 cho các phần tử này (xem ví dụ dưới đây)!

mô hình

ví dụ 1

Bảng HTML chứa các phần tử <thead>, <tbody> và <tfoot>:

<table>
  <thead>
    <tr>
      <th>Tháng</th>
      <th>Lưu trữ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tháng Một</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Tháng Hai</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>tổng cộng</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Thử ngay

ví dụ 2

Đặt样式 cho <thead>, <tbody> và <tfoot> bằng CSS:

<html>
<head>
<style>
thead {color: green;}
tbody {color: blue;}
tfoot {color: red;}
table, th, td {
  border: 1px solid black;
}
</style>
</head>
<body>
<table>
  <thead>
    <tr>
      <th>Tháng</th>
      <th>Lưu trữ</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tháng Một</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Tháng Hai</td>
      <td>￥4500</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>tổng cộng</td>
      <td>￥7900</td>
    </tr>
  </tfoot>
</table>

Thử ngay

ví dụ 3

cách canh <tbody> nội dung trong đó (sử dụng CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Tháng</th>
      <th>Lưu trữ</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>Tháng Một</td>
      <td>￥3400</td>
    </tr>
    <tr>
      <td>Tháng Hai</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Thử ngay

ví dụ 4

cách canh dọc <tbody> nội dung trong đó (sử dụng CSS):

<table style="width:50%;">
  <tr>
    <th>Tháng</th>
    <th>Lưu trữ</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Tháng Một</td>
      <td>￥3400</td>
    </tr>
    <tr style="height:100px">
      <td>Tháng Hai</td>
      <td>￥4500</td>
    </tr>
  </tbody>
</table>

Thử ngay

Thuộc tính toàn cục

<tbody> Thẻ cũng hỗ trợ Thuộc tính toàn cục trong HTML。

Thuộc tính sự kiện

<tbody> Thẻ cũng hỗ trợ Thuộc tính sự kiện trong HTML。

Cài đặt CSS mặc định

Hầu hết các trình duyệt sẽ hiển thị các giá trị mặc định sau <tbody> Thành phần:

tbody {
  display: nhóm hàng bảng;
  vertical-align: giữa;
  border-color: di truyền;
}

Hỗ trợ trình duyệt

Chrome Edge Firefox Safari Opera
Chrome Edge Firefox Safari Opera
Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ