Balises de tableau HTML-tutoriel HTML-php.cn

Le tableau HTML fournit un moyen de dériver ou de définir les données, telles que le texte, les images, les liens, etc., en termes de lignes et de colonnes de cellules. Les tableaux HTML peuvent être créés à l'aide de la commande

étiqueter. Par défaut, les données du tableau sont alignées à gauche. Dans cette rubrique, nous allons découvrir les balises de tableau HTML.

Le tableau peut être créé en utilisant

balises.

la balise spécifie les lignes du tableau utilisées pour créer une ligne.

Les données du tableau peuvent être structurées dans le contenu

,	et
la balise définit un en-tête pour le tableau. Le	la balise spécifie les cellules de données du tableau utilisées pour créer la colonne. Le

du tableau

avec de nombreux éléments de table.

Syntaxe

<table>
<tr>
<th>Table Heading 1</th>
<th>Table Heading 2</th>
</tr>
<tr>
<td>Data Cell 1</td>
<td>Data Cell 2</td>
</tr>
<tr>
<td>Data Cell 3</td>
<td>Data Cell 4</td>
</tr>
</table>

Copier après la connexion

Exemples de balises de tableau HTML

Voici les exemples de balises de tableau HTML donnés ci-dessous

1. Utilisation de base des tables

Exemple :

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copier après la connexion

Enregistrez le code avec une extension .html et ouvrez-le dans le navigateur. Il affichera le résultat suivant :

Balises de tableau HTML

2. Légende du tableau

La légende du tableau peut être spécifiée à l'aide de la balise <caption>.

Exemple

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<caption>This is Table Caption</caption>
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copier après la connexion

Le code ci-dessus affichera le résultat ci-dessous :

Balises de tableau HTML

3. Espacement des cellules du tableau

L'espace des cellules du tableau peut être défini à l'aide de l'attribut Cellpacing. L'attribut cellpacing spécifie l'espace entre les cellules du tableau.

Exemple

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellspacing = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copier après la connexion

Le code ci-dessus affichera le résultat suivant :

Balises de tableau HTML

4. Remplissage des cellules du tableau

Le remplissage des cellules du tableau peut être défini à l’aide de l’attribut cellpadding. Distance de l'attribut cellpadding entre la bordure de la cellule du tableau et les données.

Exemple

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" cellpadding = "5">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copier après la connexion

Le code ci-dessus affichera le résultat ci-dessous :

Balises de tableau HTML

5. Attributs d'étendue de colonne et de ligne

Vous pouvez fusionner deux lignes de tableau ou plus en une seule ligne à l'aide de l'attribut rowspan, et vous pouvez fusionner des colonnes de tableau en une seule colonne à l'aide de l'attribut colspan.

Exemple

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column One</th>
<th>Column Two</th>
<th>Column Three</th>
</tr>
<tr>
<td rowspan = "2">Row One</td>
<td>Row Two</td>
<td>Row Three</td>
</tr>
<tr>
<td>Row Four</td>
<td>Row Five</td>
</tr>
<tr>
<td colspan = "3">Row Six</td>
</tr>
</table>
</body>

Copier après la connexion

Le code affichera le résultat suivant :

Balises de tableau HTML

6. Fond de table

Vous pouvez créer l'arrière-plan du tableau en utilisant l'attribut bgcolor. La bordure des cellules du tableau peut être spécifiée à l'aide de l'attribut border-color.

Exemple

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" bordercolor = "red" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copier après la connexion

Exécutez le code ci-dessus et il affichera le résultat ci-dessous :

Balises de tableau HTML

7. Hauteur et largeur de la table

Vous pouvez définir la hauteur et la largeur du tableau en utilisant les attributs width et height.

Exemple

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copier après la connexion

Le code ci-dessus affichera le résultat suivant :

Balises de tableau HTML

8. Cellules de table de style

Exemple

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<style>
table, th, td {
border: 1px solid red;
border-collapse: collapse;
}
th, td {
padding: 15px;
}
table#mytable tr:nth-child(even) {
background-color: #FAD7A0;
}
table#mytable tr:nth-child(odd) {
background-color: #E67E22;
}
table#mytable th {
color: white;
background-color: teal;
}
</style>
<body>
<table id="mytable" border = "1" width = "450" height = "350">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</body>

Copier après la connexion

Exécutez le code ci-dessus ; vous aurez le résultat ci-dessous :

Balises de tableau HTML

8. Tables imbriquées

Vous pouvez utiliser une table à l'intérieur d'une autre table, appelée table imbriquée.

Considérons l'exemple ci-dessous pour la table imbriquée :

Exemple

<!DOCTYPE html>
<html>
<head>
<title>HTML Table Tag Usage</title>
</head>
<body>
<table border = "1" width = "500" height = "250">
<tr>
<td>
<table border = "1" width = "500" height = "250" bgcolor = "lightblue">
<tr>
<th>Name</th>
<th>Country</th>
</tr>
<tr>
<td>Dhoni</td>
<td>India</td>
</tr>
<tr>
<td>David Miller</td>
<td>South Africa</td>
</tr>
<tr>
<td>Joe Root</td>
<td>England</td>
</tr>
</table>
</td>
</tr>
</table>
</body>

Copier après la connexion

Le code ci-dessus affichera le résultat suivant :

Balises de tableau HTML

Attributs du tableau

Vous trouverez ci-dessous les attributs suivants :

align : Cet attribut fournit l'alignement du contenu à l'intérieur d'un élément.
bgcolor : Cet attribut spécifie la couleur d'arrière-plan du tableau.
border : Cet attribut spécifie la bordure des cellules du tableau.
cellpadding : Cet attribut affiche le remplissage entre les cellules du tableau et le contenu du tableau.
cellspacing : Cet attribut indique l'espace entre les cellules du tableau.
frame : Il précise quelles parties des bordures extérieures sont visibles.
règles : Ceci précise quelles parties des bordures intérieures sont visibles.
triable : Cet attribut informe que la table est triable.
résumé : Il indique quel type de contenu de tableau est présent.
width : Cet attribut indique la largeur du tableau.
hauteur : Cet attribut précise la hauteur de la table.

Conclusion

Jusqu'à présent, nous avons étudié les différents types de balises de tableau en HTML. Les exemples ont montré l'utilisation du style du tableau, de l'imbrication d'un tableau dans un autre tableau, de la définition de la hauteur et de la largeur du tableau, de l'ajout d'espacement et de remplissage pour les cellules du tableau, de l'application d'une couleur d'arrière-plan pour le tableau, et bien d'autres encore.

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!