Introduction
Les tableaux peuvent être utilisés pour présenter des données dans un format structuré. Le composant de base de tout tableau est un élément de ligne de tableau () qui définit une ligne de cellules. Les lignes de tableau doivent être incluses dans un élément de tableau (
). Dans ce laboratoire, nous allons apprendre à créer des lignes de tableau HTML.Note: Vous pouvez pratiquer la programmation dans
index.htmlet apprendre Comment écrire du HTML dans Visual Studio Code. Cliquez sur 'Go Live' dans le coin inférieur droit pour exécuter le service web sur le port 8080. Ensuite, vous pouvez actualiser l'onglet Web 8080 pour prévisualiser la page web.
Skills Graph
Création d'une structure de tableau HTML
Pour créer un tableau HTML, nous devons tout d'abord définir la structure du tableau. Commencez par créer un fichier HTML nommé index.html. Ajoutez le code suivant à votre fichier :
<!doctype html>
<html>
<head>
<title>Mon tableau</title>
</head>
<body>
<table>
<tr>
<th>Cellule d'en-tête 1</th>
<th>Cellule d'en-tête 2</th>
</tr>
<tr>
<td>Cellule de données 1</td>
<td>Cellule de données 2</td>
</tr>
</table>
</body>
</html>Dans ce code, nous avons créé un tableau HTML avec deux lignes et deux colonnes. La première ligne contient deux cellules d'en-tête (
<tr>
<td>Cellule de données 3</td>
<td>Cellule de données 4</td>
</tr>Maintenant, le tableau a trois lignes, avec deux cellules par ligne.
Stylisation des lignes de tableau
Nous pouvons ajouter des styles aux lignes de tableau à l'aide de CSS. Ajoutez le style suivant à l'élément pour ajouter une couleur d'arrière-plan aux lignes paires :
<style>
tr:nth-child(even) {
background-color: lightgray;
}
</style>Ce code ajoutera une couleur d'arrière-plan lightgray à chaque seconde ligne du tableau.
Fusion de lignes de tableau
Nous pouvons fusionner deux lignes ou plus adjacentes en une seule ligne en utilisant l'attribut rowspan. Par exemple, disons que nous voulons fusionner les deux premières lignes en une seule ligne. Remplacez le premier élément
<tr>
<th rowspan="2">Cellule d'en-tête 1</th>
<th>Cellule d'en-tête 2</th>
</tr>L'attribut rowspan="2" dans la première cellule d'en-tête fusionnera les deux premières lignes en une seule ligne.
Création d'en-têtes de cellules de tableau
Nous pouvons utiliser l'élément
| ) et la deuxième ligne contient deux cellules de données ( | ).
Ajout de plus de lignesPour ajouter plus de lignes au tableau, nous devons ajouter plus d'éléments | |
|---|---|---|
| pour créer des cellules d'en-tête dans le tableau. Les cellules d'en-tête sont généralement utilisées pour décrire le contenu des colonnes. Pour ajouter une cellule d'en-tête à la première colonne, remplacez le premier élément | de la deuxième ligne par le code suivant :
L'attribut | spécifie que cette cellule est un en-tête pour la première ligne.
SommaireDans ce laboratoire, nous avons appris à créer des lignes de tableau HTML et à personnaliser le tableau à l'aide de CSS. Nous avons également appris à fusionner des lignes adjacentes et à créer des cellules d'en-tête dans le tableau. Avec ces compétences, vous pouvez désormais créer des tableaux beaux et structurés pour vos pages web. |
