Propriedade caption-side

A propriedade caption-side define a posição da legenda de uma tabela, criada usando a tag <caption>. A propriedade pode ter dois valores: top (no topo da tabela, padrão) ou bottom (abaixo da tabela).

Sintaxe

seletor {
	caption-side: top | bottom;
}

Exemplo

Vamos posicionar a legenda acima da tabela:

<table border="1" width="300">
	<caption>Tabela</caption>
	<tr>
		<th>Cabeçalho</th>
		<th>Descrição</th>
	</tr>
	<tr>
		<td>texto1</td>
		<td>texto2</td>
	</tr>
</table>

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

Exemplo

Agora vamos mover a legenda para abaixo da tabela:

<table border="1" width="300">
	<caption>Tabela</caption>
	<tr>
		<th>Cabeçalho</th>
		<th>Descrição</th>
	</tr>
	<tr>
		<td>texto1</td>
		<td>texto2</td>
	</tr>
</table>

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

Veja também

propriedade bottom,
que define a posição da borda inferior do elemento
propriedade top,
que define a posição da borda superior do elemento
propriedade left,
que define a posição da borda esquerda do elemento
propriedade right,
que define a posição da borda direita do elemento
pseudoelemento ::backdrop,
que define o posicionamento após o primeiro elemento