Estilizar tabelas HTML significa configurá-las gra­fi­ca­mente, para que sejam exibidas com a for­ma­ta­ção correta por sites da internet. Para isso, use ins­tru­ções de CSS, in­cor­po­rando-as di­re­ta­mente no documento HTML ou fazendo re­fe­rên­cias a arquivos CSS externos.

Por que estilizar tabelas HTML?

A linguagem CSS oferece a pos­si­bi­li­dade 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 es­pe­cí­fi­cas para as células ou ajustar a espessura das bordas, por exemplo. Existem três formas de in­cor­po­rar o código CSS próprio para estilizar uma tabela em um documento HTML:

  • In­cor­po­ra­ção na seção <head>: Os estilos CSS desejados são inseridos di­re­ta­mente 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 re­fe­ren­ci­ado no documento HTML por meio da tag <link> no cabeçalho <head>.
  • CSS inline: Você também pode formatar tabelas HTML di­re­ta­mente no elemento da tabela, aplicando o atributo style. No entanto, essa abordagem é re­co­men­dada apenas em casos es­pe­cí­fi­cos, nos quais a reu­ti­li­za­ção e a ma­nu­ten­ção do código não são pri­o­ri­tá­rias.
Dica

Nosso artigo sobre CSS em HTML ensina como incluir a linguagem de estilo em do­cu­men­tos HTML.

Opções de estilo de tabelas HTML

Há uma ampla variedade de pro­pri­e­da­des CSS que podem ser usadas para melhorar a aparência e a usa­bi­li­dade de tabelas em do­cu­men­tos web. Pro­pri­e­da­des básicas de tabelas podem ser con­fi­gu­ra­das com as seguintes ins­tru­ções CSS:

  • width: Define a largura da tabela ou de colunas es­pe­cí­fi­cas
  • border: Determina a largura, o estilo e a cor das bordas
  • border-collapse: Determina se as bordas das células serão com­bi­na­das (collapse) ou separadas (separate)
  • border-spacing: Define o es­pa­ça­mento entre células quando border-collapse: separate é utilizado

A seguir, apre­sen­ta­mos algumas das prin­ci­pais opções para estilizar tabelas HTML. Or­ga­ni­za­mos os comandos por ca­te­go­rias.

Es­pa­ça­mento entre células e ali­nha­mento de texto

Pro­pri­e­dade 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 ali­nha­mento ho­ri­zon­tal do texto dentro das células (left, center, right).
vertical-align Define o ali­nha­mento vertical do conteúdo das células (top, middle, bottom).

Cores e imagem de fundo

Pro­pri­e­dade 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

Pro­pri­e­dade 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ús­cu­las e mi­nús­cu­las no texto (uppercase, lowercase, capitalize).

Bordas da tabela

Pro­pri­e­dade 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 for­ma­ta­ção de tabelas HTML

Des­ta­ca­mos, agora, sintaxe e fun­ci­o­na­li­dade das três opções possíveis para estilizar tabelas HTML, apre­sen­tando exemplos práticos. Também abordamos bre­ve­mente as vantagens e des­van­ta­gens de cada abordagem.

Formatar tabelas HTML na seção <head>

A es­ti­li­za­ção de tabelas inserindo a linguagem CSS no cabeçalho é es­pe­ci­al­mente útil para projetos pequenos e al­te­ra­ções rápidas. Não é ne­ces­sá­rio um arquivo de estilo adicional e você pode usar IDs para definir quais tabelas serão afetadas pelas ins­tru­ções. No entanto, esses estilos só se aplicam à página em que foram definidos, o que pode di­fi­cul­tar a reu­ti­li­za­ção e a ma­nu­ten­çã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 sub­se­quen­tes al­ter­na­rã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 for­ma­ta­ção simples mostra a linha de cabeçalho colorida desejada e as cores das linhas que mudam pos­te­ri­or­mente.

Formatar tabela HTML via folha de estilo CSS

A es­ti­li­za­ção de tabelas HTML via CSS externo oferece a melhor maneira de separar o conteúdo do design. Além disso, as ins­tru­ções são es­pe­ci­al­mente fáceis de reu­ti­li­zar em outras páginas. Como os na­ve­ga­do­res podem armazenar em cache o arquivo CSS, isso também ajuda a otimizar o tempo de car­re­ga­mento. Para projetos web menores, essa opção pode ser um pouco mais tra­ba­lhosa.

O exemplo utilizado an­te­ri­or­mente pode ser im­ple­men­tado 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á lo­ca­li­zado, 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 uti­li­zando um elemento <link>. O código sub­se­quente 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 es­pe­cí­fi­cos em um único elemento da tabela. Para projetos pequenos ou testes pontuais, onde a reu­ti­li­za­ção do código não é im­por­tante, essa opção é bastante útil. No entanto, para cenários de código mais du­ra­dou­ros, é re­co­men­dá­vel utilizar uma das duas outras formas de inclusão.

O estilo inline é feito di­re­ta­mente 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
Ir para o menu principal