Thuộc tính caption-side | CSS

Đị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ợ

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

Link liên quan

bottom

clear