Thẻ HTML

Chủ nhật - 24/03/2024 23:16

Định nghĩa và cách sử dụng thẻ <tbody>

Thẻ <tbody> được sử dụng để nhóm nội dung body trong bảng HTML. Phần tử <tbody> được sử dụng kết hợp với các phần tử <thead> và <tfoot> để chỉ định từng phần của bảng (nội dung, footer, header). Ví dụ về bảng HTML có phần tử <thead>, <tbody> và <tfoot>:

<table>
  <thead>
    <tr>
      <th>Tháng</th>
      <th>Số tiền tiết kiệm</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tháng 1</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Tháng 2</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Tổng</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Trình duyệt có thể sử dụng các phần tử này để cho phép cuộn phần thân bảng một cách độc lập với header và footer. Ngoài ra, khi in một bảng lớn trải dài trên nhiều trang, các phần tử này có thể cho phép in header và footer của bảng ở đầu và cuối mỗi trang.

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

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

Mẹo: Các phần tử <thead>, <tbody> và <tfoot> sẽ không ảnh hưởng đến bố cục của bảng theo mặc định. Tuy nhiên, bạn có thể sử dụng CSS để tạo kiểu cho các phần tử này!

 

Hỗ trợ trình duyệt

Phần tử
<tbody>		 Google Chrome MS Edge Firefox Safari Opera
Có Có Có Có Có

Thuộc tính Global

Thẻ <tbody> cũng hỗ trợ thuộc tính Global trong HTML.

Thuộc tính sự kiện

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

Các ví dụ khác

Tạo kiểu <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>Số tiền tiết kiệm</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Tháng 1</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Tháng 2</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Tổng</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

Căn chỉnh nội dung bên trong <tbody> (bằng CSS):

<table style="width:100%">
  <thead>
    <tr>
      <th>Tháng</th>
      <th>Số tiền tiết kiệm</th>
    </tr>
  </thead>
  <tbody style="text-align:right">
    <tr>
      <td>Tháng 1</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>Tháng 2</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>

Căn chỉnh nội dung theo chiều dọc bên trong <tbody> (bằng CSS):

<table style="width:50%;">
  <tr>
    <th>Tháng</th>
    <th>Số tiền tiết kiệm</th>
  </tr>
  <tbody style="vertical-align:bottom">
    <tr style="height:100px">
      <td>Tháng 1</td>
      <td>$100</td>
    </tr>
    <tr style="height:100px">
      <td>Tháng 2</td>
      <td>$80</td>
    </tr>
  </tbody>
</table>
 

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

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

tbody {
  display: table-row-group;
  vertical-align: middle;
  border-color: inherit;
}

Nguồn tin: Quantrimang.com

Tổng số điểm của bài viết là: 0 trong 0 đánh giá

  Ý kiến bạn đọc

Những tin mới hơn

Những tin cũ hơn

Mới cập nhật
Trợ giúp

Thông tin liên hệ

Lưu niệm
Fanpage
Nguoicodonvn2008.info
THỐNG KÊ TRUY CẬP
  • Đang truy cập307
  • Máy chủ tìm kiếm20
  • Khách viếng thăm287
  • Hôm nay54,530
  • Tháng hiện tại695,409
  • Tổng lượt truy cập17,787,643
QUẢNG CÁO
Phan Thanh Phú
Quảng cáo 2
Liên kết site
Đăng nhập Thành viên
Hãy đăng nhập thành viên để trải nghiệm đầy đủ các tiện ích trên site
Đăng ký
Thăm dò ý kiến

Bạn thấy Website cần cải tiến những gì?

Lịch Âm dương
Máy tính
Bạn đã không sử dụng Site, Bấm vào đây để duy trì trạng thái đăng nhập. Thời gian chờ: 60 giây