Como Criar Tabela Apenas Usando Tag e CSS

” tags dentro dele.

---

---

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

< div aula = 'divTabela' >
< div aula = 'cabeçalhoLinha' >
< div aula = 'divCell' >< b > EU IA < / b >< / div >
< div aula = 'divCell' >< b > Nome < / b >< / div >
< div aula = 'divCell' >< b > Idade < / b >< / div >
< / div >
< div aula = 'divRow' >
< div aula = 'divCell' > 001 < / div >
< div aula = 'divCell' > ferreiro < / div >
< div aula = 'divCell' > 25 < / div >
< / div >
< div aula = 'divRow' >
< div aula = 'divCell' > 002 < / div >
< div aula = 'divCell' > John < / div >
< div aula = 'divCell' > 31 < / div >
< / div >
< div aula = 'divRow' >
< div aula = 'divCell' > 003 < / div >
< div aula = 'divCell' > Carlos < / div >
< div aula = 'divCell' > 28 < / div >
< / div >
< / div >

No trecho de código acima:

• A '
  ” é adicionada com a classe chamada “ tabeladiv ”.
• Dentro de ' div ” elemento container, adicione outro “ div ” elemento container com a classe declarada como “ headerLow ”.
• Novamente, adicione três “ div ” elementos que têm as classes nomeadas “ divRow ” com três subcontêineres com o “ divCell ' aula.
• Em seguida, adicione três elementos div e adicione o “ EU IA ”, “ Nome ' e ' Idade ” na linha de cabeçalho da tabela.
• Depois disso, especifique os valores para “ID”, “Nome” e “Idade” para cada elemento div.

Isso foi tudo sobre como usar o “ div ” elemento para criar uma tabela. Agora, vamos aplicar as propriedades CSS a ele:

---

---

.divTabela
{
exibição: mesa;
largura :auto;
fundo- cor :#eee;
fronteira :1px sólido # 666666 ;
espaçamento entre bordas: 5px;
}
.divRow
{
largura :auto;
display:table-row;
}
.divCell
{
largura :150 pixels;
flutuar:esquerda;
exibição: coluna-tabela;
fundo- cor : rgb ( 212 , 209 , 209 ) ;
}

No elemento de estilo CSS acima:

• Adicione um seletor que se refere ao “ tabeladiv ” (que contém todos os valores da tabela) e defina as propriedades CSS desejadas (ou seja, “ mostrar ”, “ largura ”, “ cor de fundo ”, “ fronteira ' e ' espaçamento entre bordas ”) 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 de estilo CSS aos elementos no “ .divCell ” seletor de classe.

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

Isso foi tudo sobre como criar uma tabela em HTML usando apenas tags