Les tableaux

Cliquez ici pour voir le code de cette page

Tableau simple

Je vais tout d'abord vous montrer un tableau de largeur 500 pixels, centré horizontalement :

Ligne 1, colonne 1	Ligne 1, colonne 2
Ligne 2, colonne 1	~~Ligne 2, colonne 2~~

Espace cellules - contenu

On peut mettre 20 pixels entre le bord des cellules et leur contenu pour aérer, et mettre le fond du tableau en jaune et celui d'une ligne en bleu :

Ligne 1, colonne 1	Ligne 1, colonne 2
Ligne 2, colonne 1	Ligne 2, colonne 2

Espace entre deux cellules

On peut mettre 20 pixels entre deux cellules, et mettre le fond du tableau en jaune et celui d'une ligne en bleu :

Ligne 1, colonne 1	Ligne 1, colonne 2
Ligne 2, colonne 1	Ligne 2, colonne 2

Fusion de cellules

On peut décider de fusionner plusieurs cellules horizontalement ou verticalement, dans un tableau de largeur 50% de la page par exemple :

Ligne 1, colonne 1	Ligne 1, colonne 2
Ligne 2, colonne 1, fusionnée (occupe deux colonnes)
Ligne 3, colonne 1	Ligne 3, colonne 2
Ligne 4, colonne 1, fusionnée avec la cellule du dessous	Ligne 4, colonne 2
Ligne 4, colonne 1, fusionnée avec la cellule du dessous	Ligne 5, colonne 2

Mise en page

On peut imaginer de faire une mise en page de site avec un tableau, en mettant la taille de la bordure à 0 :

Tableau de largeur 100% de la page avec fond jaune
Première ligne avec titre en gras centré (deux colonnes fusionnées), en vert
Seconde ligne première colonne avec un menu de largeur 20% (deux lignes fusionnées), en bleu
Seconde ligne deuxième colonne avec contenu, alignement justifié
Troisième ligne deuxième colonne avec pied de page, en italique et en rouge (informations, ...)

Cet exemple vous montre comment en connaissant juste ce que l'on vient de voir on peut créer une page déjà tout à fait satisfaisante... Cliquez sur le lien ci-dessous ! (on verra comment faire des liens pour les menus dans l'exemple 3...)

Exemple de mise en page simple avec tableau...