Como remover bordas de uma tabela HTML

Para remover bordas visíveis de uma tabela HTML, defina a propriedade CSS border como none na tabela e nas células que exibem uma linha. Use border-collapse: collapse quando quiser que bordas de células adjacentes compartilhem uma única linha; essa propriedade combina as bordas, mas não as remove. Essa diferença é útil ao organizar imagens ou outros conteúdos dentro das células: collapse altera a maneira como as bordas adjacentes se encontram, enquanto border: none remove as bordas renderizadas dos elementos selecionados.

Use border-collapse: collapse para combinar bordas adjacentes de células da tabela em HTML

A propriedade CSS border-collapse controla se uma tabela usa o modelo de bordas separadas ou o modelo de bordas colapsadas. Com o valor collapse, as bordas de células adjacentes são combinadas, de modo que duas células não desenham linhas separadas ao longo da borda compartilhada. Ainda pode haver bordas visíveis no contorno externo da tabela e ao redor de suas células; essa declaração não as remove. Ela também não serve para definir o espaçamento como zero. No modelo separado, border-spacing controla o espaço entre as bordas das células. Já o modelo colapsado combina as bordas adjacentes, portanto alterar border-spacing não resolve linhas visíveis nesse modelo.

Este pequeno exemplo em HTML tem duas células com bordas. A regra da tabela combina as linhas no ponto em que as células se encontram, enquanto a regra das células mantém as linhas visíveis:

const example = `<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>`;
console.log(example);

<style>
table { border-collapse: collapse; }
td { border: 1px solid #555; padding: 0.5rem; }
</style>
<table>
  <tr><td>Image</td><td>Caption</td></tr>
</table>

Substitua o texto de exemplo das células pelo seu conteúdo, incluindo um elemento de imagem se elas contiverem imagens. O CSS funciona com células comuns <td> e <th> e não depende de um serviço de imagens. A declaração padding adiciona espaço dentro de cada célula; ela não controla o espaço entre bordas de células distintas. Se quiser uma grade com linhas compartilhadas, mantenha a borda das células e use collapse. Se não quiser linhas, remova as declarações de borda aplicáveis, como explicado a seguir.

Defina a propriedade CSS border como none para remover a borda de uma tabela HTML

Para ocultar as bordas, defina border: none na tabela e em cada tipo de célula cujas bordas devem desaparecer. Uma regra com table, th, td seleciona a tabela, as células de cabeçalho e as células de dados em conjunto. Se o contorno da tabela já não estiver visível e apenas as linhas das células permanecerem, th, td pode selecionar somente essas células. O seletor determina quais elementos recebem a declaração; a cascata do CSS determina qual declaração correspondente prevalece. Uma regra mais específica pode substituir um seletor geral e, quando a especificidade é igual, prevalece a declaração posterior.

A propriedade border é uma abreviação de border-width, border-style e border-color. Defini-la como none remove a borda renderizada dos elementos selecionados, mas não remove o preenchimento interno das células nem seu conteúdo. Por exemplo, uma folha de estilos pode usar table, th, td { border: none; } quando os três tipos de elementos devem ficar sem borda visível. Adicione border-collapse: collapse somente se também quiser que a tabela use o modelo colapsado; essa propriedade não substitui border: none.

Se uma linha continuar aparecendo, verifique qual elemento a desenha. Uma borda da tabela exige uma regra que selecione a tabela; uma borda de uma célula de cabeçalho ou de dados exige uma regra que selecione th ou td. Em seguida, confira se outra regra da folha de estilos está substituindo sua declaração. Assim, a correção fica restrita aos elementos que realmente têm bordas e evita alterações no espaçamento ou no conteúdo não relacionado da tabela.