Carregando...

Tabelas em CSS

HTML monta a grade de linhas e células. CSS decide se as bordas ficam limpas, quão larga a tabela senta, onde o texto fica na célula e se as linhas são fáceis de escanear.

Um kit CSS para tabelas

📊 Estilos de tabela em um olhar

Propriedade Trabalho do dia a dia
border-collapse Fundir bordas de célula (collapse) ou mantê-las separadas (separate)
border-spacing Espaço entre células quando as bordas estão separadas
width Largura da tabela (muitas vezes 100% em artigo ou cartão)
padding em th/td Respiração dentro das células
text-align / vertical-align Alinhamento horizontal e vertical na célula

Estilize sobretudo table, th, td e às vezes tr — não cada célula uma a uma — para a grade inteira ficar consistente.

Bordas que não duplicam

Sem ajuda, bordas vizinhas podem parecer grossas ou duplas. border-collapse: collapse junta-as numa linha limpa — a escolha cotidiana para tabelas de dados.

Bordas de tabela colapsadas

css
CSS Code 
table.data {
width: 100%;
border-collapse: collapse;
}

table.data th,
table.data td {
border: 1px solid #ccc;
padding: 0.5rem 0.75rem;
}

Bordas separadas e espaçamento

Se quiser espaço visível entre células, use border-collapse: separate e defina border-spacing. O espaçamento é ignorado com collapse.

Células separadas com espaços

css
CSS Code 
table.cards {
border-collapse: separate;
border-spacing: 0.5rem;
}

table.cards td {
border: 1px solid #ddd;
padding: 0.75rem;
}

Largura, cabeçalhos e alinhamento

Tabela em largura total costuma ler melhor em artigos. Destaque cabeçalhos, alinhe o texto e use vertical-align quando as alturas das células diferem.

Alinhamento de cabeçalho e célula

css
CSS Code 
table.data th {
text-align: left;
background: #f5f5f5;
font-weight: 700;
}

table.data td {
text-align: left;
vertical-align: top;
}

Linhas zebra e hover calmo

Fundos alternados ajudam a seguir tabelas largas. Um :hover leve em tr destaca a linha ativa sem ruído neon.

Zebra + hover de linha

css
CSS Code 
table.data tbody tr:nth-child(even) {
background: #fafafa;
}

table.data tbody tr:hover {
background: #eef5ff;
}

Um hábito calmo de tabela de dados

Colapse bordas, dê padding real às células, mantenha contraste de cabeçalho modesto e adicione zebra ou hover só quando a tabela larga precisar de ajuda para escanear.

Tabela de artigo legível

css
CSS Code 
article table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
}

article th,
article td {
border: 1px solid #e0e0e0;
padding: 0.6rem 0.8rem;
}

Experimente você

  1. Ponha border-collapse: collapse e borda leve em th/td.
  2. Adicione padding confortável nas células.
  3. Alinhe cabeçalhos à esquerda; teste vertical-align: top em células multilinha.
  4. Liste linhas pares com tr:nth-child(even).
  5. Adicione fundo suave em tr:hover — depois compare com outra tabela e border-spacing.

Erros comuns

  • Deixar bordas separated por padrão para linhas duplas e bagunçadas
  • Definir border-spacing com border-collapse: collapse (é ignorado)
  • Padding minúsculo que dificulta dados densos
  • Hover neon ou zebra pesada que briga com o conteúdo
  • Misturar esta lição com marcadores list-style (sessão anterior)

Resumo

  • border-collapse: collapse é o padrão calmo para tabelas de dados
  • Use separate + border-spacing quando quiser espaços entre células
  • Largura, padding e alinhamento moldam a leitura
  • Zebra e hover leve ajudam a escanear
  • Estrutura no HTML; aparência no CSS

🧠 Teste Seu Conhecimento

Pronto para Começar

Teste Seu Conhecimento

Desafie-se com este questionário interativo e veja o quão bem você entende o tópico

❓
8
Perguntas
🎯
70%
Para Passar
♾️
∞
Tempo
🔄
∞
Tentativas

📝 Instruções

  • Leia cada pergunta cuidadosamente
  • Selecione a melhor resposta para cada pergunta
  • Você pode refazer o quiz quantas vezes quiser
  • Seu progresso será mostrado no topo
Tópico 32 de 35
Css Tutorial