Kuinka luoda taulukko vain tunnisteen ja CSS:n avulla

”tunnisteet sen sisällä.

---

---

Esimerkki
Harkitse seuraavaa HTML-koodiesimerkkiä taulukon luomiseksi:

< div luokkaa = 'divTable' >
< div luokkaa = 'headerRow' >
< div luokkaa = 'divCell' >< b > ID < / b >< / div >
< div luokkaa = 'divCell' >< b > Nimi < / b >< / div >
< div luokkaa = 'divCell' >< b > Ikä < / b >< / div >
< / div >
< div luokkaa = 'divRow' >
< div luokkaa = 'divCell' > 001 < / div >
< div luokkaa = 'divCell' > Smith < / div >
< div luokkaa = 'divCell' > 25 < / div >
< / div >
< div luokkaa = 'divRow' >
< div luokkaa = 'divCell' > 002 < / div >
< div luokkaa = 'divCell' > John < / div >
< div luokkaa = 'divCell' > 31 < / div >
< / div >
< div luokkaa = 'divRow' >
< div luokkaa = 'divCell' > 003 < / div >
< div luokkaa = 'divCell' > Charles < / div >
< div luokkaa = 'divCell' > 28 < / div >
< / div >
< / div >

Yllä olevassa koodinpätkässä:

• A '
  ' -tunniste on lisätty luokalla nimeltä ' divTable ”.
• Sisällä ' div ' säiliöelementti, lisää toinen ' div ' säiliöelementti, jonka luokka on ilmoitettu ' headerRow ”.
• Lisää vielä kolme div 'elementtejä, joilla on luokat nimeltä ' divRow ', jossa on kolme alisäiliötä, joissa on ' divCell ”luokka.
• Lisää sitten kolme div-elementtiä ja lisää ' ID ”, “ Nimi ' ja ' Ikä ' taulukon otsikkorivillä.
• Määritä sen jälkeen arvot 'ID', 'Name' ja 'Age' kullekin div-elementille.

Tässä oli kyse siitä, kuinka ' div ”-elementtiä taulukon luomiseen. Sovelletaan nyt CSS-ominaisuuksia siihen:

---

---

.divTable
{
näyttö: pöytä;
leveys :auto;
tausta- väri :#eee;
rajaa :1px kiinteä # 666666 ;
reunaväli: 5px;
}
.divRow
{
leveys :auto;
näyttö:taulukko-rivi;
}
.divCell
{
leveys :150px;
kellua:vasen;
näyttö:taulukko-pylväs;
tausta- väri : rgb ( 212 , 209 , 209 ) ;
}

Yllä olevassa CSS-tyylielementissä:

• Lisää valitsin, joka viittaa ' divTable ' (joka sisältää kaikki taulukon arvot) ja määritä haluamasi CSS-ominaisuudet (eli ' näyttö ”, “ leveys ”, “ taustaväri ”, “ rajaa ' ja ' reunavälit ”) taulukon sisällölle.
• Lisää sen jälkeen luokan valitsin, joka valitsee ' divRow ' luokka CSS:n lisäämiseksi' leveys ' ja ' näyttö ”-ominaisuuksia elementeille.
• Lisää lopuksi CSS-tyyliominaisuudet ' .divCell ”luokan valitsin.

Tämä luo tulosteen taulukon ja näyttää seuraavat tulokset:

Siinä oli kyse taulukon luomisesta HTML-kielellä käyttämällä vain