Bordas de tabela HTML

Uma tabela sem linhas é legível; as bordas tornam a grade óbvia de relance. A lição anterior fixou a estrutura com table, tr, th e td. Esta sessão adiciona a aparência: em HTML moderno você desenha bordas com CSS, não só com o antigo atributo apresentacional border em <table>. A estrutura fica no HTML; linhas, espaçamento e cor pertencem a regras de estilo. Pense nas bordas como óculos para a grade — ajudam os olhos a acompanhar as células sem mudar o significado dos dados.

Por que CSS em vez do atributo antigo

Os navegadores aceitavam <table border="1"> como truque didático rápido. Esse atributo está obsoleto para páginas modernas sérias e quase não controla cor, espessura ou quais lados aparecem. O CSS permite definir largura, estilo e cor separadamente, compartilhar uma regra entre muitas células e combinar bordas com padding e border-collapse. Aprender bordas via CSS também combina com como você vai estilizar títulos, listas e layout depois, então páginas de prática ficam alinhadas a projetos reais.

Resposta direta

Estilize table, th e td com a propriedade CSS border. Use border-collapse: collapse na tabela para que bordas adjacentes se fundam numa única linha limpa de grade em vez de uma borda dupla grossa. Coloque regras num atributo style para demos minúsculas ou — melhor para reutilizar — num bloco <style> ou folha de estilos com uma classe. Mantenha a marcação tr/th/td semântica; só a aparência vai para o CSS. Se um tutorial ainda começa só com border="1", trate como nota de museu e traduza a ideia para CSS.

Bordas CSS versus marcação obsoleta

Bordas nas células (prática inline)

Estilos inline servem enquanto você experimenta numa tabela pequena. Collapse primeiro; depois dê a cada célula de cabeçalho e de dados uma borda solid fina e um pouco de padding.

Lendo a amostra inline

• border-collapse: collapse em table funde bordas vizinhas numa grade
• Cada th/td define border: 1px solid #333 para uma linha escura simples
• padding: 6px mantém o texto longe de tocar a borda
• Estilos inline se repetem em cada célula — úteis para aprender, barulhentos em tabelas grandes
• A estrutura HTML não mudou em relação à lição de tabelas; só a apresentação foi adicionada

Aparência compartilhada com um bloco style

Quando várias células devem combinar, uma regra de classe vence copiar a mesma string inline em todo lugar. Um bloco pequeno <style> no head do documento é uma ponte clara para folhas externas.

Lendo a amostra de estilo compartilhado

• table.grid limita as regras para que nem toda tabela da página precise parecer igual
• Uma regra estiliza tanto th quanto td dentro de .grid
• Mudar padding ou cor num lugar atualiza a grade inteira
• Você ainda escreve linhas normais tr/th/td — o CSS nunca substitui esses elementos
• Cursos CSS posteriores aprofundam seletores; aqui o objetivo é uma receita de borda limpa e repetível

Collapse, espaçamento e legibilidade

Sem border-collapse: collapse, muitos navegadores mostram bordas separadas que parecem linhas duplas ou uma grade em relevo. Collapse é a escolha habitual de iniciantes para tabelas de dados porque se lê como uma superfície coerente tipo planilha. Padding dentro das células importa tanto quanto a linha em si: padding zero cola o texto na borda e cansa a varredura. Comece com 6px–8px e ajuste a olho na página de prática. Cor é opcional — cinza neutro ou carvão escuro basta para aprender; cores gritantes distraem dos números que você compara.

A estrutura fica; a aparência se move

Não apague cabeçalhos th porque o CSS existe. Não coloque relações tabulares só em caixas coloridas sem marcação real de tabela. Bordas são decoração e clareza sobre o esqueleto da sessão de tabelas. Se os dados não forem tabulares, volte às listas — linhas mais bonitas não corrigem a escolha errada de elemento. Da mesma forma, não reanime tabelas de layout aninhadas só porque as bordas de repente ficaram bonitas; regiões da página ainda pertencem à estrutura e ao layout CSS depois.

Pratique no seu editor

1. Reutilize (ou recrie) uma tabela pequena de prática da sessão de tabelas com células reais th/td.
2. Adicione bordas com CSS — primeiro estilos inline em cada célula para ver cada propriedade.
3. Ligue e desligue border-collapse para comparar linhas duplas versus uma grade de linha única.
4. Adicione padding para o texto ficar confortável em cada célula; tente 4px e depois 8px.
5. Refatore para uma class mais um bloco curto <style> como a segunda amostra.
6. Confirme que os cabeçalhos ainda são th e as células de dados ainda td após o estilo.
7. Opcional: estilize só .grid th com borda ou fundo um pouco mais forte para enfatizar rótulos — sem mudar o significado HTML.

Erros fáceis

• Depender só de atributos apresentacionais obsoletos como border="1" em sites sérios
• Deixar bordas sem collapse e se perguntar por que as linhas parecem grossas ou duplas
• Padding zero de modo que o texto toque a borda
• Estilizar com CSS mas remover rótulos semânticos th
• Aplicar um td { border: ... } global que restaura por acidente tabelas não relacionadas
• Tratar CSS de borda como motivo para montar de novo o layout da página com tabelas aninhadas

Resumo

• Prefira CSS border em th e td (e collapse em table)
• border-collapse: collapse limpa a grade em linhas simples
• Padding melhora a legibilidade dentro das células
• A estrutura fica no HTML; a aparência no CSS
• Evite depender do atributo border obsoleto em trabalho novo
• Refatore bordas inline repetidas para uma classe quando a tabela crescer