Como estilizar tabelas usando CSS

Algumas propriedades CSS importantes e básicas são dadas abaixo que ajudam na alteração do estilo da tabela:

• Adicione fronteiras
• Ajuste as fronteiras
• Colapso fronteiras
• Ajuste a largura e a altura da tabela
• Alinhe o texto vertical
• Alinhe o texto horizontal
• Adicione o preenchimento
• Defina as cores das células

Agora discutiremos todas as propriedades CSS acima para estilizar tabelas HTML com exemplos adequados.

Tabelas de estilo usando propriedade de fronteira CSS

O CSS oferece uma propriedade de "fronteira" usada para adicionar fronteiras em uma mesa. Para adicionar uma fronteira, você pode adotar o seguinte exemplo.

Exemplo
O exemplo abaixo do rumo exibirá um sólido “preto"Fronteira com"1px“Largura para a tabela inteira“mesa", Cabeçalhos"º”E colunas“TD”:

Saída

Borda de mesa de estilo usando a propriedade de largura CSS

No exemplo anterior, você viu o método para inserir uma borda ao redor de uma mesa no CSS. O dado “fronteira”A propriedade não especifica a largura, pois você pode ajustá -la de acordo com seus requisitos. Para fazer isso, confira o exemplo fornecido.

Exemplo
Neste exemplo, criaremos uma tabela HTML e a estilizaremos de uma maneira que ele abrangerá toda a varredura com a largura total “100%”:

Largura total da tabela

Saída

Tabelas de estilo usando propriedade de colapso de fronteira CSS

Como você pode ver, a tabela criada no exemplo acima do rumo tem uma borda separada para cada linha e coluna que podem não dar uma olhada decente em um site. No entanto, o CSS permite que você colapso o fronteiras em uma única borda usando o “colapso da fronteira" propriedade.

Exemplo
Agora, vamos utilizar o “colapso da fronteira”Propriedade para estilizar a tabela criada com uma única borda para linhas e colunas:

As bordas da mesa entram em colapso

Saída

Tabela de estilo usando propriedades de largura e altura CSS

No CSS, o “largura" e "altura”As propriedades são utilizadas principalmente para mudar as matrizes da tabela. Por exemplo, no exemplo a seguir, definiremos a tabela largura como "90%" e a altura da célula do cabeçalho da mesa como “90px”:

Tabelas de estilo usando CSS

Exemplo para definir altura e largura:

Saída

Alinhamento de células de tabela de estilo usando a propriedade CSS Align Vertical

CSS “Alinhamento vertical”A propriedade é utilizada para alinhar o texto na célula da tabela de cima, inferior ou médio, mas você deve selecionar se deve alinhar a linha ou as colunas verticalmente. Vamos verificar o exemplo fornecido:

Tabelas de estilo em html

Exemplo de definir alinhamento vertical

O exemplo acima alinhará verticalmente o texto da célula da tabela à parte inferior:

Alinhamento de células de tabela de estilo usando propriedade CSS Horizontal-Align

CSS oferece “Alinhamento horizontal”Propriedade com o objetivo de alinhar o texto horizontalmente. Esta propriedade pode ajudar a alinhar o texto à esquerda, direita ou centro:

Tabelas de estilo em html

Exemplo de definir alinhamento horizontal

O exemplo acima é alinhar o texto adicionado na célula da tabela em relação a fundo:

Tabelas de estilo usando a propriedade de preenchimento CSS

O "preenchimentoA propriedade CSS é utilizada para controlar os espaços entre células de texto e borda. É usado principalmente para o

Exemplo

Tabelas de estilo em html

Exemplo de usar a propriedade de preenchimento

As imagens abaixo dadas significam que adicionamos com sucesso o preenchimento "20px" entre a borda e o texto da célula:

Tabelas de estilo usando a propriedade CSS Background-Color

CSS permite que você defina cores separadamente para cada tabela cada coluna, linha ou célula. Por exemplo, a tabela a seguir conterá o fundo do cabeçalho da mesa “º" como "laranja” cor e tudo "Nth-Child (par)”Mesmo número de linhas“tr" terá "cinza" cor de fundo:

Cabeçalho de mesa colorido

Saída

Conclusão

Para Estilo html Mesas, você pode utilizar Diferentes propriedades CSS Para adicionar e ajustar bordas, criando bordas de colapso, ajustando a largura e a altura da tabela, alinhando o texto horizontal ou verticalmente, adicionando preenchimento ou personalização de linhas, colunas ou células com as cores especificadas. Este blog demonstrou o uso de diferentes propriedades CSS para tabelas de estilo para uma página da web. Experimente e aproveite o estilo de mesas HTML de uma nova maneira!

• « É um SSD de 106 GB de 106 GB o suficiente para o meu laptop?
• Como denunciar alguém sobre discórdia »