Como colocar borda numa tabela
Tabelas não têm bordas por padrão. Adicione com CSS: uma border em cada célula desenha a grade, e border-collapse: collapse na tabela junta cada par de bordas vizinhas numa só linha.
O atalho border recebe uma largura, um estilo e uma cor, em qualquer ordem: 1px solid #6b7280. Coloque em th, td, não só em table: uma borda na tabela desenha só a moldura externa.
border-collapse: separate vs collapse
border-collapse decide se as células compartilham bordas.
| Valor | Resultado |
|---|---|
separate (padrão) | Cada célula tem a sua própria borda, com um espaço entre as células definido por border-spacing |
collapse | Células vizinhas compartilham uma borda; border-spacing é ignorado |
Na tabela separate dá para ver as duas camadas: a moldura azul da tabela e uma caixa âmbar separada em volta de cada célula, com border-spacing entre elas. Troque 6px por 0 e as células se encostam, mas as linhas continuam duplas. Só collapse as junta.
Quando duas bordas em collapse se encontram e são diferentes, a mais larga vence. Com a mesma largura, o estilo decide (double vence solid, que vence dashed e dotted), e no empate a borda da célula vence a da linha, que vence a da tabela. Por isso a borda externa da tabela em collapse é âmbar, e não azul: as células e a tabela têm bordas de 2px solid ali, e as células vencem.
Só linhas horizontais, ou só linhas internas
A maioria das tabelas modernas não desenha todas as linhas. Dois padrões comuns:
A segunda tabela remove a borda do lado externo de cada célula da borda. border-inline-start e border-inline-end significam o início e o fim da linha, então o mesmo CSS continua correto em idiomas da direita para a esquerda, em que a primeira célula fica do outro lado.
Cantos arredondados na tabela
border-radius não faz nada numa tabela com border-collapse: collapse. Tabelas arredondadas usam o modelo separate sem espaçamento e desenham cada linha uma vez, dando às células só uma borda inferior e uma borda no fim:
As duas células de canto do cabeçalho recebem um raio próprio para que o fundo cinza acompanhe a curva. Sem ele, os cantos retos delas escapam além da borda arredondada. O raio é de 9px, os 10px da tabela menos a sua borda de 1px, para que as duas curvas se alinhem.
Cor e espessura da borda por parte
As bordas podem mudar conforme a parte da tabela. Seletores em thead, tfoot e em linhas específicas definem uma linha mais grossa abaixo do cabeçalho ou acima dos totais:
As linhas de 3px vencem as cinza de 1px onde se encontram, seguindo as regras de collapse acima. Para o resto da estrutura da tabela (thead, tfoot, th), veja tabela HTML.
O atributo border
Tutoriais antigos usam atributos na tag <table>:
<table border="1" cellspacing="0" cellpadding="6">
Os navegadores ainda respeitam border="1": ele desenha uma borda na tabela e em cada célula, no modelo separate, o que dá a aparência de linha dupla. Os três atributos estão obsoletos no HTML5. Os equivalentes em CSS são border nas células, border-spacing (ou border-collapse: collapse) na tabela e padding nas células.
Erros comuns
- Borda só em
table. Você fica com uma moldura sem linhas dentro. Adicione a borda emth, td. - Esquecer
border-collapse: collapse, e depois ver linhas duplas. border-radiuscomborder-collapse: collapse. O raio é ignorado.border-spacingcomborder-collapse: collapse. O espaçamento só funciona no modelo separate.- Bordas em
<tr>no modelo separate. As linhas não desenham bordas a não ser que a tabela esteja em collapse; estilize as células. - Usar
border="1"em código novo. Ainda funciona, mas não permite definir cor e está obsoleto.
Perguntas frequentes
Como colocar borda numa tabela no HTML?
Use CSS na tabela e nas células: table { border-collapse: collapse; } th, td { border: 1px solid #999; }. A borda nas células desenha a grade, e border-collapse: collapse junta as bordas vizinhas em linhas simples.
Por que minha tabela tem bordas duplas?
Por padrão cada célula desenha a sua própria borda com um espaço entre as células (border-collapse: separate), então células vizinhas mostram duas linhas. Defina border-collapse: collapse no <table> para juntá-las numa só.
O atributo border da tabela ainda é válido?
<table border="1"> ainda desenha bordas em todos os navegadores, mas está obsoleto no HTML5 e não dá nenhum controle sobre cor ou estilo. Use a propriedade CSS border.
Como arredondar os cantos de uma tabela?
border-radius não tem efeito numa tabela com border-collapse: collapse. Use border-collapse: separate com border-spacing: 0, coloque o raio na tabela e dê às células dos cantos um raio correspondente (border-start-start-radius e companhia) para que o fundo delas não escape pelos cantos.
Como tirar a borda de uma tabela?
Tabelas não têm borda a não ser que algo a adicione. Remova o atributo border da tag <table>, ou defina border: none em table, th, td para anular uma folha de estilo que as adiciona.
