Les tables servent pour l'affichage de « données tabulaires », c'est-à-dire des informations présentées logiquement en rangées et en colonnes.
Son intégration peut paraitre fastidieuse mais c'est uniquement de la logique.
En théorie, on peut insérer n'importe quoi dans les tables : du texte, des liens et des images ...
TOUJOURS EST-IL que les tables sont désormais faites pour présenter des données de type grille de tarifs par exemple.
Même si aux premiers temps d'Internet, les tables servaient souvent pour la mise en page.
Les concepts de boites et de sémantiques n'existaient pas encore.
On trouve encore ce type de mise en page dans la construction de newsletters pour s'assurer un bon affichage dans les messageries, pas toujours à jour sur les évolutions HTML-CSS.
Pour contrôler la présentation du texte et des images, il existe aujourd'hui d'autres solutions CSS de mise en page plus adaptée : flexbox, grid, float
Exemple de table :
<table>
<tr>
<td>Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
<td>Cellule 4</td>
</tr>
</table>
Ce qui donne :
| Cellule 1 | Cellule 2 |
| Cellule 3 | Cellule 4 |
On utilise 3 éléments différents pour insérer des tables :
La balise ouvrante <table> et la balise fermante </table> marquent le début et la fin de la table.
La balise <tr> : "table row" (rangée de table), commence et termine les rangées dans le sens horizontal.
La balise <td> : "table data" (données de table), marque le début et la fin de chaque cellule dans les rangées de la table.
Les rangées sont des lignes horizontales de cellules et les colonnes des lignes verticales de cellules :
Cellule 1 et Cellule 2 forment une rangée, Cellule 1 et Cellule 3 une colonne.
Une table peut avoir un nombre illimité de rangées et colonnes.
Les attributs ?
Ces attributs doivent désormais être appliqués par le biais du CSS
- border sert à indiquer l'épaisseur de la bordure autour de la table.
- On peut également fixer la largeur d'une table en pixels ou en pourcentage avec width
- align : indique l'alignement horizontal du contenu dans toute la table, dans une rangée ou dans une seule cellule. Les valeurs : "left", "center" ou "right".
- valign : indique l'alignement vertical du contenu dans une cellule. Les valeurs : "top", "middle" ou "bottom"
- bgcolor : couleur de fond
- background : image de fond
Les attributs colspan et rowspan vont permettre la mise en page de tableaux plus élaborés.
Le terme « colspan » est l'abréviation de « column span » (recouvrement de colonne).
L'attribut colspan est utilisé dans la balise <td> pour indiquer combien de colonnes la cellule recouvre :
<table border="1">
<tr>
<td border="1" colspan="3">Cellule 1</td>
</tr>
<tr>
<td border="1">Cellule 2</td>
<td border="1">Cellule 3</td>
<td border="1">Cellule 4</td>
</tr>
</table>
Ce qui donne :
| Cellule 1 | ||
| Cellule 2 | Cellule 3 | Cellule 4 |
Si on fixe sa valeur à "2", la cellule ne recouvrirait que deux colonnes, et il faudrait insérer une cellule supplémentaire dans la première rangée afin que le nombre de colonnes corresponde dans les deux rangées.
Et pour rowspan ?
l'attribut rowspan indique combien de rangées la cellule doit recouvrir :
<table border="1">
<tr>
<td rowspan="3">Cellule 1</td>
<td>Cellule 2</td>
</tr>
<tr>
<td>Cellule 3</td>
</tr>
<tr>
<td>Cellule 4</td>
</tr>
</table>
Ce qui donne :
| Cellule 1 | Cellule 2 |
| Cellule 3 | |
| Cellule 4 |
La valeur de rowspan est fixée à "3" dans la Cellule 1. Elle indique que la cellule doit recouvrir trois rangées (la sienne propre plus deux autres). Cellule 1 et Cellule 2 sont donc dans la même rangée, tandis que Cellule 3 et Cellule 4 forment deux rangées indépendantes.
<style>
table.tab {
border-collapse: collapse;
}
td, th {
border: 1px solid #333;
}
</style>
<table class="tab">
<thead>
<tr>
<th>Fruits</th>
<th>Légumes</th>
</tr>
</thead>
<tbody>
<tr>
<td>Banane</td>
<td>Choux</td>
</tr>
<tr>
<td>Fraise</td>
<td>Patate</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>Smoothie</td>
<td>Choucroute</td>
</tr>
</tfoot>
</table>
| Fruits | Légumes |
|---|---|
| Banane | Choux |
| Fraise | Patate |
| Smoothie | Choucroute |
thead regroupe les titres du tableau
thead va de paire avec tbody et tfoot qui représente : header, body, footer
| Internat Tarif annuel | ||
| Collège | 6° – 5° | 1850 € |
| Collège | 4° – 3° | 2230 € |
| Lycée | 2° – 1° – T° | 2330 € |
Il est parfois utile de dessiner la table sur un bout de papier avant de commencer le HTML.
Les tables ont été remplacées par le concept de boites pour structurer un document HTML.
puis 
