Hogyan készítsünk táblázatot csak címke és CSS használatával

” címkék benne.

---

---

Példa
A táblázat létrehozásához vegye figyelembe a következő HTML-kód példát:

< div osztály = 'divTable' >
< div osztály = 'headerRow' >
< div osztály = 'divCell' >< b > ID < / b >< / div >
< div osztály = 'divCell' >< b > Név < / b >< / div >
< div osztály = 'divCell' >< b > Kor < / b >< / div >
< / div >
< div osztály = 'divRow' >
< div osztály = 'divCell' > 001 < / div >
< div osztály = 'divCell' > Kovács < / div >
< div osztály = 'divCell' > 25 < / div >
< / div >
< div osztály = 'divRow' >
< div osztály = 'divCell' > 002 < / div >
< div osztály = 'divCell' > János < / div >
< div osztály = 'divCell' > 31 < / div >
< / div >
< div osztály = 'divRow' >
< div osztály = 'divCell' > 003 < / div >
< div osztály = 'divCell' > Károly < / div >
< div osztály = 'divCell' > 28 < / div >
< / div >
< / div >

A fenti kódrészletben:

• egy '
  ' címke hozzáadva a ' nevű osztályhoz divTable ”.
• Benne ' div ” tárolóelem, adjon hozzá egy másikat div ' konténer elem, amelynek osztálya '' headerRow ”.
• Ismét adjunk hozzá hármat div ' elemek, amelyek osztályai '' divRow ' három alkonténerrel a következővel: ' divCell ' osztály.
• Ezután adjon hozzá három div elemet, és adja hozzá a ' ID ”, „ Név ” és „ Kor ” a táblázat fejlécében.
• Ezt követően adja meg az „ID”, „Name” és „Age” értékeket minden div elemhez.

Ez az egész arról szólt, hogyan kell használni a ' div ” elemet egy táblázat létrehozásához. Most alkalmazzuk rá a CSS-tulajdonságokat:

---

---

.divTable
{
kijelző: asztal;
szélesség :auto;
háttér- szín :#eee;
határ :1px szilárd # 666666 ;
keret-távolság: 5 képpont;
}
.divRow
{
szélesség :auto;
display:table-row;
}
.divCell
{
szélesség :150px;
balra lebeg;
kijelző:tábla-oszlop;
háttér- szín : rgb ( 212 , 209 , 209 ) ;
}

A fenti CSS stíluselemben:

• Adjon hozzá egy választót, amely a „ divTable ” (amely tartalmazza az összes táblaértéket), és határozza meg a kívánt CSS-tulajdonságokat (azaz „ kijelző ”, „ szélesség ”, „ háttérszín ”, „ határ ” és „ határtávolság ”) a táblázat tartalmához.
• Ezután adjunk hozzá egy osztályválasztót, amely kiválasztja a „ divRow ' osztály a CSS hozzáadásához ' szélesség ” és „ kijelző ” tulajdonságait az elemekhez.
• Végül adja hozzá a CSS stílus tulajdonságait a ' .divCell ” osztályválasztó.

Ez létrehoz egy táblázatot a kimenetben, és a következő eredményeket jeleníti meg:

Ez egy táblázat létrehozásáról szólt HTML-ben, csak