Com crear una taula només amb etiqueta i CSS

” etiquetes dins.

---

---

Exemple
Considereu l'exemple de codi HTML següent per crear una taula:

< div classe = 'taula div' >
< div classe = 'headerRow' >
< div classe = 'divCell' >< b > ID < / b >< / div >
< div classe = 'divCell' >< b > Nom < / b >< / div >
< div classe = 'divCell' >< b > Edat < / b >< / div >
< / div >
< div classe = 'divRow' >
< div classe = 'divCell' > 001 < / div >
< div classe = 'divCell' > Smith < / div >
< div classe = 'divCell' > 25 < / div >
< / div >
< div classe = 'divRow' >
< div classe = 'divCell' > 002 < / div >
< div classe = 'divCell' > Joan < / div >
< div classe = 'divCell' > 31 < / div >
< / div >
< div classe = 'divRow' >
< div classe = 'divCell' > 003 < / div >
< div classe = 'divCell' > Carles < / div >
< div classe = 'divCell' > 28 < / div >
< / div >
< / div >

Al fragment de codi anterior:

• A '
  ' s'afegeix l'etiqueta amb la classe anomenada ' divTable ”.
• Dins del ' div ” element contenidor, afegiu un altre “ div ” element contenidor amb la classe declarada com a “ headerRow ”.
• De nou, afegiu tres ' div ” elements que tenen les classes anomenades “ divRow ” amb tres subcontenidors amb el “ divCell ” classe.
• A continuació, afegiu tres elements div afegiu el ' ID ”, “ Nom ' i ' Edat ” a la fila de capçalera de la taula.
• Després d'això, especifiqueu els valors per a 'ID', 'Nom' i 'Edat' per a cada element div.

Tot això tractava sobre com utilitzar el ' div ” element per crear una taula. Ara, apliquem-hi les propietats CSS:

---

---

.divTable
{
pantalla: taula;
amplada :automòbil;
fons- color :#eee;
frontera : 1 px sòlid # 666666 ;
espai entre vores: 5px;
}
.divRow
{
amplada :automòbil;
pantalla: taula-fila;
}
.divCell
{
amplada : 150 píxels;
flotant: esquerra;
pantalla: taula-columna;
fons- color : rgb ( 212 , 209 , 209 ) ;
}

A l'element d'estil CSS anterior:

• Afegiu un selector que faci referència al ' divTable ” (que conté tots els valors de la taula) i defineix les propietats CSS desitjades (és a dir, “ visualització ”, “ amplada ”, “ color de fons ”, “ frontera ' i ' espai de frontera ”) per al contingut de la taula.
• Després d'això, afegiu un selector de classes que seleccioneu els elements del ' divRow 'classe per afegir el CSS' amplada ' i ' visualització ” propietats als elements.
• Finalment, afegiu les propietats d'estil CSS als elements del ' .divCell ” selector de classe.

Això crearà una taula a la sortida i mostrarà els resultats següents:

Es tractava de crear una taula en HTML utilitzant només etiquetes