Thuộc tính caption-side

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

Thuộc tính caption-side xác định vị trí một chú thích của table.

Cấu trúc

caption {
    caption-side: giá trị;
}

Với giá trị như sau:

Thuộc tính giá trị Ví dụ Mô tả
caption-side top caption-side: top; Caption có vị trí bên trên table.
bottom caption-side: bottom; Caption có vị trí bên dưới table.
inherit caption-side: inherit; Xác định thừa hưởng thuộc tính từ thành phần cha (thành phần bao ngoài).

Ví dụ

HTML viết:

<html>
<head></head>
<body>
<table>
<caption>Caption của table</caption>
<tr>
<th>Thu hai</th>
<th>Thu ba</th>
</tr>

<tr>
<td>2000d</td>
<td>5000d</td>
</tr>

<tr>
<td>500d</td>
<td>4000d</td>
</tr>
</table>
</body>
</html>

Hiển thị trình duyệt khi chưa có CSS (mặc định của caption-side là top):

Caption của table
Thu hai Thu ba
2000d 5000d
500d 4000d

CSS viết:

caption {
    caption-side: bottom;
}

Hiển thị trình duyệt khi có CSS:

Caption của table
Thu hai Thu ba
2000d 5000d
500d 4000d

Trình duyệt hỗ trợ

  • Internet Explorer
  • Firefox
  • Opera
  • Google Chrome
  • Safari

Thuộc tính caption-side được hỗ trợ trong đa số các trình duyệt.

IE8 đòi hỏi phải có !Doctype