caption-side Özelliği

caption-side özelliği, <caption> etiketi kullanılarak oluşturulmuş bir tablo başlığının konumunu belirler. Özelliğin iki değeri olabilir: top (tablonun üstü, varsayılan) veya bottom (tablonun altı).

Sözdizimi

seçici {
	caption-side: top | bottom;
}

Örnek

Başlığı tablonun üstüne yerleştirelim:

<table border="1" width="300">
	<caption>Tablo</caption>
	<tr>
		<th>Başlık</th>
		<th>Açıklama</th>
	</tr>
	<tr>
		<td>metin1</td>
		<td>metin2</td>
	</tr>
</table>

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

Örnek

Şimdi ise başlığı tablonun altına taşıyalım:

<table border="1" width="300">
	<caption>Tablo</caption>
	<tr>
		<th>Başlık</th>
		<th>Açıklama</th>
	</tr>
	<tr>
		<td>metin1</td>
		<td>metin2</td>
	</tr>
</table>

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

Ayrıca Bakınız

bottom özelliği,
bir öğenin alt kenarının konumunu belirler
top özelliği,
bir öğenin üst kenarının konumunu belirler
left özelliği,
bir öğenin sol kenarının konumunu belirler
right özelliği,
bir öğenin sağ kenarının konumunu belirler
::backdrop sözde öğesi,
ilk öğeden sonraki konumu belirler