LES TABLEAUX
Ce n'est pas compliqué mais il faut se concentrer ! ;)
Un tableau se compose de lignes, de colonnes, de cellules...
| Cellule à 1 colonne |
Cellule à 3 colonnes |
| 0 |
1 |
2 |
3 |
Voilà comment afficher ce tableau
<table bgcolor="#ffffff" border="2" bordercolor="#818181" cellspacing="2" width="300">
<tr>
<td align="center" width="150">Cellule à 1 colonne</td>
<td align="center" width="150" colspan="3" rowspan="1">Cellule à 3 colonnes</td>
</tr>
<tr>
<td width="150">0</td>
<td width="50">1</td>
<td width="50">2</td>
<td width="50">3</td>
</tr></table>
Explications
• <table bgcolor="#ffffff" border="2" bordercolor="#818181" cellspacing="2" width="300">
On ouvre la balise du tableau <table et on lui donne des attributs avant de remettre ">" :
bgcolor="#ffffff" : le fond est blanc
border="2" : la bordure a une épaisseur de 2 pixels
bordercolor="#818181" : la bordure est grise
cellspacing="2" : l'espacement entre les cellules est de 2 pixels
width="300" : la largeur du tableau est de 300 pixels
Cette balise est renseignée de ses attributs, on la referme avec ">"
• <tr>
On ouvre une ligne
• <td align="center" width="150">Cellule à 1 colonne</td>
On ouvre une cellule <td et on lui donne des attributs avant de remettre ">"
align="center" : son contenu est centré
width="150" : sa largeur est de 150 pixels
Cette balise est renseignée de ses attributs, on la referme avec ">"
Cellule à 1 colonne : contenu de la cellule
</td> : Fermeture de la cellule
• <td align="center" width="150" colspan="3" rowspan="1">Cellule à 3 colonnes</td>
On ouvre une cellule <td et on lui donne des attributs avant de remettre ">"
align="center" : son contenu est centré
width="150" : sa largeur est de 150 pixels
colspan="3" : cette cellule est en fait composée de 3 colonnes
rowspan="1" : cette cellule ne contient qu'une ligne
Cette balise est renseignée de ses attributs, on la referme avec ">"
Cellule à 3 colonnes : contenu de la cellule
</td> : Fermeture de la cellule
• </tr>
On referme cette ligne pour passer à la suivante
• <tr>
Et hop, on ouvre une 2ème ligne ;)
• <td width="150">0</td>
On ouvre une cellule <td et on lui donne un attribut avant de remettre ">"
width="150" : sa largeur est de 150 pixels
</td> : Fermeture de la cellule
• <td width="50">0</td>
On ouvre une cellule <td et on lui donne un attribut avant de remettre ">"
width="50" : sa largeur est de 50 pixels
</td> : Fermeture de la cellule
On répète la même chose 3 fois
• </tr></table>
</tr> : on referme cette ligne
</table> : on referme le tableau