Encouragés par les incompatibilités entre Netscape et Microsoft Explorer dans les années 1990, les développeurs se sont précipités sur les tableaux pour assurer à leurs pages html un affichage le plus uniforme possible par les différents navigateurs, n’hésitant pas à imbriquer un tableau dans un autre, puis dans un autre, etc.
C’était avant l’essor des feuilles de style et leur acceptation de plus en plus large par les navigateurs Web.
Aujourd’hui, constuire un tableau pour y stocker autre chose que des données statistiques, des résultats d’enquête, etc. [2], pose des problèmes d’accessiblité, de facilité d’utilisation et de maintenance :
l’affichage des tableaux est lent.
Un tableau ne s’affiche qu’une fois toutes les cellules traitées. De plus, il comporte souvent de nombreuses balises par rapport à son contenu (en tout cas davantage que si la mise en page est définie dans une feuille de style). Imaginez le travail lorsque plusieurs tableaux sont imbriqués les uns dans les autres…
les tableaux ne sont pas accessibles à tous les navigateurs.
Un assistant numérique, un téléphone mobile capable de surfer sur votre site ou un navigateur Braille, lisant le tableau ligne de code après ligne de code, a du mal à reconstituer la forme du tableau.
mettre à jour un tableau est plus complexe que mettre à jour une page html dont l’affichage est défini dans une feuille de style.
L’exemple ci-dessous de construction d’une page html sans tableau vous montrera, je l’espère, qu’ajouter une colonne ou une ligne est chose aisée.
Construire un tableau… sans tableau, mais avec une feuille de style
Que vous construisiez votre site de A à Z ou que vous utilisiez un outil comme SPIP, vous souhaiterez très certainement disposer sur vos pages Web un menu (par exemple à gauche), un bandeau (en haut, au hasard) et un dernier cadre contenant le contenu spécifique de la page [3], comme ci-dessous :
Nous avons fait l’exercice. Le résultat se trouve à www.generationcyb.net/IMG/pageaccueil.html pour la page html et www.generationcyb.net/IMG/mafeuille.css pour la feuille de style.
Et notre page passe avec succès le test de validation xhtml 1.0 sur http://validator.w3.org !
Vous pouvez télécharger ces deux fichiers et les décortiquer à votre aise :-]
Sources :
On peut également lire le tutoriel libre http://css.alsacreations.com/Faire-une-mise-en-page-sans-tableaux/Construire-un-site-sans-tableaux, et voir http://pompage.net/pompe/csspratique. http://openweb.eu.org/articles/problemes_tableaux
et article Construisez un site Web sans tableaux, du hors série Développement Web de la revue Linux pratique, juin-juillet 2005.
[1] Voir notre article . [2] Voir alors l’article d’Openweb.org qui décrit la manière de faire accessible et respectueuse des standards W3C : http://openweb.eu.org/articles/tableaux_css. [3] C’est à peu près ce que proposent les squelettes nus de SPIP, qui sont bien construits avec des feuilles de style et non pas des tableaux (vous pouvez le vérifier !).
Mis en ligne le jeudi 18 août 2005
- L’ordinateur peut aider à l’apprentissage de la lecture… mais reconduit-il vers le livre ?
- Atelier GIMP : créer un masque avec GIMP 2.0
- Questions et conseils pour concevoir un dispositif de formation à distance
- Créer un formulaire sur un site Spip
- Musique en ligne et P2P
Generationcyb.net est motoris´ par Spip 1.9.2e
associ´ a un squelette spip Rizom
