Tabelas HTML

Quando os dados têm linhas e colunas claras — horários, folhas de pontuação, comparações de preço, mapas de assentos — use uma table HTML, não um monte de espaços nem uma grade falsa feita de listas. As listas ensinam conjuntos e sequências em um eixo principal. As tabelas ensinam dados bidimensionais: cada célula fica no cruzamento linha–coluna com um rótulo que você pode nomear. Se alguém pergunta “o que há na linha dois, coluna Score?”, uma tabela é a resposta honesta.

Para que serve uma tabela

Uma tabela expressa relações em uma grade. Os leitores olham uma coluna para baixo ou uma linha transversalmente para comparar valores rápido. Tecnologias assistivas podem anunciar cabeçalhos junto com células de dados quando você marca cabeçalhos com th em vez de estilizar texto td comum para parecer negrito. Por isso tabelas pertencem à informação tabular — não a construir banner, barra lateral e rodapé de um site inteiro com tags table aninhadas como faziam tutoriais antigos de layout. Quando o conteúdo é mesmo uma grade de fatos comparáveis, a marcação de tabela vale a complexidade.

Resposta direta

• table — a tabela inteira
• tr — uma linha de tabela
• th — célula de cabeçalho (rótulo de coluna ou linha)
• td — célula de dados
  Coloque rótulos de cabeçalho em th para o significado ficar claro para pessoas e ferramentas de assistência. Mantenha o número de células consistente entre linhas até aprender atributos avançados de span como colspan. Use tabelas para grades de dados; use CSS e seções semânticas para layout de página. Um caption curto (na segunda demo) nomeia o conjunto de dados para quem chega à grade.

Tabela de dados simples

Comece com uma linha de cabeçalho de células th, depois linhas de dados com células td. Essa forma cobre muitos placares e folhas de comparação para iniciantes.

Lendo a amostra simples

• table envolve a grade inteira
• Cada tr é uma linha horizontal
• A primeira linha usa th para rótulos de coluna (“Name”, “Score”)
• As linhas seguintes usam td para valores ordinários
• O estilo padrão do navegador pode mostrar bordas leves ou não — lições posteriores cobrem bordas; estrutura primeiro
• Conte células por linha: ambas as linhas de dados têm duas células, combinando com os dois cabeçalhos

Caption e rótulos de linha

Um caption nomeia a tabela para todos. Usar th na primeira coluna pode rotular cada linha quando títulos de linha importam tanto quanto títulos de coluna. Mantenha o caption curto e específico.

Lendo a amostra com caption

• caption deve ser o primeiro filho dentro de table em padrões comuns de iniciante
• Cabeçalhos de coluna ficam na linha superior como th
• Nomes de linha na primeira coluna também podem ser th para que “Ada” seja um rótulo, não só outra célula parecida com número
• As células restantes ficam td para as pontuações reais
• Você ainda não está construindo layout de página — está descrevendo um pequeno conjunto de dados

Tabelas vs listas vs layout

• Itens relacionados ou passos com um eixo principal → listas (ul / ol da lição anterior)
• Valores comparados em linhas e colunas → tabelas
• Regiões de página inteira (banner, colunas, rodapé) → estrutura semântica + CSS depois, não tabelas de layout aninhadas gigantes
  Hábitos antigos de “layout com tabela” quebram a responsividade em telas pequenas e dificultam a acessibilidade. Se você se pegar aninhando tabelas só para posicionar um logo ao lado de um menu, pare e espere as lições de layout. A pergunta: “Estou comparando células em uma grade, ou só tentando desenhar caixas na página?”

Hábitos de acessibilidade para grades

Prefira cabeçalhos th reais a texto td em negrito que só parece cabeçalho visualmente. Um caption claro (ou um título próximo) diz do que a grade trata antes de entrar nela. Mantenha as contagens de células por linha alinhadas para as colunas permanecerem honestas ao tabular ou deslizar. Atributos avançados como scope melhoram a associação de cabeçalhos em tabelas complexas — aprenda primeiro bem a divisão básica th/td, depois refine. Nunca dependa só da cor para marcar quais células são rótulos.

Prática no seu editor

1. Crie uma table com duas células de cabeçalho (th) na primeira linha.
2. Adicione três linhas de dados com contagens td correspondentes.
3. Veja no navegador e confirme que a grade lê da esquerda para a direita, de cima para baixo como esperado.
4. Opcionalmente adicione um caption e transforme a primeira coluna em th de rótulo de linha como na segunda amostra.
5. Quebre de propósito uma linha com célula faltando, note a forma estranha, depois corrija.
6. Escreva uma frase acima da tabela ou dentro do caption dizendo o que os dados medem.
7. Pergunte a um colega qual coluna é qual usando só seus cabeçalhos — se errar, renomeie o texto th.

Erros fáceis

• Construir sites inteiros como tabelas aninhadas gigantes (hábito de layout legado)
• Usar só td quando as células são realmente cabeçalhos
• Números de células inconsistentes por linha
• Usar uma tabela onde um ul/ol simples expressaria melhor uma lista de um eixo
• Deixar a tabela sem título legível por humanos (caption ou título)
• Copiar snippets antigos de “tabela de layout” em páginas de prática modernas

Como encaixa depois das listas

Listas organizam coleções unidimensionais. Tabelas organizam grades. Em breve você estilizará bordas e espaçamento; esta lição trava o esqueleto: table, tr, th e td com cabeçalhos honestos. Mantenha dados tabulares, layout em outro lugar, e o CSS posterior decorará uma estrutura que já faz sentido.

Resumo

• Tabelas usam table + tr + th / td
• Para grades de dados tabulares, não layout moderno de página inteira
• Prefira th para rótulos de cabeçalho (colunas e, quando útil, linhas)
• caption ajuda a nomear o conjunto de dados
• Mantenha contagens de células consistentes entre linhas
• Listas continuam melhores para conjuntos e passos simples sem um segundo eixo