Les tableaux HTML
Pour créer des tables en HTML on utilise l’élément <table>. Il serve de conteneur pour les éléments, qui définissent le contenu de la table.
Des lignes dans le tableau sont définies par le tag de bloc <tr> (abrégé de l’anglais “table row” – lignes de la table). Chaque ligne du tableau est écrite dans un tag <tr> distincte.
Le tag <tr> stocke les cellules du tableau ajoutées à l’aide du tag <td> (abrégée de l’anglais. “table data” – données de tableau). Chaque cellule est écrite dans un tag <td> distincte. Les cellules enregistrent le contenu de la table (nombres, texte etc.).
Le titre d'une ligne ou d'une colonne du tableau est spécifié à l'aide du tag <th> (en abrégé "tête de table"). Le tag <th> est placé dans la première ligne du tableau. Dans le navigateur, il est automatiquement attribué en gras.
Syntaxe
La balise <table> vient par paires. Le contenu doit être écrit entre la balise d'ouverture <table> et celle de fermeture </table>.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table>
<tr>
<th>Mois</th>
<th>Data</th>
</tr>
<tr>
<td>Janvier</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Février</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Résultat
| Mois | Data |
|---|---|
| Janvier | 10.01.2014 |
| Février | 10.01.2014 |
Les bordures des tableaux
Comme vous pouvez le voir dans l’exemple, le navigateur par défaut n’affiche pas les cadres du tableau. On peut les ajouter en deux manières, en utilisant l’attribut border, ou à l’aide des styles CSS. Considérons les deux options en détail.
L’attribut border installe le cadre autour du tableau et les bordures entre les cellules. Si la valeur de l’attribut n’est pas affichée, le navigateur affiche alors un cadre d'une épaisseur d'un pixel. Par défaut, le cadre est affiché en double.
Cela ressemble comme ça :
<table border="1"><!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
</head>
<body>
<table border="1">
<tr>
<th>Mois</th>
<th>Data</th>
</tr>
<tr>
<td>Janvier</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Février</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Résultat
| Mois | Data |
|---|---|
| Janvier | 10.01.2014 |
| Février | 10.01.2014 |
On peut installer les bordures du tableau aussi à l’aide de la propriété CSS border, qui définit l’épaisseur et le style du cadre.
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table>
<tr>
<th>Mois</th>
<th>Data</th>
</tr>
<tr>
<td>Janvier</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Février</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Résultat
| Mois | Data |
|---|---|
| Janvier | 10.01.2014 |
| Février | 10.01.2014 |
Regroupement des éléments de la table
On peut regrouper le contenu du tableau dans les blocs logiques. Pour ce faire, HTML fournit les tags suivants:
- Le tag <thead> - (abrégé de l’anglais “table head” - "tête" du tableau) regroupe une ou plusieurs des premières lignes de la table, c'est-à-dire créer un "chapeau" de la table.
- Le tag <body> - (abrégé de l’anglais “table body” - "corps" du tableau) regroupe les lignes centrales du tableau avec le contenu principal. (On peut utiliser plusieurs de ces blocs dans un tableau).
- Le tag <tfoot> - (abrégé de l’anglais “table footer” - pied de table) regroupe la ligne du bas, formant le "sous-sol" de la table. (Un seul tag <tfoot> peut être utilisé dans une table).
Exemple
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table>
<thead>
<tr>
<th>Mois</th>
<th>Data</th>
</tr>
</thead>
<tfoot>
<tr>
<td>Montant total</td>
<td>200$</td>
</tr>
</tfoot>
</table>
<tbody>
<tr>
<td>Juin</td>
<td>150$</td>
</tr>
<tr>
<td>Juillet</td>
<td>50$</td>
</tr>
</tbody>
</body>
</html>Résultat
La combinaison des cellules
Pour combiner des cellules dans une table, les attributs colspan et rowspan sont utilisés. L'attribut colspan spécifie le nombre de cellules à combiner horizontalement et l'attribut rowspan à la verticale.
Exemple de combinaison des cellules horizontalement
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table>
<tr>
<th colspan="2">Mois et Data</th>
</tr>
<tr>
<td>Janvier</td>
<td>10.01.2014</td>
</tr>
<tr>
<td>Février</td>
<td>10.01.2014</td>
</tr>
</table>
</body>
</html>Résultat
| Mois et Data | |
|---|---|
| Janvier | 10.01.2014 |
| Février | 10.01.2014 |
Exemple de combinaison de cellules verticalement
<!DOCTYPE html>
<html>
<head>
<title>Titre du document</title>
<style>
table,th,td{border:1px solid #cccccc}
</style>
</head>
<body>
<table >
<tr>
<th>Mois</th>
<th>Data</th>
</tr>
<tr>
<td>Janvier</td>
<td rowspan="2">10.01.2014</td>
</tr>
<tr>
<td>Février</td>
</tr>
</table>
</body>
</html>Résultat
| Mois | Data |
|---|---|
| Janvier | 10.01.2014 |
| Février |
Pratiquez vos connaissances
