Defina o espaçamento das células em CSS - HTML
Várias propriedades CSS são utilizadas para estilizar a tabela em HTML, como cor, borda, margem, preenchimento e muito mais. Infelizmente, o "Cellspacing" e "CellPaddingAtributos não são suportados no HTML5. No entanto, o CSS “espaçamento de fronteira”A propriedade é usada para definir o espaçamento das células e o CSS“preenchimento”A propriedade é para definir o preenchimento de células das células da tabela.
Os resultados do post são:
- Como criar tabela em html?
- Como definir o preenchimento de células em CSS?
- Como definir o espaçamento de células em tabelas HTML usando CSS?
Como criar tabela em html?
Para criar uma tabela em HTML, siga as instruções abaixo da lista abaixo:
- Na página HTML, primeiro, adicione um html “
" elemento.
- Então, adicione o
tag usada para especificar a linha do cabeçalho com o “Colspan" Valor do atributo "3”. Este atributo fará com que a célula seja igual a três colunas. - Depois disso, adicione alguns
tags para criar linhas em uma tabela. - A primeira linha contém os títulos com o
Tag. - Outras linhas contêm o html
Tags para especificar as colunas. Aqui está o código HTML para criar uma tabela simples:
Mesa Núm. da lista Nome do estudante Cursos 1 John Fundamentos de c++ 2 Lisa Fundamentos de Java 3 Diana Interação do computador humano Vamos mudar para a seção CSS para estilizar a tabela.
Elemento de “tabela” de estilo
mesa
margem: automático;
Border: 2px Solid #0E5E6F;
Background-Color: #fdf3e1;
Size da fonte: 16px;
A explicação das propriedades do CSS acima está listada abaixo:
- ““margem”A propriedade adiciona espaços ao redor do elemento.
- ““fronteira”É uma propriedade abreviada que adiciona uma borda ao redor do elemento, especificando a largura da borda, o estilo de borda e a cor da borda.
- ““cor de fundo”A propriedade aplica a cor ao fundo do elemento.
- ““tamanho da fonte”É a propriedade para definir o tamanho da fonte do elemento.
Elementos de estilo “th” e “td”
th, td
borda: 2px Solid #404258;
Background-Color: #9ad2d8;
O html
e Os elementos são estilizados usando as propriedades "Border" e "Background-Color". Saída
Vamos dar uma volta para definir o espaçamento das células e o preenchimento de células da tabela HTML.
Como definir o espaçamento das células em CSS?
Como sabemos, o HTML5 não suporta o “Cellspacing" e "CellPadding" atributos. No entanto, a propriedade CSS “espaçamento de fronteira”Pode definir a distância entre as fronteiras da célula adjacente como esta:
mesa
espaçamento de borda: 15px;
Aqui está a saída que mostra o efeito do “espaçamento de fronteira”Propriedade no elemento da tabela:
Como definir o preenchimento de células em CSS?
Para definir o preenchimento de células na tabela HTML, o CSS “preenchimento”Propriedade é especificada. A propriedade de preenchimento adiciona espaço dentro da fronteira da célula.
Agora, aplique a propriedade CSS preenchendo o “º" e "TD”Elementos da tabela da seguinte forma:
th, td
preenchimento: 10px;
Na saída abaixo, pode -se observar que os espaços são adicionados ao redor do conteúdo da célula:
Compilamos exemplos para definir o espaçamento das células e o preenchimento de células em HTML usando CSS.
Conclusão
HTML5 não suporta os atributos de espaçamento e preenchimento de células. Para definir esses fatores, primeiro, crie uma tabela em HTML e aplique o CSS “espaçamento de fronteira”Propriedade e“preenchimento" propriedade. A propriedade de espaçamento de fronteira CSS é utilizado para definir o espaçamento das células. No entanto, o preenchimento é usado para ajustar o preenchimento de células. Este post forneceu exemplos detalhados de como definir espaçamento e preenchimento de células no CSS.
- Então, adicione o