Les tableaux sont un aspect fondamental et crucial du développement Web et sont utilisés pour présenter les informations dans un format ordonné et clair. Cependant, il peut y avoir des situations dans lesquelles des données plus complexes doivent être présentées, nécessitant l'utilisation de tableaux imbriqués. Les tableaux imbriqués sont des tableaux situés dans d’autres cellules du tableau. Dans cet article, nous vous guiderons tout au long du processus de création de tableaux imbriqués en HTML et vous aiderons à comprendre les concepts plus efficacement grâce à des explications minutieuses et détaillées, accompagnées d'illustrations. Que vous soyez un débutant ou un concepteur de sites Web expérimenté, cet article vous fournira les connaissances et l'expertise dont vous avez besoin pour maîtriser la création de tableaux imbriqués à l'aide de HTML.
Avant de commencer à explorer la création de tableaux imbriqués, il est nécessaire de comprendre la composition de base des tableaux HTML. Les tableaux HTML sont formés grâce à l'implémentation de l'élément
et incluent un ou plusieurs éléments (ligne de tableau) qui contiennent un élément | Chaque élément |
représente une cellule du tableau.
Méthode
Les méthodes suivantes présentées ici sont utilisées pour créer des tableaux imbriqués dans des tableaux. Pour ce faire, nous créons d'abord la table principale en encapsulant l'élément
dans un élément La table principale est définie avec le nom de classe "main-table". Dans le tableau principal, nous avons deux cellules définies à l'aide de l'élément La première cellule contient un tableau imbriqué contenu dans un autre élément Les tables imbriquées sont définies avec le nom de classe « nested-table ». Les cellules d'un tableau imbriqué sont définies à l'aide de l'élément | La deuxième cellule du tableau principal contient du texte, mais il n'y a pas de tableau imbriqué.
Pour garantir que le tableau s'affiche correctement, nous utilisons CSS pour définir certains styles. La largeur de l'élément de tableau est définie sur 100 % et la valeur de réduction de la bordure est définie sur effondrement. Les cellules du tableau principal et du tableau imbriqué ont une bordure noire de 1 pixel et un remplissage de 8 pixels. L'alignement du texte de toutes les cellules est défini à gauche.
De plus, nous avons également défini la couleur d'arrière-plan du tableau principal et des tableaux imbriqués en utilisant CSS. La couleur d’arrière-plan du tableau principal est gris clair et la couleur d’arrière-plan du tableau imbriqué est un gris légèrement plus foncé. En suivant ces étapes, vous pouvez facilement créer des tableaux imbriqués dans des tableaux HTML et leur appliquer des styles à l'aide de CSS.
Exemple
Voici le code complet que nous examinerons dans cet exemple -
<!DOCTYPE html>
<html>
<head>
<title>How to create nested tables within tables in HTML?</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
td, th {
border: 1px solid black;
padding: 8px;
text-align: left;
}
.main-table {
background-color: #f2f2f2;
}
.nested-table {
background-color: #e6e6e6;
}
</style>
</head>
<body>
<h4>How to create nested tables within tables in HTML?</h4>
<table class="main-table">
<tr>
<td>
Main table cell 1
<table class="nested-table">
<tr>
<td>Nested table cell 1</td>
<td>Nested table cell 2</td>
</tr>
</table>
</td>
<td>Main table cell 2</td>
</tr>
</table>
</body>
</html>
Copier après la connexion Conclusion
En fin de compte, générer des tableaux incorporés en HTML est une tâche simple qui nécessite une compréhension de base de la composition des tableaux HTML. En suivant les étapes expliquées dans cet article, vous pouvez facilement générer des tableaux intégrés qui présentent des données complexes de manière systématique et facile à comprendre. Que vous ayez besoin de présenter de grandes quantités de données ou que vous souhaitiez simplement les présenter dans une mise en page précise, les tableaux intégrés sont un outil utile pour tout concepteur Web. Grâce à l'expertise acquise grâce à cet article, vous avez désormais la possibilité de créer des tableaux intégrés en HTML et de faire passer votre conception Web au niveau supérieur.
|
|
|
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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
