Kā izveidot tabulu tikai, izmantojot tagu un CSS

” atzīmes tajā.

---

---

Piemērs
Apsveriet šādu HTML koda piemēru, lai izveidotu tabulu:

< div klasē = 'divTable' >
< div klasē = 'headerRow' >
< div klasē = 'divCell' >< b > ID < / b >< / div >
< div klasē = 'divCell' >< b > Vārds < / b >< / div >
< div klasē = 'divCell' >< b > Vecums < / b >< / div >
< / div >
< div klasē = 'divRow' >
< div klasē = 'divCell' > 001 < / div >
< div klasē = 'divCell' > Smits < / div >
< div klasē = 'divCell' > 25 < / div >
< / div >
< div klasē = 'divRow' >
< div klasē = 'divCell' > 002 < / div >
< div klasē = 'divCell' > Džons < / div >
< div klasē = 'divCell' > 31 < / div >
< / div >
< div klasē = 'divRow' >
< div klasē = 'divCell' > 003 < / div >
< div klasē = 'divCell' > Čārlzs < / div >
< div klasē = 'divCell' > 28 < / div >
< / div >
< / div >

Iepriekš esošajā koda fragmentā:

• A '
  ' tags ir pievienots ar klasi ar nosaukumu ' divtabula ”.
• Iekšpusē ' div ' konteinera elementu, pievienojiet vēl vienu ' div ” konteinera elements ar klasi, kas deklarēta kā “ headerRow ”.
• Atkal pievienojiet trīs ' div 'elementi, kuriem ir klases ar nosaukumu ' divRinda ” ar trim apakškonteineriem ar „ divCell ” klase.
• Pēc tam pievienojiet trīs div elementus un pievienojiet ' ID ”, “ Vārds ' un ' Vecums ” tabulas galvenes rindā.
• Pēc tam katram div elementam norādiet vērtības “ID”, “Name” un “Age”.

Tas viss bija par to, kā izmantot div ” elementu, lai izveidotu tabulu. Tagad piemērosim tam CSS rekvizītus:

---

---

.divTable
{
displejs: galds;
platums :auto;
fons- krāsa :#eee;
robeža :1px ciets # 666666 ;
apmales atstarpe: 5 pikseļi;
}
.divRow
{
platums :auto;
displejs: tabula-rinda;
}
.divCell
{
platums :150 pikseļi;
pludiņš:pa kreisi;
displejs: tabula-kolonna;
fons- krāsa : rgb ( 212 , 209 , 209 ) ;
}

Iepriekš minētajā CSS stila elementā:

• Pievienojiet atlasītāju, kas attiecas uz ' divtabula ” (kas satur visas tabulas vērtības) un definējiet vēlamos CSS rekvizītus (t.i., displejs ”, “ platums ”, “ fona krāsa ”, “ robeža ' un ' apmales atstarpes ”) tabulas saturam.
• Pēc tam pievienojiet klases atlasītāju, kas atlasa elementus divRinda 'klase, lai pievienotu CSS' platums ' un ' displejs ” īpašības elementiem.
• Visbeidzot pievienojiet CSS stila rekvizītus elementiem sadaļā “ .divCell ” klases atlasītājs.

Tas izvadā izveidos tabulu un parādīs šādus rezultātus:

Tas viss bija par tabulas izveidi HTML, izmantojot tikai