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

cssseletor {
  caption-side: top | bottom;
}

Exemplo

Vamos posicionar a legenda acima da tabela:

html<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>

csstable {
  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:

html<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>

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

Результат:

Veja também