Balises de tableau HTML

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.

• Le

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 Heading 1	Table Heading 2
Data Cell 1	Data Cell 2
Data Cell 3	Data Cell 4

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 :

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

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

2. Légende du tableau

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

Exemple

<title>HTML Table Tag Usage</title>

This is Table Caption

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

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

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

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

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

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

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

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

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

<title>HTML Table Tag Usage</title>

Column One	Column Two	Column Three
Row One	Row Two	Row Three
	Row Four	Row Five
Row Six

Le code affichera le résultat suivant :

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

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

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

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

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

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

8. Cellules de table de style

Exemple

<title>HTML Table Tag Usage</title>

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

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

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

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

<title>HTML Table Tag Usage</title>

Name	Country
Dhoni	India
David Miller	South Africa
Joe Root	England

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

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!