Tableau imbriqué en HTML-tutoriel HTML-php.cn

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

, , et

, 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.

Tableau imbriqué en HTML

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

é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.

Code :

<body>
<table border="10" bordercolor = "#0B1941">
<tr>
<td>
<table border="10" bordercolor = "#F8F3F3">
<tr>
<td>
<table border="10" bordercolor = "#C74D4F">
<tr>
<td>
<table border="10" bordercolor = "#DCE127">
<tr>
<td>
<table border="10" bordercolor = "#3CAB16">
<tr> <td> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table> </td> </tr>
</table>

Copier après la connexion

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 :

Tableau imbriqué en HTML

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 :

Tableau imbriqué en HTML

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.

Code :

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title> NestedTables </title>
</head>
<body>
<caption title="Container Table"> Container Table </caption>
<table border="5px" bordercolor = "red">
<tr>
<td >
<table>
<tr> <th colspan="2"> Nested Table 2 </th> </tr>
<tr> <th> Column 1 </th> <th> Column 2 </th> </tr>
<tr> <td> Our First Table </td>
<td> Nested Within </td> </tr>
</table>
</td>
<td>
<table >
<tr> <th> Nested Table 2 </th> </tr>
<tr>
<td>
<ul>
<li> List Object 1 </li>
<li> List Object 2 </li>
<li> List Object 3 </li>
</ul>
</td>
</tr>
</table> </td> </tr>
<tr>
<td>
<table>
<tr> <th colspan="2" align="center"> Nested Table 3 </th> </tr>
<tr>
<td> <a href=""> Nested Table </a> </td>
<td> Demo Continued </td> </tr>
</table> </td>
<td>
<table>
<tr> <th> Nested Table 4 </th> </tr>
<tr>
<td> <img src="images.png" height="120px" width="120px" alt="Sorry Image could not be displayed"> </td> </tr> </table>
</td>
</tr>
</table>
</body>
</html>

Copier après la connexion

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.

Tableau imbriqué en HTML

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.

Tableau imbriqué en HTML

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!

Étiquettes associées：

html html5 HTML Tutorial HTML Properties HTML tags

source：php

Article précédent：Tableau sans bordure en HTML Article suivant：Bordure de tableau en HTML

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

Derniers articles par auteur