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

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

Ví dụ

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

<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>

table {
	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:

<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>

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

Xem thêm

thuộc tính bottom,
thiết lập vị trí cạnh dưới của phần tử
thuộc tính top,
thiết lập vị trí cạnh trên của phần tử
thuộc tính left,
thiết lập vị trí cạnh trái của phần tử
thuộc tính right,
thiết lập vị trí cạnh phải của phần tử
phần tử giả ::backdrop,
thiết lập vị trí sau phần tử đầu tiên