La balise HTML est utilisée pour afficher les données sous forme de tableau (ligne * colonne). Il peut y avoir plusieurs colonnes à la suite.
Nous pouvons créer une table pour afficher les données sous forme de tableau, en utilisant l’élément <table>, à l’aide des éléments <tr>, <td> et <th>.
Dans chaque tableau, la ligne de tableau est définie par la balise <tr>, son en-tête est défini par <th> et les données de la table sont définies par les balises <td>.
Les tableaux HTML permettent de gérer la mise en page de la page, par exemple. section d’en-tête, barre de navigation, contenu du corps, section de pied de page, etc. Il est toutefois recommandé d’utiliser la balise div au lieu table pour gérer la mise en page de la page.
La balise Table
| Étiquette | La description |
|---|---|
| <table> | Il définit une table. |
| <tr> | Il définit une ligne dans une table. |
| <th> | Il définit une cellule d’en-tête dans une table. |
| <td> | Il définit une cellule dans une table. |
| <legend> | Il définit la légende de la table. |
| <colgroup> | Il spécifie un groupe d’une ou plusieurs colonnes dans un tableau pour la mise en forme. |
| <col> | Il est utilisé avec l’élément <colgroup> pour spécifier les propriétés de colonne pour chaque colonne. |
| <tbody> | Il est utilisé pour regrouper le contenu du corps dans un tableau. |
| <thead> | Il est utilisé pour regrouper le contenu de l’en-tête dans une table. |
| <tfooter> | Il est utilisé pour regrouper le contenu du pied de page dans un tableau. |
Exemple de tableau HTML
Voyons l’exemple de balise de table HTML. La sortie est montrée ci-dessus.
<table> <tr><th>Nom</th><th>Prénom</th><th>Marks</th></tr> <tr><td>Sonoo</td><td>Jaiswal</td><td>60</td></tr> <tr><td>James</td><td>William</td><td>80</td></tr> <tr><td>Swati</td><td>Sironi</td><td>82</td></tr> <tr><td>Chetna</td><td>Singh</td><td>72</td></tr> </table>
Résultat :
| Nom | Prénom | Marks |
|---|---|---|
| Sonoo | Jaiswal | 60 |
| James | William | 80 |
| Swati | Sironi | 82 |
| Chetna | Singh | 72 |
Tableau HTML avec bordure
Il existe deux manières de spécifier une bordure pour les tableaux HTML.
- Par attribut border de la table en HTML
- Par propriété frontière en CSS
1) attribut de bordure
Vous pouvez utiliser l’attribut border de la balise table en HTML pour spécifier une bordure. Mais ce n’est pas recommandé maintenant.
<table border="1"> <tr><th>Nom</th><th>Prénom</th><th>Marque</th></tr> <tr><td>Raefeskov</td><td>Ghribi</td><td>60</td></tr> <tr><td>Dalila</td><td>Baraket</td><td>80</td></tr> <tr><td>Hadoula</td><td>Kocht</td><td>82</td></tr> <tr><td>Karina</td><td>Pelushi</td><td>72</td></tr> </table>
Résultat :
| Nom | Prénom | Marque |
|---|---|---|
| Raefeskov | Ghribi | 60 |
| Dalila | Baraket | 80 |
| Hadoula | Kocht | 82 |
| Karina | Pelushi | 72 |
2) Propriété Border de CSS
Il est maintenant recommandé d’utiliser la propriété border de CSS pour spécifier la bordure de tableau.
<style>
table, th, td {
border: 1px solid black;
}
</style>
Vous pouvez réduire toutes les bordures d’une bordure à l’aide de la propriété border-collapse. Il va effondrer la frontière en un seul.
<style>
table, th, td {
border: 2px solid black;
border-collapse: collapse;
}
</style>
Tableau HTML avec remplissage de cellules
Vous pouvez spécifier le remplissage des en-têtes et des données de tableau de deux manières:
- Par l’attribut cellpadding de la table en HTML
- En remplissant la propriété en CSS
L’attribut cellpadding de la balise table est obsolète maintenant. Il est recommandé d’utiliser le CSS.
Voyons le code en CSS.
<style>
table, th, td {
border: 1px solid pink;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
Résultat :
Largeur du tableau HTML:
Nous pouvons spécifier la largeur du tableau HTML en utilisant la propriété CSS width. Il peut être spécifié en pixels ou en pourcentage.
Nous pouvons ajuster la largeur de notre table selon nos besoins. Voici l’exemple pour afficher un tableau avec une largeur.
table{
width: 100%;
}
Exemple:
<!DOCTYPE html>
<html>
<head>
<title>table</title>
<style>
table{
border-collapse: collapse;
width: 100%;
}
th,td{
border: 2px solid green;
padding: 15px;
}
</style>
</head>
<body>
<table>
<tr>
<th>1 header</th>
<th>1 header</th>
<th>1 header</th>
</tr>
<tr>
<td>1data</td>
<td>1data</td>
<td>1data</td>
</tr>
<tr>
<td>2 data</td>
<td>2 data</td>
<td>2 data</td>
</tr>
<tr>
<td>3 data</td>
<td>3 data</td>
<td>3 data</td>
</tr>
</table>
</body>
</html>
Résultat :
Tableau HTML avec colspan
Si vous souhaitez qu’une cellule couvre plus d’une colonne, vous pouvez utiliser l’attribut colspan.
Il divisera une cellule / ligne en plusieurs colonnes et le nombre de colonnes dépend de la valeur de l’attribut colspan.
Voyons l’exemple qui couvre deux colonnes.
Code CSS:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 5px;
}
</style>
Code HTML :
<table style="width:100%"> <tr> <th>Name</th> <th colspan="2">Mobile No.</th> </tr> <tr> <td>Dalila Baraket</td> <td>9876543200</td> <td>6654328990</td> </tr> </table>
Résultat :
Table HTML avec rowspan
Si vous souhaitez qu’une cellule couvre plus d’une ligne, vous pouvez utiliser l’attribut rowspan.
Il divisera une cellule en plusieurs lignes. Le nombre de lignes divisées dépendra des valeurs rowspan.
Voyons l’exemple qui s’étend sur deux lignes.
Code CSS:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
</style>
Code HTML:
<table> <tr><th>Nom</th><td>Dalila Baraket</td></tr> <tr><th rowspan="2">Mobile No.</th><td>998765433</td></tr> <tr><td>9987667800</td></tr> </table>
Résultat :
Style tableau, cellules paires et impaires
Code CSS:
<style>
table, th, td {
border: 1px solid black;
border-collapse: collapse;
}
th, td {
padding: 10px;
}
table#alter tr:nth-child(even) {
background-color: #eee;
}
table#alter tr:nth-child(odd) {
background-color: #fff;
}
table#alter th {
color: white;
background-color: gray;
}
</style>
Résultat :
