თვისება 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,
რომელიც აზუსტებს მდებარეობას პირველი ელემენტის შემდეგ