Cum se creează un tabel numai folosind Tag și CSS

” etichete în interiorul ei.

---

---

Exemplu
Luați în considerare următorul exemplu de cod HTML pentru a crea un tabel:

< div clasă = 'divTable' >
< div clasă = 'headerRow' >
< div clasă = 'divCell' >< b > ID < / b >< / div >
< div clasă = 'divCell' >< b > Nume < / b >< / div >
< div clasă = 'divCell' >< b > Vârstă < / b >< / div >
< / div >
< div clasă = 'divRow' >
< div clasă = 'divCell' > 001 < / div >
< div clasă = 'divCell' > Smith < / div >
< div clasă = 'divCell' > 25 < / div >
< / div >
< div clasă = 'divRow' >
< div clasă = 'divCell' > 002 < / div >
< div clasă = 'divCell' > Ioan < / div >
< div clasă = 'divCell' > 31 < / div >
< / div >
< div clasă = 'divRow' >
< div clasă = 'divCell' > 003 < / div >
< div clasă = 'divCell' > Charles < / div >
< div clasă = 'divCell' > 28 < / div >
< / div >
< / div >

În fragmentul de cod de mai sus:

• A '
  Eticheta ” este adăugată cu clasa numită “ divTable ”.
• În interiorul ' div ” element container, adăugați un alt „ div ” element container cu clasa declarată ca „ headerRow ”.
• Din nou, adăugați trei „ div ” elemente care au clasele numite “ divRow ” cu trei subcontainere cu “ divCell ” clasa.
• Apoi, adăugați trei elemente div adăugați „ ID ”, “ Nume ' și ' Vârstă ” în rândul de antet al tabelului.
• După aceea, specificați valorile pentru „ID”, „Nume” și „Vârsta” pentru fiecare element div.

Acesta a fost totul despre cum să folosiți „ div ” element pentru a crea un tabel. Acum, să-i aplicăm proprietățile CSS:

---

---

.divTable
{
afisare: tabel;
lăţime :auto;
fundal- culoare :#eee;
frontieră :1px solid # 666666 ;
spațiere-chenar: 5px;
}
.divRow
{
lăţime :auto;
display:table-row;
}
.divCell
{
lăţime :150px;
plutește la stânga;
display:tabel-coloană;
fundal- culoare : rgb ( 212 , 209 , 209 ) ;
}

În elementul de stil CSS de mai sus:

• Adăugați un selector care se referă la „ divTable ” (care conține toate valorile tabelului) și definiți proprietățile CSS dorite (adică, „ afişa ”, “ lăţime ”, “ culoare de fundal ”, “ frontieră ' și ' spaţierea graniţelor ”) pentru conținutul tabelului.
• După aceea, adăugați un selector de clasă care selectează elementele „ divRow ” clasa pentru a adăuga CSS ” lăţime ' și ' afişa ” proprietăți ale elementelor.
• În cele din urmă, adăugați proprietățile stilului CSS la elementele din „ .divCell ” selector de clasă.

Aceasta va crea un tabel în rezultat și va afișa următoarele rezultate:

Acesta a fost tot despre crearea unui tabel în HTML folosind numai etichete