Conception de pages pour un navigateur
Les balises pour les tableaux
Structure d'un tableau simple
Il existe plusieurs balises pour la structure d'un tableau, les trois principales sont :
<table>...</table>pour délimiter le tableau<tr>...</tr>pour délimiter chaque ligne au tableau<td>...</td>pour délimiter les cellules normales d'une ligne
Toutes les lignes doivent contenir le même nombre de cellules.
La structure d'un tableau sans en-tête est :
<table>
<tr>
<td>...</td>
<td>...</td>
</tr>
<tr>
<td>...</td>
<td>...</td>
</tr>
...
</table>
Structure d'un tableau avec des cellules d'en-tête en tête de ligne
Pour ajouter des cellules en tête de ligne ou de colonne, il suffit d'utiliser la balise <th>...</th> à la place des balises <td>...</td> pour les cellutes d'en-tête.
Structure d'un tableau avec fusions de cellules
La fusion de cellules d'un tableau se fait à l'aide des attributs clospan et rowspan d'une balise <td>.
Fusion de deux cellules en ligne
Exemple :
<table style="width:100px; border:2px black solid;">
<tr>
<td colspan="2">L1 C1</td>
</tr>
<tr>
<td>L2 C1</td>
<td>L2 C2</td>
</tr>
</table>
| L1 C1 | |
| L2 C1 | L2 C2 |
Remarque : chaque ligne contient toujours "virtuellement" le même nombre de cellules.
Fusion de deux cellules en colonne
Exemple :
<table style="width:100px; border:2px black solid;">
<tr>
<td>L1 C1</td>
<td rowspan="2">L1 C2</td>
</tr>
<tr>
<td>L2 C1</td>
</tr>
</table>
| L1 C1 | L1 C2 |
| L2 C1 |
Remarque : chaque ligne contient toujours "virtuellement" le même nombre de cellules.
Mise en forme d'un tableau
La mise en forme d'un tableau se fait à l'aide des styles (Cf. Les styles pour les tableaux).
