Thuộc tính caption-side

Thuộc tính caption-side thiết lập vị trí của tiêu đề bảng, được tạo bằng thẻ <caption>. Thuộc tính có thể có hai giá trị: top (phía trên bảng, mặc định) hoặc bottom (phía dưới bảng).

Cú pháp

cssbộ chọn {
  caption-side: top | bottom;
}

Ví dụ

Hãy đặt tiêu đề phía trên bảng:

html<table border="1" width="300">
  <caption>Bảng</caption>
  <tr>
    <th>Tiêu đề</th>
    <th>Mô tả</th>
  </tr>
  <tr>
    <td>văn bản 1</td>
    <td>văn bản 2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: top;
  font-weight: bold;
}

Результат:

Ví dụ

Bây giờ hãy di chuyển tiêu đề xuống dưới bảng:

html<table border="1" width="300">
  <caption>Bảng</caption>
  <tr>
    <th>Tiêu đề</th>
    <th>Mô tả</th>
  </tr>
  <tr>
    <td>văn bản 1</td>
    <td>văn bản 2</td>
  </tr>
</table>

csstable {
  width: 100%;
  border-collapse: collapse;
}
td {
  width: 200px;
  height: 100px;
  text-align: center;
}
caption {
  caption-side: bottom;
  font-weight: bold;
}

Результат:

Xem thêm