Ako vytvoriť tabuľku iba pomocou značky a CSS

“.

---

---

Príklad
Ak chcete vytvoriť tabuľku, zvážte nasledujúci príklad kódu HTML:

< div trieda = 'divTable' >
< div trieda = 'headerRow' >
< div trieda = 'divCell' < b > ID < / b < / div >
< div trieda = 'divCell' < b > názov < / b < / div >
< div trieda = 'divCell' < b > Vek < / b < / div >
< / div >
< div trieda = 'divRow' >
< div trieda = 'divCell' > 001 < / div >
< div trieda = 'divCell' > Smith < / div >
< div trieda = 'divCell' > 25 < / div >
< / div >
< div trieda = 'divRow' >
< div trieda = 'divCell' > 002 < / div >
< div trieda = 'divCell' > John < / div >
< div trieda = 'divCell' > 31 < / div >
< / div >
< div trieda = 'divRow' >
< div trieda = 'divCell' > 003 < / div >
< div trieda = 'divCell' > Charles < / div >
< div trieda = 'divCell' > 28 < / div >
< / div >
< / div >

V útržku kódu vyššie:

• A “
  Značka “ sa pridá s triedou s názvom “ divTable “.
• Vnútri ' div “ kontajnerový prvok, pridajte ďalší “ div prvok kontajnera s triedou deklarovanou ako ' hlavičkaRow “.
• Opäť pridajte tri „ div 'prvky, ktoré majú triedy pomenované' divRow “ s tromi vedľajšími kontajnermi s “ divCell ' trieda.
• Potom pridajte tri prvky div pridajte „ ID “, “ názov “ a „ Vek “ v riadku hlavičky tabuľky.
• Potom zadajte hodnoty pre „ID“, „Name“ a „Vek“ pre každý prvok div.

Toto všetko bolo o tom, ako používať „ div ” prvok na vytvorenie tabuľky. Teraz naň aplikujme vlastnosti CSS:

---

---

.divTabuľka
{
displej: tabuľka;
šírka :auto;
pozadie- farba :#eee;
hranica : 1px plné # 666666 ;
border-spacing:5px;
}
.divRow
{
šírka :auto;
display:table-row;
}
.divCell
{
šírka :150px;
float:left;
display:tabuľka-stĺpec;
pozadie- farba : rgb ( 212 , 209 , 209 ) ;
}

Vo vyššie uvedenom prvku štýlu CSS:

• Pridajte selektor, ktorý odkazuje na „ divTable “ (ktorý obsahuje všetky hodnoty tabuľky) a definujte požadované vlastnosti CSS (t. j. „ displej “, “ šírka “, “ farba pozadia “, “ hranica “ a „ ohraničenie “) pre obsah tabuľky.
• Potom pridajte selektor triedy, ktorý vyberie prvky „ divRow ” na pridanie CSS “ šírka “ a „ displej vlastnosti prvkov.
• Nakoniec pridajte vlastnosti štýlu CSS do prvkov v „ .divCell ” výber triedy.

Tým sa vo výstupe vytvorí tabuľka a zobrazia sa nasledujúce výsledky:

To bolo všetko o vytvorení tabuľky v HTML iba pomocou značiek