O preenchimento celular é definido como o espaço no meio dos dados da célula e da borda. Quando colocamos os dados nas células da tabela, devemos criar espaço entre a borda da célula e seus dados. Este espaçamento é conhecido como preenchimento de células no CSS. Podemos definir o preenchimento esquerdo da célula, preenchimento direito, preenchimento superior e preenchimento de fundo separadamente, bem como preenchimento combinado para todos os lados. Se não definirmos esse preenchimento de células em nossas células de tabela, ela será definida por padrão de acordo com os dados das células. Temos propriedades diferentes no CSS para definir este preenchimento de células.
Ao usar a propriedade "preenchimento", ajusta o preenchimento nos quatro lados dentro da célula. Mas se queremos definir o preenchimento apenas de um lado, também temos as propriedades para definir isso. Neste guia, exploraremos a propriedade de preenchimento de células no CSS e realizaremos exemplos aqui nos quais usaremos essas propriedades.
Propriedades para preenchimento de células no CSS:
Preenchimento: valor.
Preparo-esquerda: Valor.
Right-right: valor.
Top-top: valor.
Botting-Bottom: Valor.
Exemplo 1:
Como devemos aplicar as propriedades de preenchimento de células em nossas células de mesa, devemos construir a tabela. Primeiro, usaremos essas propriedades. Podemos criar a tabela em html adicionando algumas tags que são usadas para construir a tabela. Aqui, vamos construir uma tabela em html abrindo o arquivo. Depois de adicionar tags básicas do HTML, começamos a construir a tabela no corpo do código HTML. Nós colocamos o “
" marcação. Nesta tag, vamos criar a linha do cabeçalho usando o "TR" e depois a tag "Th". Na tag "Th", estamos adicionando alguns dados aqui. Então, usamos novamente "tr" para cada linha.
Em seguida, estamos usando a tag "TD" nesta tag "tr". E adicione dados neste "TD" para que adicionem dados às linhas da tabela. Depois de concluir este código, devemos salvá -lo com o “.Extensão do arquivo HTML ”e devemos vincular este arquivo ao arquivo CSS dentro da" cabeça "deste arquivo html. Usaremos esta tabela em todos os exemplos neste guia, mas aplicaremos diferentes propriedades de preenchimento de células em cada exemplo. Agora, depois de salvar isso, vamos avançar em direção ao arquivo CSS no qual usaremos as propriedades do CSS. Portanto, todas essas propriedades serão aplicadas aqui nesta tabela.
Nós criamos um título em html. Então, aqui vamos estilizá -lo um pouco usando a propriedade "cor". Definimos a cor da fonte como "marrom". Em seguida, também definimos sua “família de fontes” e usamos o “argelino” como o valor desta propriedade. Em seguida, aplique a borda "2px" em toda a mesa. O tipo é definido aqui para "sólido" e a cor da "borda" é "marrom".
Em seguida, a "largura" da tabela é definida. Colocamos "Auto" aqui para que a largura ajuste automaticamente de acordo com os dados. Depois disso, a propriedade "colapso da fronteira" está aqui e é "colapso". Então, a fronteira da tabela será desmoronada. Agora, precisamos criar uma borda para cada célula. Então, para isso, estamos novamente utilizando a propriedade "fronteira" para "Th" e "TD". Os dados escritos nessas células são definidos para a cor "preta" na propriedade "cor".
Agora, estamos definindo o preenchimento de células com a ajuda da propriedade "preenchimento" no CSS e defina o preenchimento "15px" aqui. Ele criará um espaço de 15 px entre a célula e os dados da parte superior, esquerda, inferior e lados direito. Se queremos aplicar o mesmo preenchimento nos quatro lados, usamos esta propriedade "preenchimento". Esta propriedade aplica o preenchimento por todos os lados.
Nesta saída, observe que há um espaço entre o texto que está escrito dentro da célula e a borda desta célula. O espaço dos quatro lados é igual. Este é o preenchimento de células no CSS e esta propriedade de "preenchimento" define o estofamento igual em todos os lados.
Exemplo # 2:
Aqui, o código é o mesmo que discutimos no primeiro exemplo. Nós apenas mudamos a "cor" do cabeçalho e a cor da "borda" da célula para "verde". Quando usamos esta propriedade "preenchimento-esquerda", ela ajusta o preenchimento de células apenas no lado esquerdo. Definimos o valor de "preenchimento-esquerda" como "60px". Ele criará espaço de 60px no lado esquerdo dos dados da célula e na borda da célula.
Nesta saída, há um espaço no lado esquerdo entre os dados e a borda de todas as células. Isso ocorre porque usamos a propriedade "preenchimento para a esquerda" aqui. Então, ele cria o espaço desejado apenas no lado esquerdo e não aplica esse preenchimento nos três lados restantes.
Exemplo # 3:
Neste exemplo, simplesmente mudamos a "cor" do cabeçalho, a cor da "borda" da célula e a mesa para "laranja". Quando usamos a propriedade "Rotding-Right", ela afeta apenas o preenchimento das células no lado direito. Ele abrirá um espaço entre os dados presentes dentro da célula e a borda direita da célula. O valor de "Right-right" aqui está definido como "50px.”Isso deixará uma lacuna de 50 px entre os dados da célula e a borda da célula no lado direito.
Você pode ver que existe um espaço apenas no lado direito entre os dados e a borda de todas as células. Isso se deve ao uso da propriedade "de acrescentagem" que está sendo usada. Como resultado, ele apenas cria o preenchimento necessário no lado direito e ignora os três lados restantes.
Exemplo # 4:
Aqui, simplesmente alteramos a "cor" do cabeçalho, a "borda" das células e a borda da tabela para "azul". Estamos utilizando a propriedade CSS “Top-top” agora. A propriedade "tapdding-top" afeta apenas o preenchimento de células no topo quando é usado. O "top de preenchimento" está definido como "55px" neste caso. No topo, haverá uma lacuna de 55px entre os dados da célula e a borda da célula.
Aqui, no lado superior de cada célula, há um espaço entre os dados e o limite da célula. Isto é devido ao uso da propriedade "Padding-Top". Como resultado, ele adiciona apenas o preenchimento necessário ao lado superior.
Exemplo # 5:
Agora, estamos mudando a "cor" do cabeçalho, "borda" das células e a tabela para "roxo". Estamos usando a propriedade CSS, “Botting-Bottom”. Quando o atributo "acolchoado" é aplicado, ele apenas define o preenchimento das células no fundo. Ele fará um preenchimento celular entre os dados dentro da célula e a borda inferior da célula. Nesse cenário, o “Botting-Bottom” está definido como “53px”.
Aqui, você pode observar o espaço entre os dados dentro da célula e a borda inferior da célula. À medida que usamos a propriedade “Botting-Bottom”, ela adiciona o preenchimento de células apenas na parte inferior da célula.
Conclusão:
Este guia explicou o conceito de preenchimento de células em CSS em detalhes. Discutimos diferentes propriedades de preenchimento aqui e utilizamos essas propriedades em diferentes códigos CSS. Estabelecemos que, no CSS, ajustamos o preenchimento de células em todos os lados da célula usando a propriedade "preenchimento" e aplicamos o preenchimento de um lado apenas usando diferentes propriedades de preenchimento. Observamos uma variedade de códigos nos quais usamos essas propriedades, bem como os efeitos dessas propriedades na célula da tabela. Você definirá o preenchimento de células depois de ler este guia completamente.
