Introdução

Tabelas são uma das maneiras mais eficientes de organizar e exibir dados na web. Elas são amplamente utilizadas para mostrar informações de forma clara, como listas de produtos, dados financeiros ou horários de eventos. Contudo, é essencial saber onde usar e onde não usar tabelas para manter seu site moderno e acessível.

Quando Usar e Quando Evitar Tabelas em HTML

Tabelas são perfeitas para organizar dados tabulares — ou seja, dados que fazem sentido em linhas e colunas, como em uma planilha. No entanto, é importante evitar o uso de tabelas para criar o layout de páginas web. Para layouts, é melhor utilizar CSS com Flexbox ou Grid, que são muito mais flexíveis e adaptáveis.

Conheça nosso artigo: Aprenda como criar um layout de site responsivo usando HTML e CSS com Flexbox.

Em breve faremos um artigo sobre layouts com Grid.

Principais Tags de uma Tabela HTML

Vamos conhecer as principais tags utilizadas para criar uma tabela em HTML:

<table>
    <thead>
        <tr>
            <th>Nome</th>
            <th>Idade</th>
            <th>Profissão</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Maria</td>
            <td>29</td>
            <td>Desenvolvedora</td>
        </tr>
        <tr>
            <td>João</td>
            <td>35</td>
            <td>Designer</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td colspan="3">Total de Registros: 2</td>
        </tr>
    </tfoot>
</table>

Explicação das Tags:

  • <table>: Define a tabela.
  • <thead>: Agrupa o cabeçalho da tabela.
  • <tbody>: Agrupa o conteúdo principal da tabela.
  • <tfoot>: Agrupa o rodapé da tabela.
  • <tr>: Cria uma linha na tabela.
  • <th>: Define uma célula de cabeçalho (negrito e centralizado por padrão).
  • <td>: Define uma célula de dados.

Dicas de Boas Práticas para Tabelas em HTML

  1. Use tabelas apenas para dados tabulares: Não use tabelas para layout de páginas.
  2. Acessibilidade: Use descrições claras em cabeçalhos.
  3. Evite duplicar código: Crie um arquivo CSS separado para reutilizar estilos de tabelas em outras partes do site.
  4. Mantenha o layout simples e limpo: Use cores suaves e padronizadas para manter o layout coerente com a identidade visual do seu site e para facilitar a leitura.

Como Criar e Estilizar Tabelas

Passo 1: Criando o Arquivo HTML Básico

Antes de começarmos, precisamos criar um arquivo HTML básico. Se você ainda não sabe como fazer isso, siga nosso tutorial:

  1. Crie uma pasta no seu computador chamada projeto-tabela.
  2. Dentro dessa pasta, crie um arquivo chamado index.html.
  3. Abra o arquivo index.html em seu editor de texto e adicione o seguinte código básico:
<!DOCTYPE html>
<html lang="pt-BR">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Tabelas em HTML e CSS</title>
    <link rel="stylesheet" href="table.css"> <!-- Importando o CSS externo -->
</head>
<body>
    <h1>Exemplo de Tabela HTML</h1>
    <table>
        <thead>
            <tr>
                <th>Nome</th>
                <th>Idade</th>
                <th>Profissão</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Maria</td>
                <td>29</td>
                <td>Desenvolvedora</td>
            </tr>
            <tr>
                <td>João</td>
                <td>35</td>
                <td>Designer</td>
            </tr>
        </tbody>
        <tfoot>
            <tr>
                <td colspan="3">Total de Registros: 2</td>
            </tr>
        </tfoot>
    </table>
</body>
</html>

Salve o arquivo e abra-o em seu navegador para visualizar a tabela. Inicialmente, ela estará sem estilização.

Passo 2: Criando o Arquivo CSS para Estilizar a Tabela

  1. Na mesma pasta onde você criou o index.html, crie um novo arquivo chamado table.css.
  2. Abra o table.css no editor de texto e adicione o seguinte código para estilizar a tabela:
table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1em;
    font-family: Arial, sans-serif;
}

thead tr {
    background-color: #007eff; /* Título da tabela em azul */
    color: #ffffff;
    text-align: left;
}

th, td {
    padding: 12px 15px;
    border: 1px solid #dddddd;
}

tbody tr:nth-child(even) {
    background-color: #f3f3f3;
}

Salve o arquivo table.css e recarregue a página no navegador para ver como a tabela já está com uma aparência mais moderna.

Entendendo o formato aplicado

CSS da Tabela

table {
    width: 100%;
    border-collapse: collapse;
    margin: 20px 0;
    font-size: 1em;
    font-family: Arial, sans-serif;
}

Explicação:

  • width: 100%;: Define que a largura da tabela ocupará 100% do espaço disponível dentro do elemento pai, o que garante que ela seja totalmente responsiva.
  • border-collapse: collapse;: Colapsa as bordas da tabela para que as linhas adjacentes compartilhem uma única borda, resultando em uma tabela mais limpa e visualmente organizada.
  • margin: 20px 0;: Adiciona um espaçamento de 20px acima e abaixo da tabela, proporcionando um respiro visual.
  • font-size: 1em;: Define o tamanho da fonte, onde 1em refere-se ao tamanho padrão da fonte herdada do elemento pai.
  • font-family: Arial, sans-serif;: Define que a fonte usada será Arial ou, se não estiver disponível, qualquer outra fonte sans-serif, que é uma família de fontes sem serifa (cantos sem “pé”).

 

Estilo do Título da Tabela

thead tr {
    background-color: #007eff; /* Título da tabela em azul */
    color: #ffffff;
    text-align: left;
}

Explicação:

  • thead tr: Estiliza as linhas dentro da tag <thead>, que geralmente contém o cabeçalho da tabela.
  • background-color: #007eff;: Define o fundo do cabeçalho com uma cor azul (#007eff), destacando o título da tabela.
  • color: #ffffff;: Muda a cor do texto no cabeçalho para branco, criando um bom contraste com o fundo azul.
  • text-align: left;: Alinha o texto das células do cabeçalho à esquerda, que é o alinhamento padrão, mas pode ser alterado conforme a necessidade.

 

Estilo das Células (th, td)

th, td {
    padding: 12px 15px;
    border: 1px solid #dddddd;
}

Explicação:

  • th, td: Estiliza tanto os elementos <th> (células do cabeçalho) quanto os elementos <td> (células do corpo da tabela).
  • padding: 12px 15px;: Adiciona 12px de espaçamento vertical e 15px horizontal dentro de cada célula, para tornar o conteúdo mais espaçado e agradável visualmente.
  • border: 1px solid #dddddd;: Adiciona uma borda de 1px sólida e cinza claro (#dddddd) em torno de cada célula, definindo visualmente os limites entre as células.

 

Linhas Alternadas no Corpo da Tabela

tbody tr:nth-child(even) {
    background-color: #f3f3f3;
}

Explicação:

  • tbody tr:nth-child(even): Aplica um estilo às linhas pares dentro do corpo da tabela (<tbody>).
  • background-color: #f3f3f3;: Define uma cor de fundo cinza claro (#f3f3f3) para as linhas pares da tabela, criando um efeito de "listras" que melhora a legibilidade ao diferenciar as linhas visualmente, principalmente em tabelas com várias colunas.

Passo 3: Tornando a Tabela Responsiva

Para que sua tabela fique bem adaptada em dispositivos móveis, vamos adicionar media queries ao table.css.

@media screen and (max-width: 600px) {
    table, thead, tbody, th, td, tr {
        display: block;
    }

    th {
        background-color: #007eff;
        color: #ffffff;
        text-align: center;
    }

    td {
        text-align: right;
        border: none;
        position: relative;
        padding-left: 50%;
    }

    td:before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        width: 45%;
        padding-left: 10px;
        font-weight: bold;
        text-align: left;
    }
}

Salve o arquivo CSS novamente e atualize a página para ver como a tabela se ajusta quando você redimensiona a janela do navegador.

Como deixamos o layout responsivo?

Usamos uma media query para identificar telas com 600 pixels ou menos.

@media screen and (max-width: 600px) {
    /* formatação da tabela para dispositivos móveis */
}

Explicação:

  • @media screen and (max-width: 600px): Este código define uma media query. A media query é usada para aplicar estilos CSS apenas quando a largura da tela for igual ou menor que 600px, o que normalmente representa telas de dispositivos móveis.

Essa técnica garante que sua tabela se adapte corretamente em smartphones e telas pequenas.

 

Alterando a Tabela e suas Partes para "Blocos"

table, thead, tbody, th, td, tr {
    display: block;
}

Explicação:

  • display: block;: Esse código transforma todos os elementos da tabela em blocos, o que faz com que eles sejam exibidos um abaixo do outro. Essa mudança é importante em dispositivos móveis, pois permite que a tabela seja visualizada em formato de lista, em vez de forçar o usuário a rolar horizontalmente para visualizar o conteúdo.

 

Estilizando o Cabeçalho (th)

th {
    background-color: #007eff;
    color: #ffffff;
    text-align: center;
}

Explicação:

  • background-color: #007eff;: Mantém o fundo azul (#007eff) no cabeçalho para consistência visual.
  • color: #ffffff;: Garante que o texto continue branco no cabeçalho, destacando-o sobre o fundo azul.
  • text-align: center;: Centraliza o texto no cabeçalho para melhorar a apresentação em dispositivos móveis.

 

Estilizando as Células (td)

td {
    text-align: right;
    border: none;
    position: relative;
    padding-left: 50%;
}

Explicação:

  • text-align: right;: Alinha o texto dentro das células à direita. Isso garante que os valores da tabela sejam alinhados à direita, o que é útil para números.
  • border: none;: Remove as bordas das células em dispositivos móveis, simplificando o design para telas menores.
  • position: relative;: Define a posição relativa para as células, permitindo o uso de elementos posicionados dentro das células (como o próximo seletor td:before).
  • padding-left: 50%;: Adiciona um preenchimento à esquerda para criar espaço para o conteúdo dinâmico gerado pelo seletor td:before, como rótulos descritivos.

 

Adicionando Rótulos Dinâmicos com td:before

td:before {
    content: attr(data-label);
    position: absolute;
    left: 0;
    width: 45%;
    padding-left: 10px;
    font-weight: bold;
    text-align: left;
}

Explicação:

  • content: attr(data-label);: Esse seletor cria um conteúdo dinâmico antes de cada célula (td). Ele extrai o valor do atributo data-label do HTML e o exibe como uma etiqueta antes do conteúdo da célula. Isso ajuda a exibir os rótulos das colunas em uma tabela que foi convertida em formato de lista.

Exemplo:

<td data-label="Nome">John Doe</td>
  • position: absolute;: Posiciona o conteúdo extraído (rótulo) de forma absoluta dentro da célula.
  • left: 0;: Posiciona o conteúdo extraído à esquerda da célula.
  • width: 45%;: Define que o rótulo ocupará 45% da largura da célula, deixando o restante para o valor real da célula.
  • padding-left: 10px;: Adiciona um pequeno preenchimento à esquerda para evitar que o rótulo fique muito próximo da borda.
  • font-weight: bold;: Deixa o texto do rótulo em negrito, destacando-o.
  • text-align: left;: Garante que o rótulo fique alinhado à esquerda.

Usando Colspan e Rowspan para Mesclar Células em Tabelas HTML

Quando trabalhamos com tabelas em HTML, às vezes precisamos combinar ou mesclar células para que nossos dados sejam apresentados de uma forma mais organizada e clara. É aí que entram os atributos colspan e rowspan, que são super fáceis de usar e ajudam a melhorar a apresentação das informações.

O que é colspan?

O atributo colspan é usado para fazer com que uma célula de uma tabela se estenda por várias colunas. Ele é muito útil quando você quer que uma célula ocupe o espaço de duas ou mais colunas. Por exemplo, se você tiver uma tabela com três colunas e quiser que um cabeçalho ocupe duas delas, você usaria o colspan="2".

Exemplo de uso do colspan:

<table>
    <tr>
        <th colspan="2" style="background-color: #007eff; color: white;">Título Combinado</th>
        <th>Coluna 3</th>
    </tr>
    <tr>
        <td>Dado 1</td>
        <td>Dado 2</td>
        <td>Dado 3</td>
    </tr>
</table>

Neste exemplo, a célula com o texto "Título Combinado" ocupa o espaço de duas colunas, deixando claro que ela se refere a ambas.

O que é rowspan?

O atributo rowspan funciona de maneira semelhante ao colspan, mas é usado para combinar células em linhas. Ele permite que uma célula se estenda por várias linhas na tabela. É muito útil para mostrar informações que precisam ser agrupadas verticalmente.

Exemplo de uso do rowspan:

<table>
    <tr>
        <th style="background-color: #007eff; color: white;">Título</th>
        <th>Coluna 1</th>
        <th>Coluna 2</th>
    </tr>
    <tr>
        <td rowspan="2">Célula Combinada</td>
        <td>Dado 1</td>
        <td>Dado 2</td>
    </tr>
    <tr>
        <td>Dado 3</td>
        <td>Dado 4</td>
    </tr>
</table>

Aqui, a célula "Célula Combinada" ocupa duas linhas, agrupando os dados das linhas de baixo de forma visualmente clara.

Por que usar colspan e rowspan?

Os atributos colspan e rowspan ajudam a organizar os dados da tabela de forma mais intuitiva e clara. Eles são especialmente úteis quando você precisa criar tabelas mais complexas, que envolvem agrupamentos de dados ou categorias.

Dicas de Boas Práticas para Criação de Tabelas

  1. Use tabelas apenas para dados tabulares: Evite utilizar tabelas para criar layouts de páginas.
  2. Acessibilidade: Utilize descrições claras e atributos scope para que leitores de tela interpretem corretamente.
  3. Código limpo: Mantenha o CSS separado do HTML para facilitar a manutenção e reutilização dos estilos.
  4. Nomes descritivos: Nomeie suas classes CSS de maneira clara e lógica.
  5. Otimização para dispositivos móveis: Utilize media queries para garantir que sua tabela fique bem adaptada em todos os dispositivos.

Como não temos um artigo detalhado sobre media query, decidi incluir esse pequeno resumo introdutório, para que você possa compreender seu funcionamento e possa utilizar o conhecimento aduirido aqui sobre tabelas em seus projetos.

O que são Media Queries?

Media queries são uma forma de adaptar o design de um site para diferentes tamanhos de tela, como em celulares, tablets e computadores. Elas permitem que você aplique estilos diferentes dependendo das dimensões do dispositivo que o usuário está usando. Por exemplo, você pode fazer com que a sua tabela tenha uma aparência diferente em uma tela pequena de celular comparada à visualização em um monitor de computador.

Exemplo Simples de Media Query

Aqui está um exemplo básico de como uma media query funciona em CSS:

@media screen and (max-width: 600px) {
    /* Estilos aplicados quando a largura da tela é menor ou igual a 600px */
    body {
        background-color: lightblue;
    }
}

Como Funciona: Quando a largura da tela é menor ou igual a 600 pixels, a cor de fundo do site mudará para azul claro. Se a tela for maior que isso, o estilo original permanecerá.

As media queries ajudam a tornar os sites responsivos, ou seja, adaptáveis a qualquer dispositivo que o visitante estiver usando. Vamos abordar mais sobre esse assunto em um post dedicado no futuro, para que você possa se aprofundar nesse conceito tão importante para o design moderno!

Conclusão

Com este guia, você aprendeu a criar e estilizar tabelas usando HTML e CSS de maneira moderna e responsiva. As tabelas são uma excelente maneira de apresentar dados, e com essas dicas você conseguirá criar tabelas que se destacam tanto em computadores quanto em dispositivos móveis. Lembre-se de continuar praticando e explorando diferentes estilos para aprimorar suas habilidades!

Dúvidas?

Pergunta: O que é uma tabela em HTML e quando devo usá-la?

Resposta: Uma tabela em HTML é uma estrutura que organiza dados em linhas e colunas. Use tabelas apenas para exibir informações tabulares, como listas de preços, horários ou resultados de uma pesquisa, e não para criar layouts de página.

 

Pergunta: Qual é a diferença entre as tags <thead>, <tbody> e <tfoot>?

Resposta: A tag <thead> define o cabeçalho da tabela, onde ficam os títulos das colunas. A tag <tbody> é onde o conteúdo principal da tabela é armazenado, e <tfoot> é usada para o rodapé, onde geralmente colocamos totais ou outras informações finais.

 

Pergunta: Como posso estilizar uma tabela para que ela fique com um visual mais moderno?

Resposta: Você pode usar CSS para alterar as cores, os tamanhos das fontes, as margens, os espaçamentos e muito mais. No exemplo que usamos, aplicamos estilos ao cabeçalho, às linhas alternadas e adicionamos espaçamento entre os dados da tabela para deixá-la com um aspecto mais moderno.

 

Pergunta: O que são media queries e por que são importantes para tornar a tabela responsiva?

Resposta: Media queries são regras CSS que permitem que os estilos mudem de acordo com o tamanho da tela do dispositivo. Elas são importantes para garantir que a tabela seja exibida corretamente em telas menores, como em celulares e tablets.

 

Pergunta: Como posso tornar uma tabela responsiva usando CSS?

Resposta: Para tornar uma tabela responsiva, você pode usar media queries para ajustar a exibição em diferentes tamanhos de tela. Uma técnica comum é transformar as linhas em blocos de informação para se ajustarem em dispositivos menores.

 

Pergunta: Por que é importante separar o CSS do HTML ao estilizar uma tabela?

Resposta: Separar o CSS do HTML melhora a organização do código, facilita a manutenção e permite reutilizar o estilo em outras páginas do site. Isso aumenta a produtividade e evita a duplicação de código.

 

Pergunta: O que significa otimizar o tamanho das imagens usadas dentro de tabelas?

Resposta: Otimizar o tamanho das imagens significa reduzir o peso dos arquivos de imagem para que carreguem mais rapidamente, sem perder muita qualidade. Isso é importante para melhorar o desempenho do site.

 

Pergunta: Como posso fazer uma tabela ser acessível para pessoas com deficiência visual?

Resposta: Para tornar uma tabela acessível, use atributos como scope para definir o relacionamento entre os cabeçalhos e as células, e inclua descrições claras no conteúdo para que leitores de tela possam interpretar as informações corretamente.

 

Pergunta: Como utilizar SVG em tabelas para ícones ou gráficos?

Resposta: SVG é um formato de imagem vetorial que é ideal para ícones e gráficos, pois é escalável e mantém a qualidade em qualquer tamanho. Ele é uma ótima escolha para gráficos simples em tabelas.

 

Pergunta: Posso usar JavaScript para manipular tabelas HTML?

Resposta: Sim, você pode usar JavaScript para adicionar, remover ou modificar dados em uma tabela HTML de maneira dinâmica, tornando a tabela interativa e mais funcional para o usuário.

 

E é isso, pessoal! Criar e estilizar tabelas é uma habilidade essencial para qualquer desenvolvedor web. Lembre-se: praticar é a melhor maneira de aprender! Então, continue testando, ajustando e explorando novas formas de usar tabelas em seus projetos. Afinal, ler é ótimo, mas programar é ainda melhor!