Remover bordas da tabela HTML

1. Use a propriedade CSS border-collapse para remover a borda das células na tabela em HTML
2. Defina a propriedade CSS border para none para remover a borda de uma tabela em HTML

Este artigo apresentará métodos para remover bordas da tabela HTML. Aprenderemos a remover as bordas das células ao inserir imagens nas células da tabela.

Use a propriedade CSS border-collapse para remover a borda das células na tabela em HTML

Podemos usar a tabela HTML para inserir imagens. Podemos atribuir classes aos elementos da tabela e definir os atributos das classes em CSS. Este método nos ajuda a definir a altura e a largura do elemento td e inserir a imagem usando a propriedade background-image. Assim, em cada um dos elementos td, podemos inserir a imagem. Ao inserir as imagens desta forma, podemos ver a borda de cada célula da tabela. Podemos querer remover as bordas das células e da tabela para melhorar a aparência de nossas imagens. Para isso, podemos usar a propriedade CSS border-collapse. Podemos definir o valor da propriedade para collapse para que a borda das células se fundam. Isso permite que o espaçamento da célula seja 0. A borda não aparecerá se não usarmos o atributo border na tag table.

Por exemplo, em HTML, escreva a tag <table> e depois a tag <tr> dentro dela. Dentro da tag <tr>, escreva três tags <td> e escreva as classes left, midddle e right na primeira, segunda e terceira classes. Em CSS, selecione a tag table e defina a propriedade border-collapse como collapse. Em seguida, selecione todas as três classes left, middle e right de uma vez e defina a altura, largura e uma imagem de fundo.

Criamos três elementos td e inserimos imagens nesses elementos no exemplo abaixo. Usando a propriedade border-collapse, removemos as bordas das células. Podemos remover a propriedade border-collapse para ver como a borda das células faz a imagem parecer.

Código de exemplo:

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>

table{
 border-collapse:collapse;
}
.left, .middle, .right
{
 width: 200px;
 height: 280px;
 background-image: url('https://loremflickr.com/212/280'); 
}

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

Podemos definir a propriedade border como none para remover a borda de uma tabela HTML. A propriedade é uma abreviatura de diferentes propriedades border. Essas propriedades diferentes são border-width, border-style e border-color. Uma borda não será formada quando usarmos a propriedade border e definirmos como nenhum.

Por exemplo, podemos usar a tabela criada acima. Podemos modificar um pouco o CSS acima para atingir nosso objetivo usando a propriedade border. Podemos selecionar as tags table, tr e td da tabela e definir a propriedade border como none. Desta forma, podemos remover a borda de uma tabela e as bordas das células da tabela em HTML.

Código de exemplo:

table, tr, td{
 border:none;
}

<table>
 <tr>
 <td class="left"></td>
 <td class="middle"></td>
 <td class="right"></td>
 </tr> 
</table>