Ιδιότητα 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,
που ορίζει τη διάταξη μετά το πρώτο στοιχείο