Estilize bordas de tabela HTML com CSS: border-collapse, border-spacing, linhas por célula, linhas zebradas e cantos arredondados. Playground ao vivo com CSS para copiar.
Para deixar as linhas de uma tabela visíveis, coloque uma borda nas células th e td e depois adicione border-collapse: collapse à tabela para que células vizinhas compartilhem uma única linha em vez de desenhar duas. Para ter espaços entre as células, use border-collapse: separate com border-spacing. Cantos arredondados exigem o modelo separado, porque bordas colapsadas ignoram o border-radius.
As propriedades de borda de tabela em resumo
Objetivo
CSS
Onde vai
Linhas de grade únicas e compartilhadas
border-collapse: collapse
Linhas em volta de cada célula
border: 1px solid #ccc
th, td
Espaços entre as células
border-spacing: 4px
table (só no modelo separado)
Linhas zebradas
tbody tr:nth-child(even) { background: #f5f5f5 }
Cantos externos arredondados
border-radius + border-collapse: separate
table e células dos cantos
Linhas só entre as fileiras
border-bottom: 1px solid #ddd
th, td
As tabelas têm regras de borda próprias, diferentes das caixas comuns, então o CSS que funciona em uma div muitas vezes fica errado em uma tabela. Use o playground para alternar entre os modelos colapsado e separado, mudar a espessura da linha, o espaçamento e o raio dos cantos, e depois copie o CSS exato que ele gera.
Escolha o modelo collapse ou separate no playground e veja as linhas duplas se fundirem ou se separarem.
Escolha quais linhas desenhar: uma grade completa, só as fileiras ou apenas uma moldura externa.
Ative as linhas zebradas ou os cantos arredondados; arredondar muda a tabela para o modelo separado automaticamente.
Copie o CSS gerado, ou comece por um dos exemplos editáveis mais abaixo.
Coloque as bordas nas células, não só no elemento table. Uma borda apenas na tabela desenha uma moldura externa e nada por dentro.
Use border-spacing: 0 com o modelo separado quando quiser cantos arredondados sem espaços visíveis.
Aplique a zebra só nas linhas do tbody, para que a linha de cabeçalho mantenha o próprio fundo.
Mantenha as cores das linhas claras e deixe o padding fazer a maior parte da separação; grades pesadas dificultam a leitura dos números.
Envolva tabelas largas em um contêiner com overflow-x: auto para que, no celular, a rolagem seja da tabela e não da página inteira.
Perguntas frequentes
Por que minha tabela mostra bordas duplas?
O valor inicial de border-collapse é separate, então cada célula desenha a própria borda e duas vizinhas ficam lado a lado. Defina border-collapse: collapse na tabela e as bordas adjacentes se fundem em uma só linha.
Por que o border-radius não funciona na minha tabela?
Cantos arredondados são ignorados no modelo de bordas colapsadas. Mude a tabela para border-collapse: separate, defina border-spacing: 0 e depois arredonde as células dos cantos externos ou envolva a tabela em uma div com border-radius e overflow: hidden.
O atributo HTML border ainda é permitido em tabelas?
O padrão HTML lista o atributo border em table como obsoleto e diz para usar CSS no lugar. Os navegadores ainda o desenham por causa de páginas antigas, mas código novo deve definir as bordas em uma folha de estilos para que uma regra controle todas as tabelas.
Que valores o border-spacing aceita?
Uma medida define o espaço tanto na horizontal quanto na vertical. Duas medidas definem primeiro o espaço horizontal entre colunas e depois o espaço vertical entre linhas, por exemplo border-spacing: 8px 4px. Ele não tem efeito quando a tabela está colapsada.
Como adiciono borda a apenas uma coluna?
Selecione as células dessa coluna com um seletor como td:nth-child(2), th:nth-child(2) e dê a elas uma borda esquerda ou direita. Estilizar as células diretamente funciona igual nos dois modelos de borda.
Dois modelos de borda
No modelo separado, cada célula é uma caixa com a própria borda, e o border-spacing define o espaço entre essas caixas. É o padrão, e é por isso que uma tabela simples com bordas nas células parece duplicada.
No modelo colapsado, o navegador resolve cada aresta compartilhada em uma única linha. É o que a maioria das tabelas de dados quer, ao custo de perder o border-spacing e os cantos arredondados.
Tabelas de dados legíveis
Linhas horizontais entre as fileiras guiam o olhar ao longo de uma sequência de números melhor do que uma grade densa. Alinhe à direita as colunas numéricas, mantenha uma linha de cabeçalho clara com elementos th e adicione um caption para que a tabela tenha um nome para quem usa leitor de tela.
Listras zebradas ajudam em tabelas longas com muitas colunas. Confira se a cor da listra ainda deixa contraste suficiente para o texto sobre ela.
Referência das propriedades de borda de tabela
Propriedades que mudam como as linhas da tabela são desenhadas
Propriedade
Valores
Inicial
Observações
collapse, separate
Definida na tabela. Collapse funde as arestas compartilhadas.
uma ou duas medidas
Espaço horizontal e depois vertical. Ignorada quando colapsada.
espessura estilo cor
Geralmente definida em th e td.
Ignorada no modelo colapsado.
Exemplos editáveis de bordas de tabela
Grade colapsada com linha de cabeçalho
A tabela de dados clássica: uma linha entre cada célula e um cabeçalho com fundo colorido.
Só linhas horizontais, com listras zebradas
Sem linhas verticais. Uma borda inferior em cada célula mais um tom nas linhas pares deixa fileiras longas fáceis de acompanhar.
Tabela com cantos arredondados
O modelo separado com espaçamento zero, bordas à direita e embaixo de cada célula e os cantos externos arredondados.
O atributo border obsoleto ao lado da versão em CSS
As duas tabelas ficam parecidas. A segunda mantém o estilo no CSS, que é o que o padrão HTML pede.
Playground de bordas de tabela
Modelo de borda
Linhas a desenhar
Grade completa
Só as fileiras
Só a moldura externa
Espessura da linha: {n}px
Espaçamento entre células: {n}px
Raio dos cantos: {n}px
Linhas zebradas
Cor da linha
Espaçamento e arredondamento só funcionam no modelo separado.