HTML Table Style
L'élément de tableau HTML permet de représenter des données sous forme de tableaux. Cet élément utilise une syntaxe de balise ouvrante et fermante qui est obligatoire pour sa création. Les balises que l'on peut utiliser pour créer un tableau sont les suivantes : <table>
, <tr>
, <td>
, <th>
, <caption>
, <thead>
, <tbody>
et <tfoot>
.
Balises HTML pour créer un tableau
<table>
: C'est la balise principale pour créer un tableau. Tout le contenu du tableau doit être inclus à l'intérieur des balises<table>
et</table>
.<tr>
: Cette balise crée une nouvelle ligne dans un tableau. Tout le contenu d'une ligne doit être inclus à l'intérieur des balises<tr>
et</tr>
.<td>
: Cette balise créée une cellule dans un tableau. Tout le contenu de la cellule doit être inclus à l'intérieur des balises<td>
et</td>
.<th>
: Cette balise créée une cellule d'en-tête dans un tableau. Tout le contenu de la cellule d'en-tête doit être inclus à l'intérieur des balises<th>
et</th>
.<caption>
: Cette balise crée un titre pour le tableau. Tout le contenu du titre doit être inclus à l'intérieur des balises<caption>
et</caption>
.<thead>
: Cette balise crée un groupe d'en-tête dans un tableau. Tout le contenu du groupe d'en-tête doit être inclus à l'intérieur des balises<thead>
et</thead>
.<tbody>
: Cette balise crée un groupe de corps dans un tableau. Tout le contenu du groupe de corps doit être inclus à l'intérieur des balises<tbody>
et</tbody>
.<tfoot>
: Cette balise crée un groupe de pied de page dans un tableau. Tout le contenu du groupe de pied de page doit être inclus à l'intérieur des balises<tfoot>
et</tfoot>
.
Mise en forme des tableaux avec CSS
Pour styliser les tableaux HTML, on utilise les styles CSS. Les styles CSS permettent de modifier l'apparence du tableau (taille, couleur, bordures, alignement, etc.). Voici un exemple de code CSS qui permet de mettre en forme un tableau :
table {
border-collapse: collapse;
width: 100%;
}
th, td {
border: 1px solid black;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
Dans cet exemple, la première règle de style permet de définir les propriétés de base pour le tableau. La propriété border-collapse: collapse
permet de fusionner les bordures des cellules adjacentes pour créer un effet de bordure continue. La propriété width: 100%
permet de définir la largeur du tableau.
Les deuxième et troisième règles de style définissent les propriétés pour les cellules (<td>
) et les cellules d'en-tête (<th>
). La propriété border: 1px solid black
permet de définir la largeur et la couleur de la bordure. La propriété padding: 8px
permet de définir l'espace entre le contenu de la cellule et sa bordure. La propriété text-align: left
permet de définir l'alignement du contenu de la cellule.
La dernière règle de style définit la propriété pour les cellules d'en-tête (<th>
) ayant un fond de couleur. La propriété background-color: #f2f2f2
permet de définir la couleur de fond.
Exemples de mise en forme de tableaux
Exemple 1 : Tableau simple avec bordure
<table style="border: 1px solid black;">
<tr>
<th>Header 1</th>
<th>Header 2</th>
<th>Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
Résultat :
Header 1 | Header 2 | Header 3 |
---|---|---|
Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
Exemple 2 : Tableau avec bordure et couleur de fond pour les cellules d'en-tête
<table style="border: 1px solid black;">
<tr>
<th style="background-color: #f2f2f2;">Header 1</th>
<th style="background-color: #f2f2f2;">Header 2</th>
<th style="background-color: #f2f2f2;">Header 3</th>
</tr>
<tr>
<td>Row 1, Cell 1</td>
<td>Row 1, Cell 2</td>
<td>Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
Résultat :
Header 1 | Header 2 | Header 3 |
---|---|---|
Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
Exemple 3 : Tableau avec bordure et style de police personnalisé
<table style="border: 1px solid black; font-family: Arial, sans-serif;">
<tr>
<th style="background-color: #f2f2f2;">Header 1</th>
<th style="background-color: #f2f2f2;">Header 2</th>
<th style="background-color: #f2f2f2;">Header 3</th>
</tr>
<tr>
<td style="font-weight: bold;">Row 1, Cell 1</td>
<td style="color: red;">Row 1, Cell 2</td>
<td style="text-align: center;">Row 1, Cell 3</td>
</tr>
<tr>
<td>Row 2, Cell 1</td>
<td>Row 2, Cell 2</td>
<td>Row 2, Cell 3</td>
</tr>
</table>
Résultat :
Header 1 | Header 2 | Header 3 |
---|---|---|
Row 1, Cell 1 | Row 1, Cell 2 | Row 1, Cell 3 |
Row 2, Cell 1 | Row 2, Cell 2 | Row 2, Cell 3 |
Dans cet exemple, la propriété font-family: Arial, sans-serif
permet de définir la police de caractères utilisée pour le contenu du tableau. Les propriétés font-weight: bold
et color: red
permettent de personnaliser le style de police pour les cellules spécifiques. La propriété text-align: center
permet de centrer le contenu de la cellule.