Les tableaux en HTML

1. Dans quels cas utiliser les tableaux ?
2. Les balises de base
3. Que mettre dans un tableau
4. Taille du tableau et des cellule
5. Alignement du tableau et des cellules
6. Bordures, espacements et marges
7. Fusionner lignes et colonnes.
8. Couleur et image de fond
9. Encore plus…

Dans quels cas utiliser la balise <TABLE> ?

En premier lieu pour mettre en forme des tableaux de données mais aussi et surtout pour mettre en page son propre site web. En effet, on a tous eu besoin d’écrire du texte sur plusieurs colonnes, d’aligner des paragraphes avec des images… En HTML, la balise <TABLE> permet de faire de la véritable mise en page et de construire des pages farfelues comme d’autres très sérieuses et rigoureuses. Toute charte graphique stricte comme fantaisiste a longtemps nécessité l’emploi des tableaux. Mais avec l’apparition des blocs DIV et des feuilles de styles, on peut désormais s’en passer.

Les balises de base

Le tableau se défini grace à la balise <TABLE> qui doit absoluement être refermée : </TABLE>. Les navigateurs internet chargent d’abord entièrement le tableau avant de l’afficher, c’est pourquoi il ne faut surtout pas oublier de refermer la balise <TABLE> car sinon votre tableau ne sera pas vu par les internautes. Il est également important de ne pas mettre en ligne des tableaux trops volumineux, préférez toujours plusieurs petits tableaux plutôt qu’un seul très gros et long à charger.
Comme dans un tableur, on parle de cellules constitutives d’un tableau. C’est-à-dire que l’intersection d’une colonne avec une ligne donne une cellule. Un tableau peut contenir une seule cellule, c’est-à-dire une seule colonne et une seule ligne ou bien autant de cellules que vous voudrez sachant que le nombre de colonnes peut être différents du nombre de lignes. On commencera dès maintenant à mettre une bordure aux tableaux pour les visualiser dans nos exemples grace à l’atribut BORDER.
Il faut commencer par ouvrir une balise <TR> pour commencer une ligne et la refermer </TR> pour terminer la ligne. Mais cela ne suffit toujous pas à la création d’un tableau car il faut également définir les colonnes. Et là, c’est un peu moins facile puisqu’il faut insérer entre les balises lignes autant de couple correspondant à la colonne qu’il y a de colonnes. Le couple <TD> et </TD> correspond à la colonne. A l’intérieur d’une ligne (couple <TR> </TR>), il faut placer autant de couples<TD> </TD> qu’il y a de colonnes dans le tableau. Attention ! il faut donc mettre un même nombre de colonnes dans chaque ligne.

……

Si le lien ne fonctionne pas correctement, veuillez nous contacter (mentionner le lien dans votre message)
Les tableaux en html (200 KO) (Cours PDF)