Como você especifica o preenchimento de tabela no CSS

Como você especifica o preenchimento de tabela no CSS
A tabela é um elemento importante do HTML utilizado para organizar e gerenciar os dados na forma de linhas e colunas. Ele segue um fluxo semelhante ao gráfico e pode armazenar imagens, estatísticas e dados pessoais. Além disso, os usuários podem estilizar o “”Elemento aplicando várias propriedades CSS. Por exemplo, definir o preenchimento dentro das células da tabela e muito mais.

Este post demonstrará:

  • Como fazer uma mesa em html?
  • Como especificar um preenchimento de tabela no CSS?

Como fazer uma mesa em html?

Para criar/fazer uma tabela em html, experimente o procedimento declarado.

Etapa 1: Crie um contêiner "div"
Primeiro, crie um “div“Contêiner com a ajuda do“”Tag e atribua um atributo de classe com um nome específico.

Etapa 2: faça a tabela
Em seguida, utilize o “

”Elemento junto com o“contente”Classe para criar uma tabela dentro da div.

Etapa 3: Adicione linhas de tabela
Agora, insira o seguinte elemento entre o “

”Tag para fazer células de tabela e dados de incorporação:

  • ““
”A tag é usada para especificar as linhas na tabela.
  • Depois disso, adicione o “
  • ”Tags para definir uma célula de cabeçalho.
  • ““
  • ”Tag entre o primeiro“
    ”É usado para adicionar as células de dados na tabela:










    Nome Countário
    Hafsi Reino Unido
    Edward Índia
    Bella EUA
    Coelhinho Paquistão
    Jack África
    Casar Bangladesh
    Jazzé Cingapura
    Jenny Irã

    Pode -se observar que a tabela foi criada com sucesso:

    Como especificar um preenchimento de tabela no CSS?

    Para especificar o preenchimento ou espaçamento da tabela, você pode usar várias propriedades CSS, incluindo “espaçamento de fronteira","espaçamento das células", e "acumulado de células”. Estes são métodos válidos para produzir o espaço.

    Para especificar um preenchimento de tabela no CSS, siga as instruções fornecidas.

    Etapa 1: Elemento de estilo “div”
    Primeiro, acesse o “div”Contêiner com a ajuda do atributo de classe atribuído“.Principal-Div”. Em seguida, aplique as propriedades CSS abaixo:

    .main-div
    Margem: 20px 150px;
    Background-Color: Bisque;
    borda: 4px azul pontilhado;

    Aqui:

    • ““margem”É utilizado para especificar o espaço em branco fora do limite do elemento.
    • ““cor de fundo”É usado para definir a cor de fundo do elemento.
    • ““fronteira”Define um limite ao redor do elemento.

    Saída

    Etapa 2: Defina o preenchimento de mesa
    Para definir o preenchimento da tabela, acesse o “mesa.contente" aula. Depois disso, aplique as propriedades CSS abaixo codificadas:

    mesa.contente
    borda: 5px RGB sólido (228, 15, 15);
    espaçamento de borda: 12px;
    margem: 50px 150px;
    cor de fundo: RGB (247, 209, 139);

    Aqui o "espaçamento de fronteira”A propriedade é utilizada para definir a distância ou espaço entre as fronteiras e as células adjacentes na tabela.

    Como você pode ver, o preenchimento de mesa foi adicionado:

    Etapa 3: Células de dados da tabela de estilo
    Para aplicar CSS em um elemento específico da tabela, primeiro, acessá -lo com a classe de tabela como “mesa.contente”E nome da tag de elemento como“TD”:

    mesa.Conteúdo TD
    Fronteira: RGB sólido (233, 36, 10) 1px;

    De acordo com o snippet de código fornecido, aplicamos o “fronteira”Propriedade nas células de dados:

    Isso se tratava de especificar o preenchimento de tabela no CSS.

    Conclusão

    Para especificar o preenchimento da tabela, primeiro, crie uma tabela com a ajuda do “

    " marcação. Em seguida, acesse a tabela no CSS usando o nome da tag e a classe atribuída. Depois disso, aplique o “espaçamento de fronteiraPropriedade em cima da mesa para ajustar o espaço entre as fronteiras de células adjacentes. Este post explicou o procedimento para especificar o preenchimento de tabela no CSS.