Quando usar tabela
Tabelas existem para uma coisa específica: dados organizados em linhas e colunas. Usá-las para qualquer outra coisa é um erro clássico da história da web.
Estudar esta lição interativa →Pense num comparativo de planos de assinatura, uma tabela de preços, uma grade de horários. Nesses casos, a informação é, por natureza, uma grade: cada linha é um item, cada coluna é um atributo daquele item, e o cruzamento das duas faz sentido. É exatamente para isso, e só para isso, que existe a tag <table>.
Pense numa planilha: linhas e colunas, e cada célula no cruzamento de uma linha com uma coluna guarda um valor relacionado às duas. Uma tabela HTML é exatamente essa mesma ideia, só que desenhada na página em vez de num programa de planilhas.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Uma tabela simples, ainda sem cabeçalhos de verdade (chegamos lá na próxima lição).
Nos primeiros anos da web (décadas de 1990 e 2000), era comum usar tabelas para montar o layout inteiro de uma página, colocando o menu numa célula, o conteúdo em outra, o rodapé em outra. Funcionava visualmente, mas era um problema sério: tabelas de layout confundem leitores de tela (que tentam anunciar "linha 1, coluna 2" em cima de um menu, sem sentido nenhum) e são rígidas para deixar responsivas em telas de tamanhos diferentes. Hoje, o layout de página é trabalho do CSS (com Flexbox e Grid, que você vai ver no próximo curso), e a tabela ficou reservada exclusivamente para o que ela faz bem: dados tabulares de verdade, como um comparativo de preços, uma tabela de resultados esportivos ou uma grade de horários.
Antes de usar uma tabela, pergunte-se: "faz sentido ler esta informação em voz alta como 'linha X, coluna Y'?" Se a resposta for sim (preços por plano, horários por dia da semana), é tabela. Se a resposta for não (o menu do site, a estrutura geral da página), não é.
Três tropeços de quem está começando: usar <table> só para alinhar texto ou botões lado a lado (isso é trabalho de CSS); colocar um <tr> ou <td> solto, fora de uma <table> (o navegador descarta essas tags e o conteúdo vira texto solto); e publicar uma imagem de uma tabela (um print), que nenhum leitor de tela consegue ler e que ninguém consegue copiar ou pesquisar. Se é uma grade de dados, escreva a grade em HTML.
🧩 Este conteúdo é interativo — abra no app para ver e rodar de verdade. Transforme a lista em uma tabela de duas colunas.