Como criar tabela apenas usando tag e css

Como criar tabela apenas usando tag e css
Geralmente, uma tabela em HTML é criada através do “" marcação. No entanto, a maioria dos desenvolvedores da Web para iniciantes pensa que essa é a única maneira de criar uma tabela em HTML. Mas também é possível criar uma tabela usando apenas o “”Tags no HTML e aplicando as propriedades do estilo CSS no conteúdo da div.

Este post fornecerá uma solução completa para como criar uma tabela usando apenas o “”Propriedades de tag e CSS.

Como criar tabela através de tags e css?

Os desenvolvedores podem criar uma tabela em html adicionando um principal “”Tag para criar uma tabela e depois múltiplas“”Tags dentro dele.

Exemplo
Considere o seguinte exemplo de código HTML para criar uma tabela:



EU IA
Nome
Idade


001
Smith
25


002
John
31


003
Charles
28

No trecho de código acima:

  • A "”A tag é adicionada com a classe chamada“Divtable”.
  • Dentro de "div”Elemento de contêiner, adicione outro“div”Elemento de contêiner com a classe declarada como“Headerrow”.
  • Novamente, adicione três “div”Elementos que têm as classes chamadas“divrow”Com três sub -contêineres com o“Divcell" aula.
  • Em seguida, adicione três elementos div Adicione o “EU IA","Nome" e "Idade”Na linha do cabeçalho da tabela.
  • Depois disso, especifique os valores para "id", "nome" e "idade" para cada elemento div.

Isso era tudo sobre como usar o “div”Elemento para criar uma tabela. Agora, vamos aplicar as propriedades do CSS:

.Divtable

exibição: tabela;
Largura: Auto;
Background-Color: #eee;
borda: 1px Solid #666666;
espaçamento de borda: 5px;

.divrow

Largura: Auto;
Exibição: tabela-fila;

.Divcell

Largura: 150px;
flutuar: esquerda;
Exibir: coluna de tabela;
Background-Color: RGB (212, 209, 209);

No elemento de estilo CSS acima:

  • Adicione um seletor que se refere ao “Divtable”(Que contém todos os valores da tabela) e define as propriedades CSS desejadas (i.e., ““mostrar","largura","cor de fundo","fronteira" e "espaçamento de fronteira”) Para o conteúdo da tabela.
  • Depois disso, adicione um seletor de classe que seleciona os elementos do “divrow”Classe para adicionar o CSS“largura" e "mostrar”Propriedades para os elementos.
  • Por fim, adicione as propriedades do estilo CSS aos elementos no “.Divcell”Seletor de classe.

Isso criará uma tabela na saída e exibirá os seguintes resultados:

Isso se tratava de criar uma tabela em HTML usando apenas tags e propriedades CSS.

Conclusão

Uma tabela em HTML também pode ser criada apenas através da tag Div e das propriedades do estilo CSS. Para fazer isso, crie um elemento de contêiner principal separado para criar a tabela e alguns elementos separados de contêiner dentro que para criar as linhas da tabela. Cada elemento de contêiner de div terá seu respectivo ID ou classes. Além disso, os seletores de classe são usados ​​para selecionar os elementos da div e aplicar as propriedades CSS a eles. Esta posta.