Le « tableau imbriqué » est l'un des concepts les plus importants lors de l'utilisation de tableaux dans le codage HTML. Les tables imbriquées ou « tables dans une table » sont un concept utilisé lors de la création de tables plus grandes et complexes. La plupart des tableaux complexes et volumineux peuvent inclure l'imbrication de tableaux dans la table principale pour avoir un meilleur contrôle du codage. L'utilisation de tableaux imbriqués peut aider à créer des apparences et des visuels magnifiques et intéressants, mais cela peut créer des erreurs inutiles.
Bien sûr, cela devient plus délicat lorsque vous commencez à utiliser des tableaux imbriqués en raison de toutes les balises et éléments que vous devez coder, maintenir et gérer lors de la création de tableaux dans des tableaux. Mais une fois que vous avez saisi un tel concept et pénétré une telle complexité, il devient beaucoup plus facile de jongler avec les balises à l'intérieur.
Comment créer un tableau dans un tableau ?
Un tableau peut être créé dans un autre tableau en utilisant simplement les balises de tableau telles que
,
,
, etc., pour créer notre tableau imbriqué. Étant donné que les tableaux imbriqués peuvent conduire à des niveaux de complexité plus élevés, n'oubliez pas de commencer et de terminer les tableaux imbriqués dans la même cellule. Vous pouvez créer des tableaux imbriqués sur n'importe quel nombre de niveaux ; n'oubliez pas de créer un tableau intérieur à l'intérieur de la même cellule.
Vous trouverez ci-dessous une interprétation des tableaux imbriqués. L'image ci-dessous montre une imbrication de tables à cinq niveaux, avec la couleur « Bleu » comme la couleur la plus externe ou la table conteneur avec des tables imbriquées représentées par les couleurs Blanc, Rouge, Jaune et Vert.
Nous allons essayer de créer un autre exemple de tables imbriquées étape par étape cette fois.
Tout d'abord, nous avons besoin de la table principale, le conteneur pour commencer notre nidification.
Deuxièmement, décidez dans quelle ligne, colonne ou cellule vous souhaitez qu'un autre tableau existe. Une fois décidé, passez à l'étape suivante
est l'élément dans lequel une toute nouvelle table sera créée. En allant hiérarchiquement,
….
….
(tableau imbriqué ici)
La table imbriquée à l'intérieur doit être complètement fermée avec toutes ses règles standard de fermeture
et
éléments.
Le formatage du tableau imbriqué est aussi simple et similaire à n'importe quel autre élément HTML.
L'exemple ci-dessus avait le conteneur principal, une table avec deux colonnes et une table imbriquée dans deux lignes et deux colonnes.
Observez maintenant l'exemple ci-dessous de tables imbriquées. Ce dont nous avons discuté ci-dessus comme une interprétation des niveaux d'imbrication, nous essaierons de créer un tel exemple via le codage ci-dessous.
Le code ci-dessus génère l'affichage suivant montrant 5 niveaux d'imbrication de nos tables différenciés par différentes couleurs. Observez le placement des tables les unes dans les autres, c'est-à-dire leur imbrication dans :
Le concept d'imbrication dans les tableaux devient plus intéressant visuellement lorsque le programmeur utilise des tableaux pour formater la page Web complète. Le tableau peut ensuite être formaté comme n'importe quel autre tableau et autre élément HTML dans lequel le programmeur pourrait s'imbriquer.
Exemples de tableaux imbriqués en HTML
Ci-dessous les exemples mentionnés :
Exemple n°1
Observez l'exemple ci-dessous d'une table imbriquée, une seule table dans la table principale. Pour différencier la table principale et la table imbriquée à l'intérieur, nous avons utilisé différents rayons de bordure et couleurs de bordure de la table.
Code :
<body>
<table border="5px" bordercolor="#8707B0">
<tr>
<td>Left side of the main table</td>
<td>
<table border="5px" bordercolor="#F35557">
<h4 align="center">Nested Table</h4>
<tr>
<td>nested table C1</td>
<td>nested table C2</td>
</tr>
<tr>
<td>nested table</td>
<td>nested table</td>
</tr>
</table>
</td>
</tr>
</table>
Copier après la connexion
Sortie :
Remarque : L'imbrication d'une table dans la table du conteneur principal. La table imbriquée à l’intérieur de la table principale est celle avec la bordure de couleur rouge. Il est ajouté dans le fichier
élément de la table conteneur.
Exemple n°2
Notre code suivant démontrera l'imbrication d'autres éléments HTML dans les tables imbriquées à l'intérieur de notre table conteneur principale.
Le code ci-dessus montre comment une table peut contenir plusieurs autres tables en elle-même, qui peuvent contenir tout type de contenu que vous ajoutez normalement à une simple page HTML. Le code ci-dessus pour le même est sans frontières.
Remarque : Dans l'exemple ci-dessus, les éléments HTML ajoutés comme un fichier png, un lien hypertexte, un tableau ou une liste d'objets peuvent être simplement ajoutés à l'un des fichiers
éléments. Dans l'interprétation ci-dessus, j'ai déconnecté toutes les bordures des tables imbriquées.
Veuillez noter que les tableaux lorsque leurs bordures sont rendues visibles. La table du conteneur est une avec la bordure de couleur rouge avec des bordures imbriquées avec des bordures de couleur bleue, jaune, verte et noire.
C'est bien d'utiliser des tableaux pour formater entièrement une page web, mais une chose à retenir est que plus votre imbrication est complexe, plus votre page se chargera lentement car cela devient vraiment compliqué pour votre navigateur de faire le rendu. .
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Guide de la bordure de tableau en HTML. Nous discutons ici de plusieurs façons de définir une bordure de tableau avec des exemples de bordure de tableau en HTML.
Ceci est un guide des tableaux imbriqués en HTML. Nous discutons ici de la façon de créer un tableau dans le tableau ainsi que des exemples respectifs.
Guide de mise en page des tableaux HTML. Nous discutons ici des valeurs de la mise en page des tableaux HTML ainsi que des exemples et des résultats en détail.
Guide de la liste ordonnée HTML. Ici, nous discutons également de l'introduction de la liste et des types HTML ordonnés ainsi que de leur exemple respectivement.
Guide pour déplacer du texte en HTML. Nous discutons ici d'une introduction, du fonctionnement des balises de sélection avec la syntaxe et des exemples à implémenter.
Guide du bouton HTML onclick. Nous discutons ici de leur introduction, de leur fonctionnement, des exemples et de l'événement onclick dans divers événements respectivement.
