Ominaisuus caption-side

Ominaisuus caption-side asettaa taulukon otsikon sijainnin, joka on luotu käyttämällä tagia <caption>. Ominaisuudella voi olla kaksi arvoa: top (taulukon yläpuolella, oletusarvoisesti) tai bottom (taulukon alla).

Syntaksi

valitsija {
	caption-side: top | bottom;
}

Esimerkki

Sijoitetaan otsikko taulukon yläpuolelle:

<table border="1" width="300">
	<caption>Taulukko</caption>
	<tr>
		<th>Otsake</th>
		<th>Kuvaus</th>
	</tr>
	<tr>
		<td>teksti1</td>
		<td>teksti2</td>
	</tr>
</table>

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

Esimerkki

Siirretään nyt otsikko taulukon alle:

<table border="1" width="300">
	<caption>Taulukko</caption>
	<tr>
		<th>Otsake</th>
		<th>Kuvaus</th>
	</tr>
	<tr>
		<td>teksti1</td>
		<td>teksti2</td>
	</tr>
</table>

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

Katso myös

ominaisuus bottom,
joka asettaa elementin alareunan sijainnin
ominaisuus top,
joka asettaa elementin yläreunan sijainnin
ominaisuus left,
joka asettaa elementin vasemman reunan sijainnin
ominaisuus right,
joka asettaa elementin oikean reunan sijainnin
pseudoelementti ::backdrop,
joka asettaa sijoittelun ensimmäisen elementin jälkeen