Comment créer une table uniquement à l'aide de balises et de CSS

” étiquettes à l'intérieur.

---

---

Exemple
Considérez l'exemple de code HTML suivant pour créer un tableau :

< div classe = 'divTable' >
< div classe = 'ligne d'en-tête' >
< div classe = 'divCell' >< b > IDENTIFIANT < / b >< / div >
< div classe = 'divCell' >< b > Nom < / b >< / div >
< div classe = 'divCell' >< b > Âge < / b >< / div >
< / div >
< div classe = 'divRow' >
< div classe = 'divCell' > 001 < / div >
< div classe = 'divCell' > Forgeron < / div >
< div classe = 'divCell' > 25 < / div >
< / div >
< div classe = 'divRow' >
< div classe = 'divCell' > 002 < / div >
< div classe = 'divCell' > John < / div >
< div classe = 'divCell' > 31 < / div >
< / div >
< div classe = 'divRow' >
< div classe = 'divCell' > 003 < / div >
< div classe = 'divCell' > Charles < / div >
< div classe = 'divCell' > 28 < / div >
< / div >
< / div >

Dans l'extrait de code ci-dessus :

• UN '
  ' la balise est ajoutée avec la classe nommée ' divTable ”.
• À l'intérieur de ' div ' élément conteneur, ajoutez un autre ' div ” élément conteneur avec la classe déclarée comme “ headerRow ”.
• Encore une fois, ajoutez trois ' div ” les éléments qui ont les classes nommées “ divRow ' avec trois sous-conteneurs avec le ' divCell ' classe.
• Ensuite, ajoutez trois éléments div ajoutez le ' IDENTIFIANT ”, “ Nom ' et ' Âge ” dans la ligne d'en-tête du tableau.
• Après cela, spécifiez les valeurs pour 'ID', 'Name' et 'Age' pour chaque élément div.

Il s'agissait de savoir comment utiliser le ' div ” élément pour créer un tableau. Maintenant, appliquons-lui les propriétés CSS :

---

---

.divTable
{
affichage : tableau ;
largeur :auto;
arrière-plan- couleur :#eee;
frontière :1px solide # 666666 ;
espacement des bordures : 5px ;
}
.divRow
{
largeur :auto;
display:table-row;
}
.divCell
{
largeur :150px;
flotteur : gauche ;
affichage:table-colonne ;
arrière-plan- couleur : RVB ( 212 , 209 , 209 ) ;
}

Dans l'élément de style CSS ci-dessus :

• Ajoutez un sélecteur qui fait référence au ' divTable ' (qui contient toutes les valeurs de la table) et définissez les propriétés CSS souhaitées (c'est-à-dire ' afficher ”, “ largeur ”, “ Couleur de l'arrière plan ”, “ frontière ' et ' espacement des bordures ”) pour le contenu du tableau.
• Après cela, ajoutez un sélecteur de classe qui sélectionne les éléments du ' divRow « classe pour ajouter le CSS » largeur ' et ' afficher ” propriétés aux éléments.
• Enfin, ajoutez les propriétés de style CSS aux éléments dans le ' .divCell ” sélecteur de classe.

Cela créera un tableau dans la sortie et affichera les résultats suivants :

Il s'agissait de créer un tableau en HTML en utilisant uniquement les balises