Propriedade CSS caption-side

A propriedade caption-side define o posicionamento do elemento HTML <caption> dentro de uma tabela HTML. A tag <caption> é usada para dar um título a uma tabela. O título (legenda) da tabela pode ser colocado na parte inferior ou superior da tabela.

Esta propriedade possui dois valores padronizados: top e bottom. O valor top define que a caixa de legenda deve ser colocada acima da tabela. O valor bottom define que a caixa de legenda deve ser colocada abaixo da tabela.

Existem outros quatro valores não padronizados: left, right, top-outside e bottom-outside. Esses valores foram propostos no CSS 2, mas não foram incluídos no CSS 2.1. Atualmente são obsoletos e suportados apenas pelo Firefox. Não são recomendados para uso em produção.

A propriedade caption-side também pode ser aplicada a qualquer elemento cuja propriedade display esteja definida como table-caption.

Valor Inicial	top
Aplicável a	Elementos table-caption.
Herdada	Não.
Animável	Discreto.
Versão	CSS 2.1
Sintaxe DOM	object.style.captionSide = "top";

Propriedade caption-side para uma legenda de tabela

Use uma legenda de tabela para definir um título curto para a tabela, algo como uma breve descrição. Isso descreverá a estrutura de uma tabela. O elemento <caption> deve ser usado para esse fim. Ele deve ser colocado imediatamente após a tag de abertura <table>, tornando-o o primeiro filho da tabela. (Nota: O atributo summary na tag <table> está obsoleto no HTML5 e não deve ser usado.) Com o auxílio da propriedade caption-side, você pode alterar a posição da legenda.

Sintaxe

Sintaxe da Propriedade CSS caption-side

caption-side: top | bottom | left | right | top-outside | bottom-outside | initial | inherit;

Aqui está um exemplo em que o valor "top" é aplicado. Ele coloca a legenda acima da tabela.

Exemplo da propriedade CSS caption-side:

Exemplo da Propriedade CSS caption-side com o valor top

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #1c87c9;
        color: #fff;
      }
      .top caption {
        caption-side: top;
      }
      table,
      th,
      td {
        border: 1px solid #1c87c9;
        padding: 3px;
      }
      td {
        background-color: #ccc;
        color: #666;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>Some title here</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Resultado

![Propriedade CSS caption-side](/uploads/media/default/0001/03/273b1e51c9d5a4a9ee88f0aa85c7a0958ae2d787.png "CSS caption-side property with top value" =420x)

Exemplo da propriedade caption-side com dois valores:

Exemplo da Propriedade CSS caption-side com os valores top e bottom

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      caption {
        background: #ccc;
      }
      .top caption {
        caption-side: top;
      }
      .bottom caption {
        caption-side: bottom;
      }
      table,
      th,
      td {
        border: 1px solid #cccccc;
        padding: 3px;
      }
      td {
        background-color: #1c87c9;
        color: #ffffff;
      }
    </style>
  </head>
  <body>
    <h2>Caption-side property example</h2>
    <p>Here the caption-side is set to "top":</p>
    <table class="top">
      <caption>ABOVE</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
    <br />
    <p>And here the caption-side is set to "bottom":</p>
    <table class="bottom">
      <caption>BELOW</caption>
      <tr>
        <td>Some text</td>
        <td>Some text</td>
      </tr>
    </table>
  </body>
</html>

Experimente Você Mesmo »

Quando usar caption-side

Por padrão, a legenda aparece acima da tabela (caption-side: top), que é o lugar convencional para um título de tabela. Defina como bottom quando a legenda se assemelhar mais a uma nota de rodapé ou fonte de dados — por exemplo, "Figura 1: Receita trimestral (em milhares)" colocada abaixo de uma tabela com aparência de gráfico. A escolha é puramente visual; o <caption> permanece o primeiro filho da tabela na marcação de qualquer forma, portanto os leitores de tela o anunciam como o nome acessível da tabela independentemente de onde ele é renderizado.

Pontos importantes a ter em mente

A posição na marcação é fixa, a renderização não. Mesmo quando você usa caption-side: bottom, o <caption> deve permanecer o primeiro filho de <table>. O CSS move apenas onde a caixa é desenhada, não onde o elemento vive no DOM.
Use apenas top e bottom. Os valores left, right, top-outside e bottom-outside foram removidos do CSS 2.1 e são suportados apenas pelo Firefox. Em todos os outros navegadores eles são ignorados e recorrem a top, portanto evite-os em produção.
Não é herdada. Embora a propriedade se aplique a caixas table-caption, ela não é herdada, portanto defini-la em um elemento pai não afeta tabelas aninhadas, a menos que você direcione as legendas delas diretamente.
Sem caixa de layout própria para dimensionar. caption-side não pode alterar a largura ou o alinhamento do texto da legenda — use text-align e width no <caption> para isso.

Suporte dos navegadores

Os valores padronizados top e bottom são suportados em todos os navegadores modernos, incluindo o Internet Explorer 8 e versões posteriores. Os valores não padronizados são suportados apenas pelo Firefox.

Valores

Valor	Descrição	Experimente
top	Coloca a legenda acima da tabela. Este é o valor padrão desta propriedade.	Experimente »
bottom	Coloca a legenda abaixo da tabela.	Experimente »
left	Coloca a legenda no lado esquerdo da tabela. Valor não padronizado suportado apenas pelo Firefox.
right	Coloca a legenda no lado direito da tabela. Valor não padronizado suportado apenas pelo Firefox.
top-outside	Coloca a legenda acima da tabela. A largura e o comportamento de alinhamento horizontal não estão vinculados ao layout horizontal da tabela. Valor não padronizado suportado apenas pelo Firefox.
bottom-outside	Coloca a legenda abaixo da tabela, enquanto a largura e o comportamento de alinhamento horizontal não estão vinculados ao layout horizontal da tabela. Valor não padronizado suportado apenas pelo Firefox.
initial	Define a propriedade para o seu valor padrão.	Experimente »
inherit	Herda a propriedade do seu elemento pai.

Prática

O que a propriedade 'caption-side' em CSS faz?

Define a posição da legenda no topo da tabela.Define a posição da legenda na parte inferior da tabela.Estiliza a legenda com uma cor de fonte específica.Aumenta o tamanho do texto da legenda.

Propriedades relacionadas ao estilo de tabelas

border-collapse — escolha se as bordas da tabela se fundem em uma única linha ou permanecem separadas.
empty-cells — controle se bordas e fundos são renderizados em células vazias.
table-layout — alterne entre algoritmos automáticos e fixos de largura de coluna.
text-align — alinhe o texto da legenda dentro de sua caixa.