Jak vytvořit tabulku pouze pomocí značek a CSS

“ tagy uvnitř.

---

---

Příklad
Chcete-li vytvořit tabulku, zvažte následující příklad kódu HTML:

< div třída = 'divTable' >
< div třída = 'řádek záhlaví' >
< div třída = 'divCell' < b > ID < / b < / div >
< div třída = 'divCell' < b > název < / b < / div >
< div třída = 'divCell' < b > Stáří < / b < / div >
< / div >
< div třída = 'divRow' >
< div třída = 'divCell' > 001 < / div >
< div třída = 'divCell' > Kovář < / div >
< div třída = 'divCell' > 25 < / div >
< / div >
< div třída = 'divRow' >
< div třída = 'divCell' > 002 < / div >
< div třída = 'divCell' > John < / div >
< div třída = 'divCell' > 31 < / div >
< / div >
< div třída = 'divRow' >
< div třída = 'divCell' > 003 < / div >
< div třída = 'divCell' > Charlesi < / div >
< div třída = 'divCell' > 28 < / div >
< / div >
< / div >

Ve výše uvedeném úryvku kódu:

• A '
  Značka “ je přidána s třídou s názvem “ divTable “.
• Uvnitř ' div 'kontejnerový prvek, přidejte další' div prvek kontejneru s třídou deklarovanou jako ' záhlavíŘádek “.
• Znovu přidejte tři “ div 'prvky, které mají třídy pojmenované' divRow “ se třemi dílčími kontejnery s “ divCell “třída.
• Poté přidejte tři prvky div přidejte „ ID “, “ název ' a ' Stáří “ v řádku záhlaví tabulky.
• Poté zadejte hodnoty pro „ID“, „Jméno“ a „Věk“ pro každý prvek div.

To vše bylo o tom, jak používat „ div ” prvek pro vytvoření tabulky. Nyní na něj použijeme vlastnosti CSS:

---

---

.divTabulka
{
displej: tabulka;
šířka :auto;
Pozadí- barva :#eee;
okraj : 1px plné # 666666 ;
border-spacing:5px;
}
.divRow
{
šířka :auto;
display:table-row;
}
.divCell
{
šířka :150px;
plavat vlevo;
display:table-column;
Pozadí- barva : rgb ( 212 , 209 , 209 ) ;
}

Ve výše uvedeném prvku stylu CSS:

• Přidejte selektor, který odkazuje na „ divTable “ (který obsahuje všechny hodnoty tabulky) a definujte požadované vlastnosti CSS (tj. Zobrazit “, “ šířka “, “ barva pozadí “, “ okraj ' a ' ohraničení “) pro obsah tabulky.
• Poté přidejte selektor třídy, který vybere prvky „ divRow ”třída pro přidání CSS” šířka ' a ' Zobrazit ” vlastnosti k prvkům.
• Nakonec přidejte vlastnosti stylu CSS k prvkům v „ .divCell ” výběr třídy.

Tím se ve výstupu vytvoří tabulka a zobrazí se následující výsledky:

To bylo vše o vytvoření tabulky v HTML pouze pomocí značek