CSS – Como remover completamente as bordas da tabela HTML

Css Como Remover Completamente As Bordas Da Tabela Html



A tabela é um componente importante da página HTML usada para armazenar e organizar os dados. Os desenvolvedores podem projetar a tabela HTML usando propriedades CSS, como cor de fundo, borda, margem, preenchimento, etc. O CSS “ fronteira ” é utilizada para definir bordas em torno de tabelas e células. Mas, em alguns cenários, os usuários não precisam de uma borda para estilizar.

Este post explicará como remover completamente as bordas do HTML usando CSS.

Como remover completamente as bordas da tabela HTML?

Se os usuários quiserem remover completamente as bordas de uma tabela HTML, consulte as instruções.







Etapa 1: criar tabela com borda

Para criar uma tabela em HTML, siga as instruções:



  • Primeiro, adicione um elemento de tabela “ ' juntamente com o ' fronteira ” atributo.
  • Então o ' ” é adicionada para criar o número desejado de linhas.
  • As células de cabeçalho são especificadas usando “ ' Tag.
  • Depois disso, ' ” tags estão incluídos em outros “ ” tags para adicionar células de dados:
< tabela fronteira = '1 px' >

< tr > < º > Nome < / º > < º > EU IRIA < / º > < º > Categoria < / º >< / tr >

< tr > < td > Jenny < / td > < td > 001 < / td > < td > UMA < / td >< / tr >

< tr > < td > oceano < / td > < td > 002 < / td > < td > B < / td >< / tr >

< tr > < td > Grande < / td > < td > 003 < / td > < td > C < / td >< / tr >

< / tabela >

Para estilizar a tabela HTML, usaremos as seguintes propriedades CSS:



>

tabela {

preenchimento : 10px ;

margem : auto ;

fronteira : 1px sólido Preto :

}

>

Dentro de ' ” , acesse o elemento

usando sua tag. Em seguida, aplique as seguintes propriedades:





  • margem ” propriedade com o valor “ auto ” é usado para definir um espaço igual ao redor do elemento.
  • preenchimento ” propriedade com o valor “ 10px ” define o espaço de 10px em torno do conteúdo do elemento.
  • fronteira ” aplica a borda ao redor da tabela.

Saída



Etapa 2: remover borda em CSS

Para remover a borda da tabela, os usuários devem definir o “ fronteira ” propriedade como “ Nenhum ”:

tabela {

preenchimento : 10px ;

margem : auto ;

fronteira : Nenhum ;

}

Pode-se observar que a borda externa da tabela foi removida com sucesso:

Etapa 3: remover completamente a borda da tabela

Além disso, se você deseja remover toda a borda da tabela e também das células, defina “ fronteira ” propriedade como “ Nenhum ” em todos os elementos, incluindo “ tabela ”, “ tr ”, “ º ', e ' td ”:

mesa, tr, td, th{

preenchimento: 10px;

margem: automática;

borda: nenhum;

}

A saída abaixo indica que removemos completamente a borda da tabela HTML:

Demonstramos o método para remover completamente as bordas das tabelas HTML.

Conclusão

Para remover completamente a borda da tabela HTML, primeiro crie uma tabela. Depois disso, aplique as propriedades CSS “ fronteira ”, “ preenchimento ', e ' margem ' na mesa. Em seguida, defina a propriedade border como “ Nenhum ” em todos os elementos da tabela, como “ tabela ”, “ tr ”, “ td ', e ' º ”. Este tutorial demonstrou o método para remover completamente a borda da tabela HTML.