Les tableaux en html, c'est quand même
galère !...
D'une mise à jour à l'autre d'une
page contenant un tableau, impossible de se rappeler toute cette
syntaxe !
Pour me faciliter la vie, et la vôtre par la
même occasion, et éviter de retourner sans cesse à
ce poly sur html que j'ai écrit, comme un résumé
des connaissances que j'ai acquises progressivement, j'ai fait la
présente page avec quelques modèles courants.
Vous
n'avez plus qu'à faire comme moi, et recopier le code de celui
dont vous avez besoin !
Et si vous avez un modèle à
me proposer, n'hésitez pas.
Pour visualiser ce code, rien de plus facile
:
Cliquer du bouton droit de la souris n'importe où
dans la page, puis, dans l'option du menu contextuel qui mentionne
"afficher la source" (Internet Explorer), ou "code
source de la page" (Mozilla FireFox). Il ne vous reste plus
qu'à chercher (en appuyant simultanément sur les deux
touches CTRL et F), le numéro du tableau qui
vous intéresse. Il commence par l'instruction <table>,
et se termine par </table>.
Si vous utilisez FireFox,
sélectionnez d'abord le tableau que vous souhaitez recopier,
puis cliquez du bouton droit dans la page. Le menu contextuel qui
s'ouvre vous propose alors "code source de la sélection",
et vous n'aurez que les seules instructions du tableau qui vous
intéresse.
Le tableau classique :
tableau 1 (aligné à gauche, avec le présent titre au dessus )
|
cellule ligne 1 sur les deux colonnes 1 & 2 |
|
|
cellule ligne 2 colonne 1 |
cellule ligne 2 colonne 2 |
|
cellule ligne 1 sur les deux colonnes 1 & 2 |
|
|
cellule ligne 2 colonne 1 |
cellule ligne 2 colonne 2 |
tableau 1 bis (le même, mais centré dans la page, avec son titre en dessous)
tableau 1 ter (encore
le même, aligné à droite) cellule ligne 1 sur les deux colonnes 1 &
2 cellule ligne 2 colonne 1 cellule ligne 2 colonne 2
La présente ligne de code commençant par <p>,
est placée après le code du tableau 1 ter
mais s'aligne curieusement au niveau de la ligne 1 de ce tableau !
Celle-ci est placée après le code de la précédente, et se place à la suite de la précédente, indépendamment du tableau 1 ter à droite.
tableau 1.4 (tableau 1 à plusieurs lignes et ligne de titre)
|
ligne de titre |
|
|---|---|
|
cellule ligne 2 colonne 1 |
cellule ligne 2 colonne 2 |
|
cellule ligne 3 colonne 1 |
cellule ligne 3 colonne 2 |
|
cellule ligne 4 colonne 1 |
cellule ligne 4 colonne 2 |
tableau 1.5 (tableau 1.4 à plus de deux colonnes)
|
ligne de titre |
|||
|---|---|---|---|
|
cellule ligne 2 colonne 1 |
cellule ligne 2 colonne 2 |
cellule ligne 2 colonne 3 |
cellule ligne 2 colonne 4 |
|
cellule ligne 3 colonne 1 |
cellule ligne 3 colonne 2 |
cellule ligne 3 colonne 3 |
cellule ligne 3 colonne 4 |
|
cellule ligne 4 colonne 1 |
cellule ligne 4 colonne 2 |
cellule ligne 4 colonne 3 |
cellule ligne 4 colonne 4 |
Le tableau 1.5 invisible:
tableau 1.6
|
ligne de titre |
|||
|---|---|---|---|
|
cellule ligne 2 colonne 1 |
cellule ligne 2 colonne 2 |
cellule ligne 2 colonne 3 |
cellule ligne 2 colonne 4 |
|
cellule ligne 3 colonne 1 |
cellule ligne 3 colonne 2 |
cellule ligne 3 colonne 3 |
cellule ligne 3 colonne 4 |
|
cellule ligne 4 colonne 1 |
cellule ligne 4 colonne 2 |
cellule ligne 4 colonne 3 |
cellule ligne 4 colonne 4 |
Le tableau 1.6 avec moins de texte dans les cellules se redimentionne au contenu des cellules :
tableau 1.7
|
ligne de titre |
|||
|---|---|---|---|
|
c(2,1) |
c(2,2) |
c(2,3) |
c(2,4) |
|
c(3,1) |
c(3,2) |
c(3,3) |
c(3,4) |
|
c(4,1) |
c(4,2) |
c(4,3) |
c(4,4) |
Le tableau 1.7 ci-dessus, mais contraint de s'afficher sur 100% de la largeur de la page :
tableau 1.8
|
ligne de titre |
|||
|---|---|---|---|
|
c(2,1) |
c(2,2) |
c(2,3) |
c(2,4) |
|
c(3,1) |
c(3,2) |
c(3,3) |
c(3,4) |
|
c(4,1) |
c(4,2) |
c(4,3) |
c(4,4) |
Le tableau 1.8 encadré :
tableau 1.9
|
ligne de titre |
|||
|---|---|---|---|
|
c(2,1) |
c(2,2) |
c(2,3) |
c(2,4) |
|
c(3,1) |
c(3,2) |
c(3,3) |
c(3,4) |
|
c(4,1) |
c(4,2) |
c(4,3) |
c(4,4) |
Le tableau 1.8 matérialisé par son fond noir :
tableau 1.10
|
ligne de titre |
|||
|---|---|---|---|
|
c(2,1) |
c(2,2) |
c(2,3) |
c(2,4) |
|
c(3,1) |
c(3,2) |
c(3,3) |
c(3,4) |
|
c(4,1) |
c(4,2) |
c(4,3) |
c(4,4) |
Un autre tableau classique :
tableau 2
|
cellule ligne 1 colonne 1 sur deux lignes |
cellule ligne 1 colonne 2 |
cellule ligne 1 colonne 3 |
|
cellule ligne 2 forcément sur colonne 2 |
cellule ligne 2 forcément sur colonne 3 |
tableau 2 bis
|
cellule colonne 1, lignes 1 et 2 |
cellule colonne 2 ligne 1 |
cellule colonne 3 ligne 1 |
|
cellule ligne 2 forcément sur colonne 2 |
cellule ligne 2 forcément sur colonne 3 |
|
|
cellule colonne 1, lignes 3 et 4 |
cellule ligne 3 colonne 2 |
cellule ligne 4 colonne 3 |
|
cellule ligne 2 forcément sur colonne 2 |
cellule ligne 2 forcément sur colonne 3 |
Pour me contacter, me proposer d’ajouter un modèle simple de tableau à cette page, me signaler un lien mort, cliquez ici. D'avance merci.
Dernière mise-à-jour de cette page : .