Hur man skapar en tabell endast med tag och CSS

” taggar inuti den.

---

---

Exempel
Tänk på följande HTML-kodexempel för att skapa en tabell:

< div klass = 'divTable' >
< div klass = 'headerRow' >
< div klass = 'divCell' >< b > ID < / b >< / div >
< div klass = 'divCell' >< b > namn < / b >< / div >
< div klass = 'divCell' >< b > Ålder < / b >< / div >
< / div >
< div klass = 'divRow' >
< div klass = 'divCell' > 001 < / div >
< div klass = 'divCell' > Smed < / div >
< div klass = 'divCell' > 25 < / div >
< / div >
< div klass = 'divRow' >
< div klass = 'divCell' > 002 < / div >
< div klass = 'divCell' > John < / div >
< div klass = 'divCell' > 31 < / div >
< / div >
< div klass = 'divRow' >
< div klass = 'divCell' > 003 < / div >
< div klass = 'divCell' > Charles < / div >
< div klass = 'divCell' > 28 < / div >
< / div >
< / div >

I kodavsnittet ovan:

• en '
  '-taggen läggs till med klassen som heter ' divTable ”.
• Inuti ' div ' containerelement, lägg till ytterligare ' div ' containerelement med klassen deklarerad som ' headerRow ”.
• Återigen, lägg till tre ' div ' element som har klasserna som heter ' divRow ' med tre underbehållare med ' divCell ' klass.
• Lägg sedan till tre div-element lägg till ' ID ”, “ namn ' och ' Ålder ” i rubrikraden i tabellen.
• Efter det, ange värdena för 'ID', 'Namn' och 'Ålder' för varje div-element.

Det här handlade om hur man använder ' div ' element för att skapa en tabell. Låt oss nu tillämpa CSS-egenskaperna på det:

---

---

.divTable
{
display: tabell;
bredd :bil;
bakgrund- Färg :#eee;
gräns :1px fast # 666666 ;
border-spacing:5px;
}
.divRow
{
bredd :bil;
display:tabell-rad;
}
.divCell
{
bredd :150px;
flyta till vänster;
display:tabell-kolumn;
bakgrund- Färg : rgb ( 212 , 209 , 209 ) ;
}

I ovanstående CSS-stilelement:

• Lägg till en väljare som refererar till ' divTable ” (som innehåller alla tabellvärden) och definiera önskade CSS-egenskaper (dvs. visa ”, “ bredd ”, “ bakgrundsfärg ”, “ gräns ' och ' gränsavstånd ”) för tabellinnehållet.
• Lägg sedan till en klassväljare som väljer elementen i ' divRow ' klass för att lägga till CSS ' bredd ' och ' visa ” egenskaper till elementen.
• Lägg slutligen till CSS-stilegenskaperna till elementen i ' .divCell ” klassväljare.

Detta skapar en tabell i utgången och visar följande resultat:

Det handlade om att skapa en tabell i HTML med endast