Properti caption-side

Properti caption-side mengatur posisi judul tabel, yang dibuat menggunakan tag <caption>. Properti ini dapat memiliki dua nilai: top (di atas tabel, secara default) atau bottom (di bawah tabel).

Sintaksis

selektor {
	caption-side: top | bottom;
}

Contoh

Mari letakkan judul di atas tabel:

<table border="1" width="300">
	<caption>Tabel</caption>
	<tr>
		<th>Kepala</th>
		<th>Deskripsi</th>
	</tr>
	<tr>
		<td>teks1</td>
		<td>teks2</td>
	</tr>
</table>

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

Contoh

Sekarang mari pindahkan judul ke bawah tabel:

<table border="1" width="300">
	<caption>Tabel</caption>
	<tr>
		<th>Kepala</th>
		<th>Deskripsi</th>
	</tr>
	<tr>
		<td>teks1</td>
		<td>teks2</td>
	</tr>
</table>

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

Lihat juga

properti bottom,
yang mengatur posisi tepi bawah elemen
properti top,
yang mengatur posisi tepi atas elemen
properti left,
yang mengatur posisi tepi kiri elemen
properti right,
yang mengatur posisi tepi kanan elemen
pseudoelemen ::backdrop,
yang mengatur penempatan setelah elemen pertama