HTML - Tableaux
Les tableaux HTML permettent aux auteurs Web d'organiser des données telles que du texte, des images, des liens, d'autres tableaux, etc. en lignes et colonnes de cellules.
Les tableaux HTML sont créés à l'aide du <table> tag dans lequel le <tr> La balise est utilisée pour créer des lignes de tableau et <td>La balise est utilisée pour créer des cellules de données. Les éléments sous <td> sont réguliers et alignés à gauche par défaut
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Tables</title>
</head>
<body>
<table border = "1">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Ici le borderest un attribut de la balise <table> et il est utilisé pour mettre une bordure sur toutes les cellules. Si vous n'avez pas besoin de bordure, vous pouvez utiliser border = "0".
En-tête de tableau
L'en-tête du tableau peut être défini à l'aide de <th>marque. Cette balise remplacera la balise <td>, qui est utilisée pour représenter la cellule de données réelle. Normalement, vous placerez votre première ligne comme en-tête de tableau comme indiqué ci-dessous, sinon vous pouvez utiliser l'élément <th> dans n'importe quelle ligne. Les en-têtes définis dans la balise <th> sont centrés et en gras par défaut.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Header</title>
</head>
<body>
<table border = "1">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Attributs Cellpadding et Cellspacing
Il existe deux attributs appelés cellpadding et cellspacing que vous utiliserez pour ajuster l'espace blanc dans les cellules de votre tableau. L'attribut cellspacing définit l'espace entre les cellules du tableau, tandis que cellpadding représente la distance entre les bordures de cellule et le contenu d'une cellule.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Cellpadding</title>
</head>
<body>
<table border = "1" cellpadding = "5" cellspacing = "5">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Attributs Colspan et Rowspan
Vous utiliserez colspanattribut si vous souhaitez fusionner deux colonnes ou plus en une seule colonne. De la même manière que vous utiliserezrowspan si vous souhaitez fusionner deux ou plusieurs lignes.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Colspan/Rowspan</title>
</head>
<body>
<table border = "1">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Arrière-plans de tableaux
Vous pouvez définir l'arrière-plan du tableau de l'une des deux manières suivantes:
bgcolor attribut - Vous pouvez définir la couleur d'arrière-plan pour la table entière ou juste pour une cellule.
background attribut - Vous pouvez définir l'image d'arrière-plan pour la table entière ou juste pour une cellule.
Vous pouvez également définir la couleur de la bordure en utilisant également bordercolor attribut.
Note- Les attributs bgcolor , background et bordercolor obsolètes dans HTML5. N'utilisez pas ces attributs.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" bgcolor = "yellow">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td>
<td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Voici un exemple d'utilisation backgroundattribut. Ici, nous utiliserons une image disponible dans le répertoire / images.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Background</title>
</head>
<body>
<table border = "1" bordercolor = "green" background = "/images/test.png">
<tr>
<th>Column 1</th>
<th>Column 2</th>
<th>Column 3</th>
</tr>
<tr>
<td rowspan = "2">Row 1 Cell 1</td>
<td>Row 1 Cell 2</td><td>Row 1 Cell 3</td>
</tr>
<tr>
<td>Row 2 Cell 2</td>
<td>Row 2 Cell 3</td>
</tr>
<tr>
<td colspan = "3">Row 3 Cell 1</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant. Ici, l'image d'arrière-plan ne s'appliquait pas à l'en-tête du tableau.
Hauteur et largeur de la table
Vous pouvez définir une largeur et une hauteur de table en utilisant width et heightles attributs. Vous pouvez spécifier la largeur ou la hauteur du tableau en termes de pixels ou en termes de pourcentage de la zone d'écran disponible.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Width/Height</title>
</head>
<body>
<table border = "1" width = "400" height = "150">
<tr>
<td>Row 1, Column 1</td>
<td>Row 1, Column 2</td>
</tr>
<tr>
<td>Row 2, Column 1</td>
<td>Row 2, Column 2</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
Légende du tableau
le captionLa balise servira de titre ou d'explication pour le tableau et elle apparaîtra en haut du tableau. Cette balise est obsolète dans la nouvelle version de HTML / XHTML.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table Caption</title>
</head>
<body>
<table border = "1" width = "100%">
<caption>This is the caption</caption>
<tr>
<td>row 1, column 1</td><td>row 1, columnn 2</td>
</tr>
<tr>
<td>row 2, column 1</td><td>row 2, columnn 2</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -
En-tête, corps et pied de page du tableau
Les tableaux peuvent être divisés en trois parties: un en-tête, un corps et un pied. L'en-tête et le pied sont assez similaires aux en-têtes et pieds de page dans un document de traitement de texte qui restent les mêmes pour chaque page, tandis que le corps est le principal détenteur du contenu du tableau.
Les trois éléments pour séparer la tête, le corps et le pied d'une table sont:
<thead> - pour créer un en-tête de tableau séparé.
<tbody> - pour indiquer le corps principal du tableau.
<tfoot> - pour créer un pied de page séparé.
Un tableau peut contenir plusieurs éléments <tbody> pour indiquer différentes pages ou groupes de données. Mais il est à noter que les balises <thead> et <tfoot> doivent apparaître avant <tbody>
Exemple
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<thead>
<tr>
<td colspan = "4">This is the head of the table</td>
</tr>
</thead>
<tfoot>
<tr>
<td colspan = "4">This is the foot of the table</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
<td>Cell 4</td>
</tr>
</tbody>
</table>
</body>
</html>Cela produira le résultat suivant -
Tables imbriquées
Vous pouvez utiliser une table dans une autre table. Non seulement les tables, vous pouvez utiliser presque toutes les balises à l'intérieur de la balise de données de table <td>.
Exemple
Voici l'exemple d'utilisation d'un autre tableau et d'autres balises dans une cellule de tableau.
<!DOCTYPE html>
<html>
<head>
<title>HTML Table</title>
</head>
<body>
<table border = "1" width = "100%">
<tr>
<td>
<table border = "1" width = "100%">
<tr>
<th>Name</th>
<th>Salary</th>
</tr>
<tr>
<td>Ramesh Raman</td>
<td>5000</td>
</tr>
<tr>
<td>Shabbir Hussein</td>
<td>7000</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>Cela produira le résultat suivant -