Etape n°5


Voilà, il ne reste qu'à copier les styles dans une feuille (ici pagecss.css) et lier la feuille avant la balise </head> :

<link rel="stylesheet" href="pagecss.css" type="text/css" />

Elle sera utilisable avec toutes les pages du site.

Un titre pour un tableau avec trois colonnes

Gauche

Centre

Droite

Le texte disparaît

s'il dépasse

les possibilités de l'écran

afin de conserver

l'alignement.

 

 

 

 

Un titre pour un tableau avec deux colonnes

Colonne de gauche large

colonne étroite

texte centré

caractères gras

 

 

Une colonne à gauche occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.
Une colonne à droite occupant la moitié de la partie contenu de la page avec une marge à droite et à gauche.

Voilà donc, ni tableau, ni javascript, mais quelques navigateurs seront déroutés.

Avec les navigateurs récents, on peut utiliser une liste pour le "tableau" au lieu de toutes ces divisions.

Pour rendre la feuille compatible avec d'autres navigateurs, passez à la page suivante ou examinez les autres feuilles utilisées (et aussi les "alternate stylesheets") pour ce site.

Les limites de CSS pour simuler un tableau apparaîssent ici (modifiez la taille de la fenêtre et les cellules vont se déplacer ou ajoutez #content{min-width:620px;} pour Mozilla, une division <div style="clear:both;"></div> avant chaque nouvelle ligne...).
Il est parfois facile de revoir la présentation pour profiter des avantages du positionnement par CSS, mais pour afficher des données, un tableau avec CSS reste la meilleure solution.

A vous maintenant de choisir une présentation et d'utiliser CSS.