1. Un texte lisible |
* des caractères pas trop petits, * des polices de caractère ..... |
2. un affichage rapide | Ne surchargez pas vos pages ... |
3. Une bonne organisation | Un article clair, pouvant ... |
4. Une architecture simple |
Vos visiteurs ne passeront pas de temps à ... |
5. l'esthétique |
L'esthétique est important ... |
Vous avez vu que j'utilise assez souvent les tableaux quand je fournis des listes assez longues, avec des explications sur les éléments de la liste.
J'ai repris en haut de cet article un résumé du tableau paru dans l'article
"Les 5 règles d'Or pour construire votre site".
1. A quoi sert un tableau ?
1.1 Ranger ses informations
Mettre des informations sous forme de tableau est parfois utile si on souhaite qu'elles apparaissent clairement à nos visiteurs.
Elles sont alors "rangées" et plus faciles à lire
1.2 Avoir un visuel graphique, et pas seulement du texte
Cela permet d'avoir une représentation "graphique" et ordonnée de différents textes ou images relatifs à un même sujet.
1.3 Faire des alignements
Enfin, c'est un moyen simple de réaliser des alignements : En utilisant un tableau, vous mettez facilement 2 informations (ou 2 images) l'une à côté de l'autre, par exemple.
Dans ce cas, le tableau n'est qu'un support qui sera transparent (pas de bordure) et qui n'est utilisé que pour aligner vos données.
J'utilise ce procédé en bas de mes articles, pour aligner sur une même ligne le bouton de retour à l'index des articles et celui du vote pour l'article.
2. Construire un tableau
2.1 Balises HTML pour faire un tableau
La balise de définition d'un tableau est TABLE.
Il faudra donc "ouvrir" cette balise en début de code <table> et la refermer en fin de code </table>
2.2 Paramétrer son tableau
la balise <th> définit la cellule d'en-tête d'un tableau
la balise <tr>sert à créer une ligne dans un tableau. Cette balise est encadrée par la balise <table>.
la balise <td>sert à créer une nouvelle cellule dans un tableau. Cette balise est encadrée par <tr>
l'argument border définit la taille de la bordure
la largeur est définie par width
3. Syntaxe complète d'un tableau
3.1 Code html
<table style="width: 300px;" border="1" align="center">
<tbody>
<tr>
<td><strong>Ligne 1 colonne 1</strong></td>
<td><strong>Ligne 1 colonne 2</strong></td>
</tr>
<tr>
<td>Ligne 2 colonne 1</td>
<td>Ligne 2 colonne 2</td>
</tr>
</tbody>
</table>
3.2 Explications
<table Ouverture de la balise pour tableau
style="width: 300px;"largeur du tableau de 300 pixels
border="1" bordure épaisseur 1 pixel
align="center"> centrage du tableau et fermeture balise
<tr> <td><strong>Ligne 1 colonne 1</strong></td> 1ère ligne, avec texte en gras
<td><strong>Ligne 1 colonne 2</strong></td> nouvelle cellule, donc seconde colonne
...
</table> fin du tableau
3.3 Visualisation du tableau
Ligne 1 colonne 1 | Ligne 1 colonne 2 |
Ligne 2 colonne 1 | Ligne 2 colonne 2 |
![]() |
![]() ![]() |