Thẻ HTML <caption>

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

<caption> Thẻ này định nghĩa tiêu đề của bảng.

Thẻ caption phải ngay sau thẻ table. Bạn chỉ có thể định nghĩa một tiêu đề cho mỗi bảng.

Lưu ý:Mặc định, tiêu đề của bảng sẽ được căn giữa ở trên cùng của bảng. Tuy nhiên, thuộc tính CSS text-align và caption-side có thể được sử dụng để căn chỉnh và đặt tiêu đề.

Xin xem thêm:

Hướng dẫn tham khảo HTML DOM:Đối tượng Caption

Mô hình

Ví dụ 1

Bảng có tiêu đề:

<table>
  <caption>Tài khoản tiết kiệm hàng tháng</caption>
  <tr>
    <th>Tháng</th>
    <th>Lưu tiền</th>
  </tr>
  <tr>
    <td>Tháng một</td>
    <td>￥3000</td>
  </tr>
</table>

Thử ngay

Ví dụ 2

Tiêu đề của bảng định vị (sử dụng CSS):

<table>
  <caption style="text-align:right">Tài khoản tiết kiệm của tôi</caption>
  <tr>
    <th>Tháng</th>
    <th>Lưu tiền</th>
  </tr>
  <tr>
    <td>Tháng một</td>
    <td>￥3000</td>
  </tr>
</table>
<br>
<table>
  <caption style="caption-side:bottom">Lưu tiền của tôi</caption>
  <tr>
    <th>Tháng</th>
    <th>Lưu tiền</th>
  </tr>
  <tr>
    <td>Tháng một</td>
    <td>￥3000</td>
  </tr>
</table>

Thử ngay

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

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

Thuộc tính sự kiện

<caption> 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ị giá trị mặc định sau đây <caption> Thành phần:

caption {
  display: table-caption;
  text-align: center;
}

Thử ngay

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ợ