Tabel alleen maken met behulp van tag en CSS

'tags erin.

---

---

Voorbeeld
Bekijk het volgende HTML-codevoorbeeld om een ​​tabel te maken:

< div klas = 'divTabel' >
< div klas = 'headerRij' >
< div klas = 'divCel' >< B > ID kaart < / B >< / div >
< div klas = 'divCel' >< B > Naam < / B >< / div >
< div klas = 'divCel' >< B > Leeftijd < / B >< / div >
< / div >
< div klas = 'divRij' >
< div klas = 'divCel' > 001 < / div >
< div klas = 'divCel' > Smid < / div >
< div klas = 'divCel' > 25 < / div >
< / div >
< div klas = 'divRij' >
< div klas = 'divCel' > 002 < / div >
< div klas = 'divCel' > John < / div >
< div klas = 'divCel' > 31 < / div >
< / div >
< div klas = 'divRij' >
< div klas = 'divCel' > 003 < / div >
< div klas = 'divCel' > Karel < / div >
< div klas = 'divCel' > 28 < / div >
< / div >
< / div >

In het codefragment hierboven:

• A '
  ” tag wordt toegevoegd met de klasse genaamd “ divTabel ”.
• Binnen in de ' div ” containerelement, voeg nog een toe “ div ” containerelement met de klasse gedeclareerd als “ headerRij ”.
• Voeg opnieuw drie toe ' div ” elementen die de klassen hebben met de naam “ divRij ” met drie subcontainers met de “ divCel ' klas.
• Voeg vervolgens drie div-elementen toe, voeg de ' ID kaart ”, “ Naam ' En ' Leeftijd ” in de koprij van de tabel.
• Geef daarna de waarden op voor 'ID', 'Naam' en 'Leeftijd' voor elk div-element.

Dit ging allemaal over het gebruik van de ' div ”-element om een ​​tabel te maken. Laten we nu de CSS-eigenschappen erop toepassen:

---

---

.divTabel
{
weergave: tafel;
breedte :auto;
achtergrond- kleur :#eeee;
grens :1px solide # 666666 ;
randafstand: 5px;
}
.divRij
{
breedte :auto;
weergave:tabelrij;
}
.divCel
{
breedte :150px;
zweven:links;
weergave:tabelkolom;
achtergrond- kleur : rgb ( 212 , 209 , 209 ) ;
}

In het bovenstaande CSS-stijlelement:

• Voeg een selector toe die verwijst naar de ' divTabel ' (dat alle tabelwaarden bevat) en definieer de gewenste CSS-eigenschappen (d.w.z. ' weergave ”, “ breedte ”, “ Achtergrond kleur ”, “ grens ' En ' grensafstand ”) voor de tabelinhoud.
• Voeg daarna een klassenkiezer toe die de elementen van de ' divRij ” class om de CSS toe te voegen “ breedte ' En ' weergave eigenschappen aan de elementen.
• Voeg ten slotte de CSS-stijleigenschappen toe aan de elementen in de ' .divCel 'klassenkiezer.

Hierdoor wordt een tabel in de uitvoer gemaakt en worden de volgende resultaten weergegeven:

Dat ging allemaal over het maken van een tabel in HTML met alleen