Como remover o espaçamento entre as fronteiras da mesa com CSS

Carl Hintz DDS

Quando a tabela é criada em HTML, principalmente o CSS “fronteira”A propriedade é aplicada a ele. Isso resultará em uma tabela com fronteiras que têm espaço entre elas. Nas versões anteriores do HTML, o atributo Cellspacing foi utilizado para remover esse espaço. No entanto, hoje em dia, o CSS “colapso da fronteira”A propriedade pode ser usada para o mesmo propósito.

Este manual guiará relacionado a:

- O que é "colapso da fronteiraPropriedade CSS?
- O que são as "colapso da fronteiraValores da propriedade CSS?
- Como entrar em colapso espaçamento entre as fronteiras da mesa com CSS?

Qual é a propriedade CSS "colapso da fronteira"?

O CSS “colapso da fronteira”A propriedade é utilizada para ajustar as fronteiras da tabela como colapso ou separado. Quando aplicamos a propriedade de fronteira ao

, e

Elementos, resulta em uma tabela com fronteiras com espaços entre eles. Para remover esse espaço, utilizamos a propriedade "colapso da fronteira" do CSS com o valor "colapso”.

Quais são os valores da propriedade CSS do "colapso da fronteira"?

Os valores associados à propriedade mencionada estão listados abaixo:

- ““separado”: Este valor adiciona espaços entre as fronteiras da tabela.
- ““colapso”: Este valor remove os espaços entre as fronteiras da tabela.
- ““herdar”: Este valor define o valor padrão.
- ““inicial”: Este valor herda de seus pais.

Analise o exemplo abaixo!

Exemplo: como criar uma tabela em html?

Em html, primeiro, adicione um “

”Elemento para criar uma tabela. Em seguida, adicione um elemento de legenda. Depois disso, o número de linhas é criado utilizando o “" marcação. O primeiro TAG segura o "

”Tags para títulos. Outras tags TR seguram o

Tags para os dados:

Informações dos alunos
Nome do aluno Nome do pai Curso Pontuação
John Madeira Desenvolvimento de Java 90
Margarida William Introdução a c++ 89
Bina Jack Introdução a c 79

O resultado do código HTML acima é o seguinte:

Agora, adicionaremos uma propriedade de fronteira e outras propriedades para melhorar a aparência da mesa.

Estilo "Tabela", "Th", "TD" Elementos

Table, th, td
Border: 2px Solid #432C7a;
margem: automático;
preenchimento: 4px;
Fonte-família: Verdana, Genebra, Tahoma, Sans-Serif;

As seguintes propriedades CSS são aplicadas à tabela, elementos TH e TD:

- ““fronteira”A propriedade recebe o valor“2px Solid #432C7a”Que define a largura da borda de 2px, o estilo de borda sólida e a cor da borda #432C7A.
- ““margem”Propriedade com o valor“auto”Indica espaço igual ao redor do elemento.
- ““preenchimento”Propriedade com o valor“4px”Define o espaço de 4px em torno do conteúdo do elemento ou dentro da borda.
- ““família de fontesA propriedade é definida como Verdana, Genebra, Tahoma e Sans-Serif. A lista declarada de estilos garante que, se o navegador da web não suportar o primeiro valor, outros serão aplicados.

Tabela de estilo elemento “Legenda”

Legenda da tabela
Size da fonte: 20px;

O elemento da legenda é aplicado com o “tamanho da fontePropriedade com o valor 20px.

Pode -se observar que as propriedades de estilo CSS são adicionadas com sucesso à tabela:

Como entrar em colapso espaçamento entre as fronteiras da mesa com CSS?

O CSS “colapso da fronteira”A propriedade é aplicada com o valor“colapsoPara a mesa, os elementos TH e TD da seguinte maneira:

colapso da fronteira: colapso;

Esta propriedade removerá o espaçamento entre as fronteiras da tabela da seguinte forma:

Isso se tratava de remover o espaçamento entre as fronteiras de mesa com CSS.

Conclusão

No CSS, o “colapso da fronteira”A propriedade é utilizada para colapso ou separar o espaçamento entre as fronteiras entre as fronteiras da tabela. Esta propriedade é aplicada com valores como colapso, separado, inicial ou herdar. Cada valor desempenha uma função diferente. No entanto, o "colapso”O valor remove o espaçamento entre as fronteiras da tabela. Este post descreveu como excluir espaçamento entre as fronteiras da tabela.