CSS colapso da fronteira

Bryant Rowe Sr.
CSS colapso da fronteira
Uma borda é algo que é exibido ao redor da mesa ou células. Também é usado para separar duas células ou elementos e ao redor de toda a mesa ou caixa. O colapso da borda significa que a borda da tabela ou célula é exibida como uma única linha. Usamos esta propriedade de colapso de borda no CSS quando queremos exibir uma única borda ao redor da mesa ou células da tabela.

Neste tutorial, usaremos esta propriedade de colapso da fronteira na tabela para que você aprenda como essa propriedade é usada no CSS para desmoronar a borda da tabela e separar a borda da tabela e as células. Vamos começar a explorar os exemplos fornecidos neste tutorial para aprender este conceito de colapso da fronteira.

Sintaxe:

  • colapso da fronteira: colapso;
  • colapso da fronteira: separado;

Exemplo 1
Abra o arquivo no código do Visual Studio e selecione o idioma para isso, que é a linguagem HTML enquanto criamos uma tabela em HTML. Depois disso, vinculamos o arquivo html ao arquivo CSS para o estilo adicional da tabela. Você pode executar esses exemplos no software diferente de sua escolha, mas o código para este é o mesmo. Aqui, usamos o código do Visual Studio. Este arquivo html é salvo. Nós usamos o ".Extensão do arquivo html ”para este arquivo.

O código anterior é o código HTML no qual criamos uma tabela com quatro linhas e duas colunas. Primeiro, escrevemos um título e depois usamos o “

”Tag para criar a tabela. O ""Está aqui para representar as" linhas "da tabela. Entramos nos dados nas células da tabela usando “
”É definir o título da mesa. O "
”. O ""É definir a" célula "da tabela. Depois de criar a tabela e colocar dados nesta tabela, passamos para o arquivo CSS para dar estilo a esta tabela. Usamos a propriedade de colapso da fronteira no código CSS.

Código CSS:
Aplicamos algumas propriedades no cabeçalho para tornar nosso cabeçalho mais atraente. Mudamos sua “família de fontes” e o definimos como “Arial”. O estilo deste texto de título é "itálico" e a cor deste título é "azul". Agora, prosseguimos para a tabela e colocamos a borda da tabela como "1px" em largura, "sólido" no tipo e "preto" em cores. O conceito principal é usado aqui que é "colapso da fronteira". Usamos esta propriedade e definimos este "colapso da fronteira" para "colapso".

Saída:
Vamos dar uma olhada na seguinte imagem na qual a saída é mostrada. Você pode ver que a borda da tabela é solteira.

Exemplo #2
Nesse caso, editamos a tabela anterior um pouco. Aqui, adicionamos mais duas colunas à tabela anterior e usamos a propriedade "Border-Collapse" novamente nesta nova tabela.

Código CSS:
No Código CSS, usamos outra propriedade que é a propriedade "espaçamento de fronteira". Você verá se isso afeta a borda da tabela ou não quando usamos a propriedade "colapso da fronteira" junto com esta propriedade.

Editamos a “família da fonte” do título. Desta vez, usamos "calibri" como a "família da fonte" do cabeçalho. A "cor" que usamos aqui para o título é "vermelho". Agora, aplique a propriedade "fronteira" novamente para a mesa, célula e o cabeçalho da tabela. A borda de todas essas propriedades está definida como "2px", com um tipo "sólido" e cor "verde". A propriedade "colapso da fronteira" está definido como "colapso". Em seguida, usamos o "espaçamento da borda" para dar espaço entre a borda da tabela e as células da tabela. Nós o definimos como “20px”.

Saída:

Aqui, a saída não mostra diferença na borda das tabelas e células. Parece o mesmo que na ilustração anterior. Isso significa que a propriedade de "espaçamento entre borda" não altera o espaço de borda da tabela porque usamos a propriedade "colapso da fronteira" nesta tabela junto com a propriedade "espaçamento de borda".

Exemplo #3
Aqui, criamos duas tabelas diferentes da mesma maneira que discutidas anteriormente em nosso primeiro exemplo. Criamos duas tabelas para que possamos aprender como essa propriedade de "colapso da fronteira" funciona de maneira diferente da propriedade de fronteira "separada".

Código CSS:
A “família de fontes” do cabeçalho é “Times New Roman” com uma cor “azul”. A "borda" de ambas as tabelas é definida como a cor "laranja" e "2px" do tipo "sólido". Usamos a propriedade "colapso da fronteira" na Tabela 1. Também usamos o outro "colapso da fronteira" na Tabela 2, mas desta vez, definimos essa propriedade como "separada".

Saída:
Aqui, temos duas tabelas na saída. A primeira borda da tabela é a mesma que em nossos exemplos anteriores. Mas a segunda borda da tabela é diferente porque usamos o "separado" com o "colapso da fronteira". A borda da tabela é separada da borda das células em uma tabela.

Exemplo #4
Aqui, temos duas mesas novamente que projetamos no Exemplo 3. Agora, mudamos alguns estilos dessas tabelas, usamos a propriedade "espaçamento de borda" em ambas as tabelas e verificamos a diferença nas duas tabelas.

Desta vez, a "família" do cabeçalho é "argeliana" e a cor é "marrom". A borda da tabela é "magenta" em cor. A Tabela Um usa o "colapso" com o "colapso da fronteira" com um "espaçamento de fronteira" de "10px". Para a Tabela Dois, usamos uma borda "separada" e o "espaçamento entre borda" também é "10px". A saída mostrará a diferença.

Saída:
Na saída, você pode ver facilmente a diferença entre a Tabela Um e a Tabela Dois. Isso mostra que quando usamos o "colapso da borda: borda", o "espaçamento da borda" não afeta a tabela. Mas quando usamos o “colapso da borda: separado”, podemos definir o espaçamento da borda entre as células e a borda da tabela de acordo com a nossa escolha.

Exemplo #5
Aqui, aplicamos as três propriedades da borda da tabela. Primeiro, usamos a propriedade "colapso da fronteira" na Tabela 1, que é definida como "colapso". Na segunda propriedade, mudamos a cor da fronteira para "verde do mar médio". Na terceira propriedade, usamos o "espaço de borda: 10px". Depois disso, usamos as mesmas propriedades na Tabela 2, mas usamos o "separado" em vez de "colapso" na propriedade "colapso da fronteira". Além disso, definimos a cor da borda como "roxa" e usamos o mesmo "espaço de borda". Agora, veja como funciona.

Não há mudança na Tabela 1. Não há espaçamento entre a borda da tabela e as células. A cor da tabela é a mesma. A propriedade "Border-Color" não afeta a tabela, pois usamos a borda "colapso" na Tabela 1. Mas na Tabela 2, você pode ver que a cor da borda da tabela e a borda da célula são diferentes. Além disso, há um espaçamento de "10px" entre a borda da célula e a borda da mesa.

Conclusão

Neste tutorial, usamos a propriedade "colapso da fronteira" e aprendemos a diferença quando usamos "separado" e "colapso" com a propriedade "colapso da fronteira". Também somos mostrados a saída na qual a diferença em "separada" e "colapso" é visível. Você pode facilmente obter esse conceito de como as duas propriedades são diferentes uma da outra. Você aprendeu o que acontece quando usamos a propriedade "separada" e "colapso" com a propriedade "Border-Collapse" no CSS.

C ++
Como usar o operador de atribuição de subtração em C ++
Em C ++, o -= é um operador de atribuição de subtração, subtraia dois valores laterais opostos do op...
Benny Hilll DDS
C nítido
O que é matemática.Método Max em C#
A matemática.O método max () em C# pode encontrar o valor máximo de dois valores especificados. São ...
Marlon Bernhard
Powershell
Como usar o comando Get-Command em PowerShell
O cmdlet Get-Command recebe uma lista de comandos disponíveis no computador. Além disso, pode import...
Rickey Greenholt