Hvordan lage tabeller bare ved å bruke tag og CSS

'-tagger inne i den.

---

---

Eksempel
Tenk på følgende HTML-kodeeksempel for å lage en tabell:

< div klasse = 'divTable' >
< div klasse = 'headerRow' >
< div klasse = 'divCell' >< b > ID < / b >< / div >
< div klasse = 'divCell' >< b > Navn < / b >< / div >
< div klasse = 'divCell' >< b > Alder < / b >< / div >
< / div >
< div klasse = 'divRow' >
< div klasse = 'divCell' > 001 < / div >
< div klasse = 'divCell' > Smith < / div >
< div klasse = 'divCell' > 25 < / div >
< / div >
< div klasse = 'divRow' >
< div klasse = 'divCell' > 002 < / div >
< div klasse = 'divCell' > John < / div >
< div klasse = 'divCell' > 31 < / div >
< / div >
< div klasse = 'divRow' >
< div klasse = 'divCell' > 003 < / div >
< div klasse = 'divCell' > Charles < / div >
< div klasse = 'divCell' > 28 < / div >
< / div >
< / div >

I kodebiten ovenfor:

• en '
  '-taggen er lagt til med klassen kalt ' divTable '.
• Inne i ' div ' containerelement, legg til et nytt ' div ' beholderelement med klassen erklært som ' headerRow '.
• Igjen, legg til tre ' div 'elementer som har klassene kalt ' divRow ' med tre underbeholdere med ' divCell ' klasse.
• Legg deretter til tre div-elementer og legg til ' ID ', ' Navn ' og ' Alder ” i overskriftsraden i tabellen.
• Etter det, spesifiser verdiene for 'ID', 'Navn' og 'Alder' for hvert div-element.

Dette handlet om hvordan du bruker ' div ' element for å lage en tabell. La oss nå bruke CSS-egenskapene på den:

---

---

.divTable
{
display: tabell;
bredde :auto;
bakgrunn- farge :#eee;
grense :1px solid # 666666 ;
border-spacing:5px;
}
.divRow
{
bredde :auto;
display:tabell-rad;
}
.divCell
{
bredde :150px;
flyte:venstre;
display:tabell-kolonne;
bakgrunn- farge : rgb ( 212 , 209 , 209 ) ;
}

I CSS-stilelementet ovenfor:

• Legg til en velger som refererer til ' divTable ' (som inneholder alle tabellverdiene) og definere de ønskede CSS-egenskapene (dvs. ' vise ', ' bredde ', ' bakgrunnsfarge ', ' grense ' og ' grenseavstand ”) for tabellinnholdet.
• Etter det legger du til en klassevelger som velger elementene i ' divRow ' klasse for å legge til CSS ' bredde ' og ' vise ' egenskaper til elementene.
• Til slutt, legg til CSS-stilegenskapene til elementene i ' .divCell ” klassevelger.

Dette vil lage en tabell i utdataene og vise følgende resultater:

Det handlet om å lage en tabell i HTML med bare