คุณสมบัติ caption-side

คุณสมบัติ caption-side กำหนด ตำแหน่งของหัวเรื่องตารางที่สร้างขึ้นด้วยแท็ก <caption> คุณสมบัตินี้ สามารถมีค่าได้สองค่า: top (ด้านบนของตาราง, ค่าเริ่มต้น) หรือ bottom (ใต้ตาราง)

ไวยากรณ์

ตัวเลือก {
	caption-side: top | bottom;
}

ตัวอย่าง

ลองวางหัวเรื่องไว้ด้านบนของตาราง:

<table border="1" width="300">
	<caption>ตาราง</caption>
	<tr>
		<th>หัวเรื่อง</th>
		<th>คำอธิบาย</th>
	</tr>
	<tr>
		<td>ข้อความ1</td>
		<td>ข้อความ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;
}

ตัวอย่าง

และตอนนี้ลองย้ายหัวเรื่องไว้ ใต้ตาราง:

<table border="1" width="300">
	<caption>ตาราง</caption>
	<tr>
		<th>หัวเรื่อง</th>
		<th>คำอธิบาย</th>
	</tr>
	<tr>
		<td>ข้อความ1</td>
		<td>ข้อความ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;
}

ดูเพิ่มเติม

คุณสมบัติ bottom,
ซึ่งกำหนดตำแหน่งขอบล่างขององค์ประกอบ
คุณสมบัติ top,
ซึ่งกำหนดตำแหน่งขอบบนขององค์ประกอบ
คุณสมบัติ left,
ซึ่งกำหนดตำแหน่งขอบซ้ายขององค์ประกอบ
คุณสมบัติ right,
ซึ่งกำหนดตำแหน่งขอบขวาขององค์ประกอบ
องค์ประกอบเทียม ::backdrop,
ซึ่งกำหนดตำแหน่งหลังองค์ประกอบแรก