Tabelas

Uma tabela de horários de ônibus é uma tabela: cada célula só faz sentido junto com o título da linha e o da coluna.

Tabelas são para dados

Use uma tabela quando a informação tem linhas e colunas: uma grade de horários, uma lista de preços, os resultados de uma pesquisa. No fim dos anos 1990, muitos sites usavam tabelas para montar o layout da página inteira, com o menu numa célula e o conteúdo em outra. Isso causa problemas reais. Os leitores de tela anunciam cada célula com sua linha e sua coluna, então uma tabela de layout soa como uma planilha confusa, e layouts em tabela não se adaptam bem a telas pequenas. Hoje o layout é feito com CSS, e as tabelas ficam para os dados.

Linhas, células e cabeçalhos

Uma tabela é montada linha por linha. <table> envolve tudo, cada <tr> (table row, linha da tabela) é uma linha e, dentro de uma linha, cada <td> (table data, dado da tabela) é uma célula. As células que rotulam uma linha ou uma coluna usam <th> (table header, cabeçalho da tabela), que os navegadores mostram em negrito e centralizado por padrão. O número de células de cada linha deve bater, para que as colunas fiquem alinhadas.

<table>
  <caption>Bread prices, October 2026</caption>
  <thead>
    <tr><th scope="col">Loaf</th><th scope="col">Weight</th><th scope="col">Price</th></tr>
  </thead>
  <tbody>
    <tr><th scope="row">Sourdough</th><td>800 g</td><td>6.50</td></tr>
    <tr><th scope="row">Rye</th><td>600 g</td><td>5.00</td></tr>
  </tbody>
</table>

Faça a tabela se explicar sozinha

Três acréscimos transformam uma grade de células numa tabela que todos conseguem ler. Primeiro, <caption>, colocado logo depois da tag de abertura <table>, dá um título à tabela; os leitores de tela o anunciam antes do conteúdo, então quem ouve sabe do que a tabela trata. Segundo, o atributo scope em cada <th> diz se ele rotula uma coluna (scope="col") ou uma linha (scope="row"). Com ele, um leitor de tela pode ler Rye, Price, 5.00 em vez de um 5.00 solto. Terceiro, <thead>, <tbody> e <tfoot> agrupam as linhas de cabeçalho, as linhas do corpo e as linhas de total. Eles deixam a estrutura clara, ajudam o CSS a estilizar cada parte e permitem que os navegadores repitam o cabeçalho em cada página impressa de uma tabela longa.

Células que se estendem

Uma célula pode se estender por várias colunas com colspan ou por várias linhas com rowspan. Numa grade semanal, um intervalo de almoço que cobre os cinco dias úteis pode ser uma só célula com colspan="5". Quando uma célula se estende, a linha em que ela está precisa de menos células: se uma linha normalmente tem 6 células e uma delas tem colspan="5", essa linha contém só 2 células no HTML. Use a mesclagem quando ela refletir os dados; tabelas muito complexas são difíceis para todo mundo ler, então dividir uma tabela grande em duas mais simples muitas vezes é melhor.

Tabelas largas podem ser um problema no celular. Uma tabela não quebra linha como o texto, então uma tabela com muitas colunas pode ficar mais larga que a tela. Uma solução comum é envolver a tabela num elemento que role para os lados sozinho, usando CSS, para que o resto da página não fique mais largo também.

Deixe os dados de cada célula o mais simples possível: um valor por célula, as unidades no cabeçalho (Preço em euros) em vez de repetidas em todas as células, e nada de células vazias usadas como espaçadores. Uma tabela feita assim é mais fácil de ler em voz alta, mais fácil de ordenar e cola direitinho numa planilha.