Balises de tableau HTML - Apprenez les exemples de balises de table HTML avec la syntaxe

• Introduction sur les balises de table HTML

Introduction sur les balises de table 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 en utilisant

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

Le tableau peut être créé à l'aide de

Mots clés.

• le

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

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

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

contenu du tableau avec de nombreux éléments de table.

Syntaxe

En-tête de tableau 1	En-tête de tableau 2
Cellule de données 1	Cellule de données 2
Cellule de données 3	Cellule de données 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



HTML Table Tag Usage



Nom	Pays
Dhoni	Inde
David Miller	Afrique du Sud
Joe Root	Angleterre

Enregistrez le code avec l'extension .html et ouvrez-le dans le navigateur. Il affichera la sortie suivante:

2. Légende du tableau

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

Exemple



HTML Table Tag Usage



Ceci est la légende du tableau

Nom	Pays
Dhoni	Inde
David Miller	Afrique du Sud
Joe Root	Angleterre

Le code ci-dessus affichera la sortie ci-dessous:

3. Espacement des cellules du tableau

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

Exemple



HTML Table Tag Usage



Nom	Pays
Dhoni	Inde
David Miller	Afrique du Sud
Joe Root	Angleterre

Le code ci-dessus affichera la sortie suivante:

4. Rembourrage des cellules du tableau

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

Exemple



HTML Table Tag Usage



Nom	Pays
Dhoni	Inde
David Miller	Afrique du Sud
Joe Root	Angleterre

Le code ci-dessus affichera la sortie ci-dessous:

5. Attributs de portée de colonne et de ligne

Les deux lignes de table ou plus peuvent être fusionnées en une seule ligne en utilisant l'attribut rowspan et les colonnes de table peuvent être fusionnées en une seule colonne en utilisant un attribut colspan.

Exemple



HTML Table Tag Usage



Colonne un	Deuxième colonne	Troisième colonne
Ligne un	Ligne deux	Ligne trois
	Ligne quatre	Ligne cinq
Rangée six

Le code affichera la sortie suivante:

6. Contexte du tableau

L'arrière-plan du tableau peut être créé à l'aide de l'attribut bgcolor. La bordure de cellule du tableau peut être spécifiée à l'aide de l'attribut border-color.

Exemple



HTML Table Tag Usage



Nom	Pays
Dhoni	Inde
David Miller	Afrique du Sud
Joe Root	Angleterre

Exécutez le code ci-dessus et il affichera la sortie ci-dessous:

7. Hauteur et largeur de la table

La hauteur et la largeur du tableau peuvent être définies à l'aide des attributs width et height.

Exemple



HTML Table Tag Usage



Nom	Pays
Dhoni	Inde
David Miller	Afrique du Sud
Joe Root	Angleterre

Le code ci-dessus affichera la sortie suivante:

8. Styling Cell Cells

Exemple



HTML Table Tag Usage

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



Nom	Pays
Dhoni	Inde
David Miller	Afrique du Sud
Joe Root	Angleterre

Exécutez le code ci-dessus, vous aurez la sortie ci-dessous:

8. Tables imbriquées

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

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

Exemple



HTML Table Tag Usage



Nom Pays Dhoni Inde David Miller Afrique du Sud Joe Root Angleterre

Le code ci-dessus affichera la sortie suivante:

Attributs de la table

• 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 affiche l'espace entre les cellules du tableau.
• frame: il spécifie quelles parties des bordures extérieures sont visibles.
• règles: Ceci spécifie quelles parties des bordures intérieures sont visibles.
• triable: cet attribut informe que la table est triable.
• résumé: il indique le type de contenu de tableau présent.
• width: cet attribut indique la largeur de la table.
• hauteur: cet attribut spécifie la hauteur de la table.

Conclusion

Jusqu'à présent, nous avons étudié les différents types de balises de table en HTML. Les exemples ont montré comment styliser le tableau, imbriquer un tableau dans un autre tableau, définir la hauteur et la largeur du tableau, ajouter un espacement et un rembourrage pour les cellules du tableau, appliquer une couleur d'arrière-plan pour le tableau et bien d'autres.

Articles recommandés

Ceci est un guide des balises de table HTML. Ici, nous discutons des exemples de balises de table HTML avec la syntaxe et les attributs de la table. Vous pouvez également consulter les articles suivants pour en savoir plus -

1. Éléments de formulaire HTML
2. Créer des tableaux en HTML
3. Balises d'image HTML
4. Qu'est-ce que le HTML
5. Cadres HTML
6. Blocs HTML
7. Définir une couleur d'arrière-plan en HTML avec l'exemple