Como decorar a sua tabela com CSS

Escrito por ehow contributor | Traduzido por fabrício calmon
  • Compartilhar
  • Tweetar
  • Compartilhar
  • Pin
  • E-mail
Como decorar a sua tabela com CSS
Bordas, legendas, alinhamento e outros elementos de uma tabela são decorados com CSS

Use CSS para tornar a sua tabela de dados atraente e fácil de entender.

Nível de dificuldade:
Moderado

Outras pessoas estão lendo

O que você precisa?

  • Conhecimento de HTML básico
  • Conhecimento básico de CSS
  • Nada novo será necessário nesta seção

Lista completaMinimizar

Instruções

    CSS para as bordas

  1. 1

    Crie a tabela do seu jeito habitual. Se sua tabela usa colunas para organizar os dados, use o elemento HTML th para criar cabeçalhos de coluna. Se sua tabela usa linhas para organizar os dados, use o elemento HTML th para criar cabeçalhos de linha.

  2. 2

    Criar bordas em CSS requer duas regras no seu CSS. Com a primeira regra, você define uma borda para fora da tabela. Você também define a regra border-collapse, de modo que você só tenha uma linha na borda entre as células da tabela. (Se você quiser bordas duplas entre as células da tabela, não defina a propriedade border-collapse como collapse.) Aqui está uma regra de exemplo:

    table { border-width: 1px; border-style: solid; border-color: #000000; border-collapse: collapse; }

  3. 3

    Em seguida, adicione uma borda para o cabeçalho da tabela (th) e os dados da tabela (td) nas células da tabela. Se você usou border-collapse: collapse em sua regra de tabela, haverá uma linha de borda única entre as células. Aqui está uma regra de exemplo:

    th, td { border-width: 1px; border-style: solid; border-color: #000000; }

    Note que agrupar as regras pelo seletor th, td cria a mesma regra CSS para ambos os elementos th e td.

    CSS para legendas e cabeçalhos

  1. 1

    Se sua tabela tem uma legenda, você pode usar CSS para decorá-la. A tabela exibida na imagem da Seção 1, no Passo 3 posssui uma legenda. Aqui está um exemplo simples de uma regra de decoração para ela.

    caption { font-size: 1.4em; font-weight: bold; padding-bottom: 4px; }

    Compare o efeito desta regra com a visualização da aparência na Seção 1, Passo 3.

  2. 2

    Você pode posicionar a legenda na parte superior ou inferior da tabela usando a declação caption-side: top ou caption-side: bottom como uma das regras da legenda.

  3. 3

    O elemento th é negrito e centralizado (se é em uma coluna) por padrão. Se de qualquer froma você quiser mudar a sua aparência, você pode escrever uma regra para o seletor th. Esta regra, por exemplo, muda a cor, a variação da fonte e o espaço das letras.

    th { font-variant: small-caps; color: #666666; letter-spacing: 0.2em; }

    CSS para alinhamento das células

  1. 1

    O valor padrão para o alinhamento vertical do texto nas células da tabela é o meio. Para mostrar isso, um pouco mais de texto foi adicionado à tabela de exemplo.

  2. 2

    Você pode escolher entre vertical-align: top ou vertical-align: bottom. Aqui está um exemplo:

    td { vertical-align: top; }

  3. 3

    Para alinhar o texto horizontalmente nas células da tabela, seja na esquerda, direita ou centro, use a propriedade text-align. Como o valor padrão é à esquerda, a regra de exemplo irá alterar o valor para o centro.

    td { vertical-align: top; text-align: center; }

Dicas & Advertências

  • A regra para a tabela pode incluir outras propriedades, como largura, fundo, preenchimento, tamanho de fonte e outras propriedades CSS.
  • Outras propriedades podem ser utilizadas quando se está decorando o elemento th , por exemplo, cor do plano de fundo, e alinhamento de texto.

Não perca

Filtro:
  • Geral
  • Artigos
  • Slides
  • Vídeos
Mostrar:
  • Mais relevantes
  • Mais lidos
  • Mais recentes

Nenhum artigo disponível

Nenhum slide disponível

Nenhum vídeo disponível