Les concepteurs de sites Web peuvent personnaliser les mises en page en utilisant des tables imbriquées en concevant des tables plus grandes et plus petites avec différentes tailles de cellules afin que chacun affiche soit du texte, des graphiques ou les deux. Plus particulièrement, les tables imbriquées ont permis des dispositions en colonnes sur les pages Web sans utiliser de cadres ennuyeux.
Ce message indiquera:
Comment créer / faire une table en HTML?
Comment créer une table imbriquée en HTML?
Comment créer / faire une table en HTML?
Pour concevoir une table en HTML, le «
”La balise est utilisée. Alors, essayez les instructions déclarées.
Étape 1: Créez un conteneur div
Initialement, créez un conteneur Div en déploiement du «"Element et ajoutez un attribut d'identification avec un nom spécifique en fonction de votre choix.
Étape 2: Ajouter un en-tête
Ensuite, utilisez la balise d'en-tête de "" pour "”Pour ajouter une rubrique à l'intérieur du conteneur div. À cette fin, nous avons utilisé le «H1«Étiquette de cap et texte intégré à l'intérieur de la balise d'ouverture et de clôture de« H1 ».
Étape 3: Créer une table
Pour créer une table en HTML, insérez un «
”Tag et ajoutez une classe à l'intérieur de la balise de table avec un nom spécifique. Ensuite, ajoutez les éléments ci-dessous entre les balises de table:
"
”Est utilisé pour définir les lignes dans le tableau.
"
»L'élément est utilisé pour ajouter les données à l'intérieur du tableau.
Pour ce faire, intégrez les données de texte entre
:
Site Web de tutoriel LinuxHint
Première organisation
Deuxième organisation
Troisième organisation
Quatrième organisation
En conséquence, une table simple a été créée dans le HTML avec succès:
Étape 4: Style le conteneur div
Pour styliser le conteneur Div, accédez d'abord à lui avec l'aide de «#contenu principal»Et appliquez le style CSS en fonction de votre préférence:
#contenu principal rembourrage: 20px 30px; marge: 40px 140px; Border: Green en pointillé 3px;
Pour ce faire, nous avons appliqué les propriétés ci-dessous:
"rembourrage»Détermine l'espace vide autour de l'élément à l'intérieur de la limite définie.
"marge"Est utilisé pour spécifier l'espace à l'extérieur de la bordure.
"frontière”Est utilisé pour définir une frontière autour de l'élément défini.
Sortir
Étape 5: Appliquer le style sur la table
Accédez à la table à l'aide de la classe de table et appliquez un style à l'aide des propriétés CSS:
.table principale Border: 4px Ridge Blue; rembourrage: 20px 30px; Color en arrière-plan: RVB (135, 197, 247);
Dans ce cas, nous avons appliqué le «frontière","rembourrage", et "Couleur de l'arrière plan" propriétés. Le "Couleur de l'arrière plan»La propriété détermine la couleur à l'arrière de l'élément défini.
Étape 6: Appliquer le style sur les lignes de table et les colonnes
Accéder au "tableau", Avec des rangées"tr"Et les données"TD»:
table tr td Border: Green massif 3px;
Ensuite, appliquez le «frontière”Propriété CSS pour ajouter la limite autour des lignes et des cellules de la table.
Sortir
Allez vers la section suivante si vous voulez rendre la table imbriquée.
Comment créer / faire une table imbriquée en HTML?
Pour faire une table imbriquée en HTML, créez d'abord une table avec le «
»Elément et définissez les lignes à l'intérieur de la table. Ensuite, ajoutez le "
»Élément pour ajouter les données à l'intérieur des données. À l'intérieur de "
"Opening et clôture tag, insérer"
”Pour créer une table imbriquée à l'intérieur de la table.
Pour des implications pratiques, vous devez essayer les instructions indiquées ci-dessous.
Étape 1: Créer un conteneur «div»
Tout d'abord, créez un conteneur à l'aide du «”Avec un attribut de classe à l'intérieur de la balise div.
Étape 2: insérer une tête
Ensuite, ajoutez une rubrique en utilisant le «”Tag et intégrer du texte entre la balise.
Étape 3: faire la table
Créez une table à l'aide du «
"Tag et ajouter"
" et "
".Pour ajouter le texte à l'intérieur de la table.
Étape 4: Créez une table imbriquée
À l'intérieur de "
"Élément, définissez un autre"
»Élément pour créer un tableau imbriqué dans le tableau principal. Après cela, ajoutez des données en fonction de votre besoin:
Site Web de tutoriel LinuxHint
Première organisation
Deuxième organisation
Employé 1
Employé 2
Employé 3
Employé 4
Troisième organisation
Quatrième organisation
Employé 1
Employé 2
Employé 3
Employé 4
Note: Les utilisateurs peuvent ajouter autant de tables que possible
élément de la table principale.
On peut voir dans la sortie suivante que le tableau imbriqué a été créé avec succès:
Étape 4: Style Table imbriquée
Accéder à la table imbriquée en utilisant l'ID avec le sélecteur. Dans notre cas, pour accéder à la table en utilisant le "# Tableau imbriqué»Et appliquez le style à l'aide des propriétés CSS:
Nous avons appliqué le «frontière","couleur", et "Couleur de l'arrière plan«Propriétés et définissez la valeur en fonction du désir sur la table imbriquée.
Sortir
Il s'agissait de créer une table imbriquée en HTML.
Conclusion
Pour faire une table imbriquée en HTML, créez d'abord une table en utilisant le «
" étiqueter. Ensuite, définissez les lignes à l'aide du «
"Tag et ajoutez des données en utilisant"
". Après cela, à l'intérieur du «
”Tag, créez une autre table en essayant la même méthode. Les utilisateurs peuvent également appliquer les propriétés CSS pour styliser la table et la table imbriquée. Ce message a démontré la méthode de création de la table imbriquée en HTML.
