Estilizar tabelas HTML significa configurá-las graficamente, para que sejam exibidas com a formatação correta por sites da internet. Para isso, use instruções de CSS, incorporando-as diretamente no documento HTML ou fazendo referências a arquivos CSS externos.

Por que estilizar tabelas HTML?

A linguagem CSS oferece a possibilidade de estilizar tabelas HTML. Ela permite que você modifique a aparência dos elementos tabulares de forma quase ilimitada. Você pode definir cores de fundo específicas para as células ou ajustar a espessura das bordas, por exemplo. Existem três formas de incorporar o código CSS próprio para estilizar uma tabela em um documento HTML:

  • Incorporação na seção <head>: Os estilos CSS desejados são inseridos diretamente na seção <head> de um documento HTML com a tag HTML <style>.
  • Arquivo CSS externo: Outra opção é utilizar um arquivo CSS separado, que pode ser referenciado no documento HTML por meio da tag <link> no cabeçalho <head>.
  • CSS inline: Você também pode formatar tabelas HTML diretamente no elemento da tabela, aplicando o atributo style. No entanto, essa abordagem é recomendada apenas em casos específicos, nos quais a reutilização e a manutenção do código não são prioritárias.
Dica

Nosso artigo sobre CSS em HTML ensina como incluir a linguagem de estilo em documentos HTML.

Opções de estilo de tabelas HTML

Há uma ampla variedade de propriedades CSS que podem ser usadas para melhorar a aparência e a usabilidade de tabelas em documentos web. Propriedades básicas de tabelas podem ser configuradas com as seguintes instruções CSS:

  • width: Define a largura da tabela ou de colunas específicas
  • border: Determina a largura, o estilo e a cor das bordas
  • border-collapse: Determina se as bordas das células serão combinadas (collapse) ou separadas (separate)
  • border-spacing: Define o espaçamento entre células quando border-collapse: separate é utilizado

A seguir, apresentamos algumas das principais opções para estilizar tabelas HTML. Organizamos os comandos por categorias.

Espaçamento entre células e alinhamento de texto

Propriedade CSS Descrição
padding Adiciona espaço dentro das células.
margin Adiciona espaço ao redor de toda a tabela.
text-align Define o alinhamento horizontal do texto dentro das células (left, center, right).
vertical-align Define o alinhamento vertical do conteúdo das células (top, middle, bottom).

Cores e imagem de fundo

Propriedade CSS Descrição
background-color Define a cor de fundo das células, linhas ou de toda a tabela.
color Define a cor do texto.
background-image Define uma imagem de fundo para células ou para toda a tabela.

Fontes e tamanho do texto

Propriedade CSS Descrição
font-family Define a fonte do texto.
font-size Define o tamanho da fonte.
font-weight Define a espessura da fonte (por exemplo, bold para texto em negrito).
text-transform Controla o uso de maiúsculas e minúsculas no texto (uppercase, lowercase, capitalize).

Bordas da tabela

Propriedade CSS Descrição
border-style Define o estilo da borda (solid, dashed, dotted).
border-width Define a espessura da borda.
border-color Define a cor da borda da tabela.

Exemplos de formatação de tabelas HTML

Destacamos, agora, sintaxe e funcionalidade das três opções possíveis para estilizar tabelas HTML, apresentando exemplos práticos. Também abordamos brevemente as vantagens e desvantagens de cada abordagem.

Formatar tabelas HTML na seção <head>

A estilização de tabelas inserindo a linguagem CSS no cabeçalho é especialmente útil para projetos pequenos e alterações rápidas. Não é necessário um arquivo de estilo adicional e você pode usar IDs para definir quais tabelas serão afetadas pelas instruções. No entanto, esses estilos só se aplicam à página em que foram definidos, o que pode dificultar a reutilização e a manutenção do código.

Você pode incluir o código CSS desejado no cabeçalho do documento usando o elemento <style>. No exemplo abaixo, definimos que o cabeçalho da tabela terá um fundo verde, enquanto as linhas subsequentes alternarão entre fundo cinza claro e branco:

<style>
    thead th {
        background-color: #4CAF50; / *Fundo verde para o cabeçalho* /
    }
    tbody tr:nth-child(odd) {
        background-color: #f2f2f2; / *Fundo cinza claro para linhas ímpares* /
    }
    tbody tr:nth-child(even) {
        background-color: #ffffff; / *Fundo branco para linhas pares* /
    }
</style>
</head>
<body>
    <table>
        <thead>
            <tr>
                <th>Coluna 1</th>
                <th>Coluna 2</th>
                <th>Coluna 3</th>
                <th>Coluna 4</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Entrada 1</td>
                <td>Entrada 2</td>
                <td>Entrada 3</td>
                <td>Entrada 4</td>
            </tr>
            <tr>
                <td>Entrada 5</td>
                <td>Entrada 6</td>
                <td>Entrada 7</td>
                <td>Entrada 8</td>
            </tr>
            <tr>
                <td>Entrada 9</td>
                <td>Entrada 10</td>
                <td>Entrada 11</td>
                <td>Entrada 12</td>
            </tr>
            <tr>
                <td>Entrada 13</td>
                <td>Entrada 14</td>
                <td>Entrada 15</td>
                <td>Entrada 16</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
html
Imagem: Exemplo de formatação de tabela HTML
A tabela de exemplo com formatação simples mostra a linha de cabeçalho colorida desejada e as cores das linhas que mudam posteriormente.

Formatar tabela HTML via folha de estilo CSS

A estilização de tabelas HTML via CSS externo oferece a melhor maneira de separar o conteúdo do design. Além disso, as instruções são especialmente fáceis de reutilizar em outras páginas. Como os navegadores podem armazenar em cache o arquivo CSS, isso também ajuda a otimizar o tempo de carregamento. Para projetos web menores, essa opção pode ser um pouco mais trabalhosa.

O exemplo utilizado anteriormente pode ser implementado aqui em duas etapas: primeiro, você cria um arquivo CSS chamado styles.css, colocado no mesmo diretório do arquivo HTML no qual o site está localizado, e insere o seguinte código:

thead th {
      background-color: #4CAF50; / *Verde para o cabeçalho da tabela* /
    }
    tbody tr:nth-child(odd) {
      background-color: #f2f2f2; / *Fundo cinza claro para linhas ímpares* /
    }
    tbody tr:nth-child(even) {
      background-color: #ffffff; / *Fundo branco para linhas pares* /
}
css

No segundo passo, você deve incluir o arquivo no cabeçalho utilizando um elemento <link>. O código subsequente da tabela permanece o mesmo:

<html>
<head>
        <link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
    <table>
        <thead>
            <tr>
…
</html>
html

Formatar tabela HTML com CSS inline

O CSS inline é uma opção prática quando você deseja fazer ajustes específicos em um único elemento da tabela. Para projetos pequenos ou testes pontuais, onde a reutilização do código não é importante, essa opção é bastante útil. No entanto, para cenários de código mais duradouros, é recomendável utilizar uma das duas outras formas de inclusão.

O estilo inline é feito diretamente nos elementos da tabela. Para o nosso exemplo, o código seria assim:

<body>
    <table>
        <thead>
            <tr>
                <th style="background-color: #4CAF50;">Coluna 1</th>
                <th style="background-color: #4CAF50;">Coluna 2</th>
                <th style="background-color: #4CAF50;">Coluna 3</th>
                <th style="background-color: #4CAF50;">Coluna 4</th>
            </tr>
        </thead>
        <tbody>
            <tr style="background-color: #f2f2f2;">
                <td>Entrada 1</td>
                <td>Entrada 2</td>
                <td>Entrada 3</td>
                <td>Entrada 4</td>
            </tr>
            <tr>
                <td>Entrada 5</td>
                <td>Entrada 6</td>
                <td>Entrada 7</td>
                <td>Entrada 8</td>
            </tr>
            <tr style="background-color: #f2f2f2;">
                <td>Entrada 9</td>
                <td>Entrada 10</td>
                <td>Entrada 11</td>
                <td>Entrada 12</td>
            </tr>
            <tr>
                <td>Entrada 13</td>
                <td>Entrada 14</td>
                <td>Entrada 15</td>
                <td>Entrada 16</td>
            </tr>
        </tbody>
    </table>
</body>
html
Este artigo foi útil?
Ir para o menu principal