Habituellement, une table en HTML est créée via le «
" étiqueter. Cependant, la plupart des développeurs Web débutants pensent que c'est le seul moyen de créer une table dans HTML. Mais il est également possible de créer un tableau en utilisant uniquement le «»Tags en HTML et appliquant les propriétés de style CSS sur le contenu DIV.
Ce message donnera une solution complète à la façon de créer un tableau en utilisant uniquement le «”Propriétés TAG et CSS.
Comment créer une table via Tag et CSS?
Les développeurs peuvent créer une table en HTML en ajoutant un principal "«Tag pour créer une table puis plusieurs«»Tags à l'intérieur.
Exemple Considérez l'exemple de code HTML suivant pour créer une table:
IDENTIFIANT Nom Âge
001 Forgeron 25
002 John 31
003 Charles 28
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 de conteneur, ajoutez un autre"div»Élément de conteneur avec la classe déclarée«en tête".
Encore une fois, ajoutez trois "div"Éléments qui ont les classes nommées"divroque«Avec trois sous-conteneurs avec le«divcell" classe.
Ensuite, ajoutez trois éléments div Ajouter le "IDENTIFIANT","Nom" et "Âge”Dans la rangée d'en-tête de la table.
Après cela, spécifiez les valeurs pour «id», «nom» et «âge» pour chaque élément div.
Il s'agissait de savoir comment utiliser le «div»Élément pour créer une table. Maintenant, appliquons les propriétés CSS:
.divtable
Affichage: table; Largeur: Auto; Color d'arrière-plan: #eee; Border: 1px solide # 666666; Espacement des frontières: 5px;
.divroque
Largeur: Auto; Affichage: rang de table;
.divcell
Largeur: 150px; flottant: à gauche; Affichage: table-colonne; Color en arrière-plan: 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 du tableau) et définissent les propriétés CSS souhaitées (i.e., "afficher","largeur","Couleur de l'arrière plan","frontière" et "espacement des frontières») Pour le contenu de la table.
Après cela, ajoutez un sélecteur de classe qui sélectionne les éléments du «divroque"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 du «.divcell»Selecteur de classe.
Cela créera une table dans la sortie et affichera les résultats suivants:
Il s'agissait de créer une table en HTML en utilisant uniquement des tags et des propriétés CSS.
Conclusion
Une table dans HTML peut également être créée uniquement via la balise DIV et les propriétés de style CSS. Pour ce faire, créez un élément de conteneur Div principal séparé pour créer la table et quelques éléments de conteneur Div distinct à l'intérieur pour créer les lignes de la table. Chaque élément de conteneur Div aura son identifiant ou classes respectif. De plus, les sélecteurs de classe sont utilisés pour sélectionner les éléments Div et pour leur appliquer les propriétés CSS. Ce message a guidé sur la création d'un tableau uniquement en utilisant Div Tag et CSS.
