Sådan opretter du kun tabel ved hjælp af tag og CSS

” tags inde i den.

---

---

Eksempel
Overvej følgende HTML-kodeeksempel for at oprette en tabel:

< div klasse = 'divTabel' >
< 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 kodestykket ovenfor:

• en '
  ' tag tilføjes med klassen med navnet ' divTabel ”.
• Inde i ' div ' containerelement, tilføj endnu et ' div ' containerelement med klassen erklæret som ' headerRow ”.
• Tilføj igen tre ' div ' elementer, der har klasserne navngivet ' divRow ' med tre underbeholdere med ' divCell ' klasse.
• Tilføj derefter tre div-elementer tilføj ' ID ', ' Navn ' og ' Alder ” i tabellens overskriftsrække.
• Angiv derefter værdierne for 'ID', 'Navn' og 'Alder' for hvert div-element.

Det hele handlede om, hvordan man bruger ' div ” element for at oprette en tabel. Lad os nu anvende CSS-egenskaberne på det:

---

---

.divTabel
{
display: tabel;
bredde :auto;
baggrund- farve :#eee;
grænse :1px fast # 666666 ;
border-spacing:5px;
}
.divRow
{
bredde :auto;
display: tabel-række;
}
.divCell
{
bredde :150px;
flyde:venstre;
display:tabel-kolonne;
baggrund- farve : rgb ( 212 , 209 , 209 ) ;
}

I ovenstående CSS-stilelement:

• Tilføj en vælger, der henviser til ' divTabel ' (som indeholder alle tabelværdierne) og definere de ønskede CSS-egenskaber (dvs. ' Skærm ', ' bredde ', ' baggrundsfarve ', ' grænse ' og ' grænse-afstand ”) for tabelindholdet.
• Tilføj derefter en klassevælger, der vælger elementerne i ' divRow ' klasse for at tilføje CSS ' bredde ' og ' Skærm ” egenskaber til elementerne.
• Til sidst skal du tilføje CSS-stilegenskaberne til elementerne i ' .divCell ” klassevælger.

Dette vil oprette en tabel i outputtet og vise følgende resultater:

Det handlede om at oprette en tabel i HTML kun ved hjælp af