Propiedad caption-side

La propiedad caption-side establece la posición del título de una tabla, creado con la etiqueta <caption>. La propiedad puede tener dos valores: top (arriba de la tabla, por defecto) o bottom (debajo de la tabla).

Sintaxis

selector {
	caption-side: top | bottom;
}

Ejemplo

Coloquemos el título arriba de la tabla:

<table border="1" width="300">
	<caption>Table</caption>
	<tr>
		<th>Head</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>text1</td>
		<td>text2</td>
	</tr>
</table>

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

Ejemplo

Y ahora movamos el título debajo de la tabla:

<table border="1" width="300">
	<caption>Table</caption>
	<tr>
		<th>Head</th>
		<th>Description</th>
	</tr>
	<tr>
		<td>text1</td>
		<td>text2</td>
	</tr>
</table>

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

Véase también

propiedad bottom,
que establece la posición del borde inferior de un elemento
propiedad top,
que establece la posición del borde superior de un elemento
propiedad left,
que establece la posición del borde izquierdo de un elemento
propiedad right,
que establece la posición del borde derecho de un elemento
pseudoelemento ::backdrop,
que establece la ubicación después del primer elemento