O que é preenchimento de células de tabela no CSS

Por padrão, uma tabela tem células muito estreitas, o que pode levar a problemas de visibilidade. Para evitar isso, preferimos usar a propriedade CSS preenchendo as células de uma mesa. O preenchimento torna as células mais largas e maiores que o tamanho padrão. Como resultado, a tabela ficará bem com uma apresentação clara de dados.

Neste artigo, descreveremos como usar o preenchimento de células em uma tabela em CSS.

Como usar o preenchimento de células de tabela no CSS?

No CSS, o “preenchimento”A propriedade adiciona espaço vazio em torno do conteúdo do elemento. Também é utilizado para controlar o espaço de cada lado. Por exemplo, o preenchimento do lado esquerdo pode ser adicionado usando a propriedade de preenchimento-esquerda. Da mesma forma, as propriedades de capotagem, preenchimento e caçador de preenchimento podem ser usadas para criar o espaço ao redor do conteúdo do elemento da direita, superior e inferior, respectivamente.

Para adicionar preenchimento na célula da tabela, siga o exemplo dado.

Exemplo 1: Adicione o preenchimento nas células da tabela usando a propriedade de preenchimento

Em nossa página HTML, temos uma tabela com blocos muito estreitos. Vamos adicionar algum espaço nos blocos da tabela:

Aqui está o código HTML atual para nossa página da web:

Linux	Dica
LLC	EUA

Agora, vamos pegar o “TD”Ou célula de dados da tabela junto com a tabela e aplique o“estilo de borda"Propriedade como"sólido”. Dessa forma, você pode colocar a borda ao redor da mesa e seu conteúdo. Na próxima etapa, use o “preenchimento”Propriedade com o valor“1Rem”. Como resultado, a célula da tabela se tornará mais longa e mais ampla:

Salve seu arquivo HTML e inicie -o no navegador da web para visualizar o resultado:

Como você pode ver, o preenchimento foi adicionado com sucesso à célula da tabela:

Exemplo 2: Ajuste o preenchimento em células de mesa de cada lado

Neste exemplo, colocaremos nosso texto no canto superior esquerdo da célula. Para isso, atribuiremos o “preenchimento”Valor da propriedade como“0px 35px 30px 0px”, Onde o primeiro 0px é para o topo, o segundo valor de 35px é para o direito, 30px para o fundo e o quarto valor 0px é para o preenchimento lateral esquerdo:

Saída

Nós explicamos a você o que é preenchimento de células de tabela e como usá -lo.

Conclusão

As células da tabela têm espaço limitado por padrão, e isso pode causar problemas de legibilidade para o espectador. Para isso, o CSS “preenchimento”A propriedade é utilizada para adicionar algum espaço à célula da tabela. Neste guia, ajudamos você a entender qual é o preenchimento de células de tabela. Além disso, também mostramos exemplos diferentes relacionados à adição de preenchimento de células usando CSS.