CSS: guia sobre tabelas

Neste artigo, você aprenderá como estilizar uma tabela HTML usando CSS.

Estilizando tabelas com CSS

As tabelas geralmente são usadas para exibir dados tabulares, como relatórios financeiros.

Mas quando você cria uma tabela HTML sem estilos ou atributos, o navegador os exibe sem bordas. Usando CSS, você pode melhorar muito a aparência das tabelas.

O CSS fornece várias propriedades que permitem controlar o layout e a renderização dos elementos da tabela. Na próxima seção, você aprenderá como usar CSS para criar tabelas elegantes e consistentes.

Adicionando Bordas a Tabelas

A propriedade border do CSS é a melhor maneira de definir as bordas da sua tabela. O exemplo a seguir define bordas pretas nos elementos <table>, <th> e <td>.

table, th, td {
    border: 1px solid black;
}

Por padrão, os navegadores desenham bordas ao redor das tabelas e de todas as células com algum espaço entre elas, resultando em bordas duplas. Para se livrar desse problema de borda dupla, você pode simplesmente recolher bordas de células de tabelas adjacentes e criar bordas de linha única limpas.

Vamos dar uma olhada nas imagens abaixo para entender como aplicar uma borda em uma tabela.

O código HTML usado pra essa tabela é o código abaixo:

<table>
        <tr>
            <th>ID</th>
            <th>Nome</th>
            <th>Sobrenome</th>
            <th>E-mail</th>
        </tr>
        <tr>
            <td>1</td>
            <td>João</td>
            <td>Silva</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>2</td>
            <td>Pedro</td>
            <td>Souza</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>3</td>
            <td>João</td>
            <td>Rayol</td>
            <td>[email protected]</td>
        </tr>
        <tr>
            <td>4</td>
            <td>Henrique</td>
            <td>Barbosa</td>
            <td>[email protected]</td>
        </tr>
    </table>

Vamos aprender a recolher a borda no tópico abaixo.

Recolher bordas da tabela

Existem dois modelos diferentes para definir as bordas das células da tabela em CSS: divididas e recolhidas.

No modelo de borda individual padrão, cada célula da tabela tem sua própria borda distinta, enquanto no modelo de borda recolhida, as células adjacentes da tabela compartilham uma borda comum. Você pode definir modelos de borda para tabelas HTML usando a propriedade CSS border-collapse.

A regra de estilo a seguir reduzirá as bordas das células da tabela e aplicará uma borda preta de pixel único.

table {
    border-collapse: collapse;
}
th, td {
    border: 1px solid black;
}

Observação: você também pode remover o espaço entre as bordas das células da tabela definindo o valor da propriedade CSS border-spacing como 0. No entanto, isso apenas remove o espaço, não recolhe as bordas como quando border-collapse está definido para recolher .

Ajuste o espaço dentro da tabela

Por padrão, os navegadores criam células de tabela grandes o suficiente para conter os dados na célula.

Para adicionar mais espaço entre o conteúdo da célula da tabela e as bordas da célula, você pode simplesmente usar a propriedade CSS padding. Vamos tentar o seguinte exemplo para ver como funciona:

th, td {
    padding: 15px;
}

O resultado seria esse:

Se as bordas da tabela estiverem separadas (o padrão), você também pode ajustar o espaçamento entre as bordas das células usando a propriedade CSS border-spacing.

A regra de estilo a seguir impõe um espaço de 10 pixels entre todas as bordas de uma tabela:

table {
    border-spacing: 10px;
}

O resultado seria esse:

Saiba mais: Aprenda HTML, CSS e Javascript neste treinamento gratuito.

Defina a largura e a altura da tabela

Por padrão, as tabelas serão renderizadas com largura (width) e altura (height) suficientes para conter todo o seu conteúdo.

No entanto, você também pode definir explicitamente a largura e a altura da tabela e suas células usando a propriedade CSS width. A regra de estilo de altura no exemplo abaixo define a largura da tabela para 100% e a altura das células do cabeçalho da tabela para 40px.

table {
    width: 100%;
}
th {
    height: 40px;
}

O resultado é esse:

Controlando o layout da tabela

Uma tabela se expande e se contrai para acomodar os dados que ela contém. Este é o comportamento padrão. À medida que a tabela se enche de dados, ela continua a se expandir enquanto houver espaço. No entanto, às vezes é necessário definir uma largura fixa para a tabela e com isso gerenciar o layout.

Você pode fazer isso com a ajuda das propriedades CSS table-layout. Esta propriedade define o algoritmo usado para layout de célula, linha e coluna da tabela. Esta propriedade assume um dos dois valores:

• auto — Usa um algoritmo de layout de tabela automático. Usando esse algoritmo, a largura da tabela e suas células podem ser ajustadas para caber no conteúdo. Este é o valor padrão.
• fixed — Usa o algoritmo de layout de tabela fixa. Usando esse algoritmo, o layout horizontal da tabela não depende do conteúdo da célula; depende apenas da largura da tabela, da largura das colunas e das bordas ou espaçamento das células. Geralmente é mais rápido que o automático.

A regra de estilo no exemplo abaixo especifica que a tabela HTML é disposta usando o algoritmo de layout fixo e tem uma largura fixa de 300 pixels. Vamos experimentar e ver como funciona:

table {
    width: 300px;
    table-layout: fixed;
}

O resultado é esse das duas formas:

Dica: você pode otimizar o desempenho da renderização da tabela especificando valores fixed para as propriedades table-layout. Um valor fixo para esta propriedade faz com que a tabela seja renderizada uma linha por vez, fornecendo informações ao usuário mais rapidamente.

Observação: sem fixed o valor do atributo table-layout para tabelas grandes, o usuário não verá nenhuma parte da tabela até que o navegador renderize a tabela inteira.

Alinhar o texto nas células da tabela

Você pode alinhar o conteúdo do texto nas células da tabela horizontalmente ou verticalmente.

Alinhamento horizontal do conteúdo da célula

Para alinhamento horizontal do texto nas células da tabela, você pode usar a propriedade text-align como qualquer outro elemento. Você alinha o texto à esquerda, à direita, centralizado ou justificado.

As regras de estilo a seguir alinharão o texto à esquerda dentro dos elementos .

th {
    text-align: left;
}

Observação: o texto dentro dos elementos é alinhado à esquerda por padrão, enquanto o texto dentro dos elementos é alinhado ao centro e renderizado em negrito por padrão.

Alinhamento vertical do conteúdo da célula

Da mesma forma, você pode usar a propriedade CSS vertical-align para alinhar verticalmente o conteúdo dentro dos elementos <th> e para cima, para baixo ou para o centro. O alinhamento vertical padrão é centralizado.

As regras de estilo a seguir alinharão verticalmente o texto dentro de um elemento .

th {
    height: 40px;
    vertical-align: bottom;
}

Controlando a posição da legenda da tabela

Você pode definir a posição vertical da legenda da tabela com a propriedade CSS caption-side.

Os títulos podem ser colocados na parte superior ou inferior da tabela. A posição padrão é superior.

caption {
    caption-side: bottom;
}

Dica: Para alterar o alinhamento horizontal do texto do cabeçalho da tabela (por exemplo, esquerda ou direita), basta usar a propriedade CSS text-align, como faria para texto normal.

Lidando com células vazias

Nas tabelas, que usam um modelo de borda separado por padrão, você também pode usar a propriedade CSS empty-cells para controlar a renderização de células que não contêm conteúdo visível.

Esta propriedade aceita um valor de mostrar (show) ou ocultar (hide). O padrão é show, que renderiza células vazias como células normais, mas não desenha bordas ou planos de fundo ao redor de células vazias se o valor hide for especificado. Vamos tentar um exemplo para ver como realmente funciona:

table {
    border-collapse: separate;
    empty-cells: hide;
}

Nota: Colocar um espaço ininterrupto (  ) dentro de uma célula da tabela a torna não vazia. Portanto, mesmo que a célula pareça vazia, o valor oculto não ocultará a borda e o plano de fundo.

Crie uma tabela listrada de zebra

Definir diferentes cores de fundo para linhas alternadas é uma técnica popular para melhorar a legibilidade de tabelas com grandes quantidades de dados. Isso geralmente é chamado de listras de zebra na tabela.

Você pode simplesmente usar um seletor de pseudoclasse CSS para obter esse efeito: nth-child().

A regra de estilo a seguir destacará todas as linhas ímpares no corpo da tabela.

tbody tr:nth-child(odd) {
    background-color: #f2f2f2;
}

Uma tabela listrada normalmente se parece com a imagem a seguir.

Observação: a pseudoclasse :nth-child() seleciona elementos com base em sua posição em um conjunto de irmãos. Ele pode receber números, palavras-chave pares ou ímpares ou expressões na forma xn+y, onde x e y são números inteiros (por exemplo, 1n, 2n, 2n+1 …) como argumentos.

Crie tabelas responsivas

As tabelas não são inerentemente responsivos. No entanto, para oferecer suporte a dispositivos móveis, você pode aumentar a capacidade de resposta da tabela permitindo a rolagem horizontal em telas pequenas. Para fazer isso, basta agrupar sua tabela com um elemento e aplicar o estilo overflow-x: auto como no código abaixo

<div style="overflow-x: auto;"> 
    <table>
        ... table content ...
    </table></div>

O resultado da nossa tabela em tela pequena e grande:

Tela pequena:

Tela grande:

Leia também: CSS: guia sobre listas