W3docs
pt
Entrar

Tabelas CSS

Estilize tabelas com CSS usando: cor, border-collapse, largura, altura, alinhamento de texto e padding. Veja exemplos práticos.

As tabelas HTML renderizadas pelo navegador por padrão são simples: bordas duplas finas, células apertadas e nenhuma separação visual entre as linhas. O CSS as transforma em exibições de dados legíveis e fáceis de escanear. Este capítulo apresenta as propriedades mais importantes para tabelas — bordas, espaçamento, alinhamento e estilização de linhas — e termina com padrões que você usará repetidamente: divisores, destaque ao passar o mouse, listras zebra e rolagem horizontal em telas pequenas.

Todos os exemplos abaixo são páginas completas e executáveis, então você pode abri-las, ajustar um valor e ver o efeito imediatamente.

Propriedades de Estilização de Tabelas

Aqui estão as propriedades CSS usadas para estilizar uma tabela. As propriedades background-color e color definem as cores de fundo e do texto, respectivamente. A propriedade border-collapse recolhe as bordas da tabela. A propriedade text-align define o alinhamento horizontal do texto. Além disso, você pode usar height, width e padding para ajustes de layout.

Exemplo de estilização de uma tabela:

Exemplo de estilização de tabelas HTML

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        width: 100%;
        border-collapse: collapse;
      }
      table,
      th,
      td {
        border: 1px solid black;
      }
      thead {
        background-color: #1c87c9;
        color: #ffffff;
      }
      th {
        text-align: center;
        height: 50px;
      }
      tbody tr:nth-child(odd) {
        background: #ffffff;
      }
      tbody tr:nth-child(even) {
        background: #f4f4f4;
      }
    </style>
  </head>
  <body>
    <table>
      <thead>
        <tr>
          <th>Heading</th>
          <th>Heading</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
        <tr>
          <td>Some text</td>
          <td>Some text</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Experimente Você Mesmo »

Resultado

Exemplo de tabela

Vamos explicar o código acima.

Como você pode ver, nossa tabela tem duas seções principais: a seção <thead> para os cabeçalhos e a seção <tbody> para as linhas de dados. A tabela usa bordas pretas, aplicadas por meio da propriedade border. Você pode usar qualquer cor e estilo de borda de sua preferência.

Cor da tabela

A linha do cabeçalho (<thead>) é azul com texto branco. O preenchimento azul vem da propriedade background-color, e o texto branco vem da propriedade color — ambas aplicadas ao seletor thead para que todas as células de cabeçalho internas as herdem. As células do corpo voltam ao texto preto padrão da página em fundo branco (ou listrado).

Recolher Bordas

Por padrão, uma tabela desenha duas bordas entre células adjacentes — uma para cada célula — o que produz um espaço visível e uma linha dupla. A propriedade border-collapse controla isso:

  • border-collapse: separate (o padrão) mantém as bordas de cada célula separadas.
  • border-collapse: collapse mescla as bordas adjacentes em uma única linha, dando o visual limpo e semelhante a uma grade usado em todos os exemplos desta página.

Você quase sempre vai querer collapse para tabelas de dados.

Largura e Altura da Tabela

Use width no seletor table para controlar quanto espaço horizontal a tabela ocupa — width: 100% faz com que ela preencha seu contêiner, que é a escolha mais comum. Use height em th (ou td) para dar às linhas mais espaço. Ambas aceitam pixels (50px) para um tamanho fixo ou porcentagens (100%) para um tamanho relativo ao elemento pai. Note que uma height em porcentagem só funciona se o pai tiver uma altura definida, portanto valores fixos são mais confiáveis para linhas.

Alinhamento de Texto na Tabela

A propriedade text-align define o alinhamento horizontal do conteúdo das células. Os navegadores alinham o texto de <th> ao center e o texto de <td> à left por padrão, então você só define text-align quando quiser substituir isso — por exemplo, text-align: center em th para manter os cabeçalhos centralizados, ou text-align: right para alinhar colunas numéricas pelos dígitos. A próxima seção mostra um exemplo completo.

Padding na Tabela

Para controlar o espaço entre a borda e o conteúdo em uma tabela, use a propriedade padding nos elementos <td> e <th>:

Padding em tabelas HTML

td, th {
  padding: 15px;
}

Alinhamento horizontal com a propriedade text-align

Com a ajuda da propriedade CSS text-align, você pode definir o alinhamento horizontal do conteúdo em <th> ou <td>.

Por padrão, o conteúdo dos elementos <td> é alinhado à esquerda e o conteúdo dos elementos <th> é alinhado ao centro. No exemplo abaixo, o conteúdo dos elementos <th> e <td> é alinhado à direita:

Exemplo de alinhamento do conteúdo dos elementos <th> e <td> à direita:

Exemplo de alinhamento do conteúdo dos elementos <th> e <td> à direita

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
       text-align: right;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Whatson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Experimente Você Mesmo »

Alinhamento vertical com a propriedade vertical-align

Usando a propriedade CSS vertical-align, você pode definir o alinhamento vertical do conteúdo em <th> ou <td>.

Por padrão, o conteúdo em ambos os elementos <th> e <td> é alinhado verticalmente ao meio.

No exemplo abaixo, o conteúdo dos elementos <td> é alinhado verticalmente à base:

Exemplo de alinhamento vertical do conteúdo dos elementos <td> à base:

<!DOCTYPE html>
<html>
  <head>
    <style>
      table,
      td,
      th {
        border: 1px solid black;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      td {
        height: 50px;
        vertical-align: bottom;
        text-align: right;
        padding-right: 10px;
      }
    </style>
  </head>
  <body>
    <h2>Vertical alignment example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$300</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Experimente Você Mesmo »

Divisores horizontais

Ao adicionar a propriedade CSS border-bottom aos elementos <td> e <th>, você criará divisores horizontais.

Exemplo de criação de divisores horizontais:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        padding: 10px;
        text-align: left;
        border-bottom: 1px solid #cccccc;
      }
    </style>
  </head>
  <body>
    <h2>Horizontal dividers example</h2>
    <table>
      <thead>
        <tr>
          <th>Firstname</th>
          <th>Lastname</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Experimente Você Mesmo »

Tabelas com efeito hover

Usando o seletor CSS :hover no elemento <tr>, você tornará a tabela com efeito hover.

Exemplo de criação de uma tabela com efeito hover:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      tr {
        background-color: #f5f5f5;
      }
      th,
      td {
        padding: 15px;
        text-align: left;
        border-bottom: 1px solid #ccc;
      }
      tr:hover {
        background-color: #cdcdcd;
      }
    </style>
  </head>
  <body>
    <h2>Hoverable table example</h2>
    <table>
      <thead>
        <tr>
          <th>First Name</th>
          <th>Last Name</th>
          <th>Money</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$200</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Experimente Você Mesmo »

Tabela com listras zebra

Usando o seletor nth-child() e adicionando a propriedade CSS background-color nas linhas ímpares (ou pares) da tabela, você pode criar uma tabela com listras zebra.

Exemplo de criação de uma tabela com listras zebra:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 10px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Striped table example</h2>
    <table>
      <thead>
        <tr>
          <th>First name</th>
          <th>Last name</th>
          <th>Points</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Sherlock</td>
          <td>Holmes</td>
          <td>$250</td>
        </tr>
        <tr>
          <td>John</td>
          <td>Watson</td>
          <td>$350</td>
        </tr>
        <tr>
          <td>Mary</td>
          <td>Watson</td>
          <td>$500</td>
        </tr>
      </tbody>
    </table>
  </body>
</html>
Experimente Você Mesmo »

Tabelas responsivas

Uma tabela larga pode ultrapassar telas estreitas e quebrar o layout da página. Para tornar uma tabela responsiva, envolva-a em um elemento contêiner (aqui um <div>) e aplique overflow-x: auto a esse contêiner. Quando a tabela for mais larga que o viewport, o contêiner exibe uma barra de rolagem horizontal em vez de esticar a página — as linhas permanecem intactas e o usuário simplesmente rola para o lado.

Exemplo de criação de uma tabela responsiva:

<!DOCTYPE html>
<html>
  <head>
    <title>Title of the document</title>
    <style>
      div {
        overflow-x: auto;
      }
      table {
        border-collapse: collapse;
        width: 100%;
      }
      th,
      td {
        text-align: left;
        padding: 8px 5px;
      }
      tr:nth-child(even) {
        background-color: #6eeccf;
      }
      tr:nth-child(odd) {
        background-color: #2d7f88;
      }
    </style>
  </head>
  <body>
    <h2>Responsive table example</h2>
    <div>
      <table>
        <thead>
          <tr>
            <th>First Name</th>
            <th>Last Name</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
            <th>Money</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>Sherlock</td>
            <td>Holmes</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
            <td>$150</td>
          </tr>
          <tr>
            <td>John</td>
            <td>Watson</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
            <td>$350</td>
          </tr>
          <tr>
            <td>Mary</td>
            <td>Watson</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
            <td>$500</td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>
</html>
Experimente Você Mesmo »

Tópicos Relacionados

Prática

Prática
Quais propriedades CSS podem ser aplicadas em tabelas?
Quais propriedades CSS podem ser aplicadas em tabelas?
Was this page helpful?