Својството 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,
кое го одредува расположувањето после првиот елемент