Tableaux

Les tableaux sont décrits par l’élément <table >.

Un tableau simple

<table > définit l’ensemble du tableau. À l’intérieur, il faut décrire les lignes du tableau et ses cellules.
L’élément <tr> décrit les lignes, et <td>les cellules.
On déclare dans l’ordre <table>, puis <tr> et enfin <td>.

<table> 
<tr>                          <!--Nouvelle ligne du table-->
<td>Cellule (1 2) </td>
<td>Cellule (1 2) </td>
</tr>

<tr>                          <!--Nouvelle ligne du table-->
<td>Cellule (2 1) </td>
<td>Cellule (2 2) </td>
</tr>

<tr>                         <!--Nouvelle ligne du table-->
<td>Cellule (3 1) </td>
<td>Cellule (3 2) </td>
</tr>
</table>

Nous ajoutons une bordure et un titre pour le tableau:

<!-- Ajout de bordure avec l'attribut 'border'. Le chiffre 2 correspond à l'épaisseur de la bordure -->

<table border="2">  

<!-- la balise caption pour ajouter le titre -->

<caption>Titre du tableau</caption>

<tr>
<td>Cellule (1 2) </td>
<td>Cellule (1 2) </td>
</tr>

<tr>
<td>Cellule (2 1) </td>
<td>Cellule (2 2) </td  </tr>

<tr>
<td>Cellule (3 1) </td>
<td>Cellule (3 2) </td>
</tr>
</table>

Tableaux évolués

Le tableau peut être divisé en 3 parties:
L’entête du tableau: limité entre les balises <thead> et </thead>
Le corps du tableau: limité entre les balises <tbody> et </tbody>
Le pied du tableau: limité entre les balises <tfoot> et </tfoot>

la partie du tableau dont les cellules sont définies par des

Dans les parties: <thead> et <tfoot>, les <td> sont remplacés par <th>

<table border="1">  

<caption>Tableau élaboré</caption>

<thead>
<tr>
<th>Titre col 1 </th>
<th>Titre col 2 </th>
</tr>
</thead>

<tbody>
<tr>
<td>Cellule (1 2) </td>
<td>Cellule (1 2) </td>
</tr>
<tr>
<td>Cellule (2 1) </td>
<td>Cellule (2 2) </td>
</tr>
<tr>
<td>Cellule (3 1) </td>
<td>Cellule (3 2) </td>
</tr>
</tbody>

<tfoot>
<tr>
<th>Piel 1 </th>
<th>Pied 2 </th>
</tr>
</tfoot>
</table>

Fusionner des lignes ou des colonnes

l’attribut colspan pour fusionner des colonnes et l’attribut rowspan pour fusionner des lignes.

<table border="1">  
<tr>
<td>Cellule (1 2) </td>
<td>Cellule (1 2) </td>
<td>Cellule (1 3) </td>
</tr>

<tr>
<td>            Cellule (2 1)          </td>
<td colspan="2">Cellules (2 2) et (2 3)</td>
</tr>

<tr>
<td>Cellule (3 1) </td>
<td>Cellule (3 2) </td>
<td>Cellule (3 3)</td>
</tr>
<tr>
<td rowspan="2">Cellules (4 1) et (5 1)</td>
<td>            Cellule  (4 2) </td>
<td>            Cellule  (4 3)</td>
</tr>
<tr>
<td>Cellule (5 2) </td>
<td>Cellule (5 3)</td>
</tr>

</table>