Tabelas HTML: Guia Simples e Poderoso para Organizar Dados

O que é uma tabela HTML?

Tabelas HTML são formadas por linhas e colunas, e cada célula é onde os dados ficam.

<table>
  <tr>
    <th>Nome</th>
    <th>Idade</th>
  </tr>
  <tr>
    <td>Maria</td>
    <td>30</td>
  </tr>
</table>

Células da tabela: <td>

Cada célula de uma tabela é definida com a tag <td>. Tudo que você colocar entre <td> e </td> será o conteúdo daquela célula. E sim, pode colocar quase qualquer coisa lá dentro: texto, imagem, link, lista e até outra tabela!

Linhas da tabela: <tr>

As linhas começam com <tr> e terminam com </tr>. Dentro delas, colocamos as células. Você pode ter quantas linhas quiser. O ideal é manter o mesmo número de células por linha — embora existam exceções que veremos mais à frente.

Cabeçalhos: <th>

Se quiser destacar algumas células como cabeçalho, use <th> no lugar de <td>. Por padrão, os <th> ficam em negrito e centralizados.

<tr>
  <th>Produto</th>
  <th>Preço</th>
</tr>
<!-- Dá para mudar esse estilo depois com CSS. -->

Adicionando bordas à tabela

Para colocar bordas em uma tabela, usamos CSS com a propriedade border. Exemplo:

<table style="border: 1px solid black;">
  <tr>
    <td>Texto</td>
  </tr>
</table>

Se quiser evitar bordas duplas, adicione border-collapse: collapse.

Estilos de borda

Você pode personalizar bastante com border-style. Alguns exemplos de valores:

• solid
• dotted
• dashed
• double
• none

Quer cantos arredondados? Use border-radius. Quer bordas invisíveis? Use a mesma cor da página como cor da borda.

Tamanhos de tabela

Dá pra controlar largura e altura da tabela, linhas e colunas com style, usando width e height.

Exemplo:

<table style="width: 100%;">
  <tr style="height: 200px;">
    <td style="width: 70%;">Largura personalizada</td>
  </tr>
</table>

Legenda com <caption>

Quer dar um título à sua tabela? Use <caption>, logo depois do <table>:

<table>
  <caption>Vendas por Mês</caption>
</table>

Colspan e Rowspan

Às vezes, uma célula precisa ocupar mais de uma coluna ou linha.

• colspan: expande horizontalmente
• rowspan: expande verticalmente

<td colspan="2">Texto em duas colunas</td>
<td rowspan="3">Texto em três linhas</td>

Estilizando com CSS: Zebra, Hover, e mais

Você pode deixar sua tabela bem mais elegante com CSS. Alguns efeitos legais:

Listras horizontais (efeito zebra)

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

Listras verticais

td:nth-child(even) {
  background-color: #f9f9f9;
}

Hover (destaque ao passar o mouse)

tr:hover {
  background-color: #e0e0e0;
}

Divisores horizontais

Para ter linhas separando as informações, adicione uma border-bottom nas <tr>:

tr {
  border-bottom: 1px solid #ccc;
}

Estilizando colunas com <colgroup>

Se quiser aplicar estilos só em certas colunas, use o <colgroup>:

<table>
  <colgroup>
    <col style="background-color: #f0f0f0;">
    <col style="background-color: #fff;">
  </colgroup>
</table>

Dica: só algumas propriedades CSS funcionam com <colgroup>, como width, background, border e visibility.

Conclusão

Tabelas HTML são poderosas e versáteis. Com elas, você organiza seus dados de forma limpa e clara, e ainda consegue estilizar do seu jeito usando CSS. Use essas técnicas para criar tabelas que não só funcionem bem, mas que também fiquem bonitas e profissionais.