La mise en page de document par tableau était une technique très utilisée à la fin des années 90 et jusqu’au début des années 2000. Depuis, l’utilisation correcte des feuilles de styles associées à un web sémantique a été largement démocratisé.

1 Web Sémantique

1.1 Rappel

On distingue dans une application web plusieurs types de documents, principalement les 3 suivants :

• Le fichier HTML est la description du document. Il n’a pas de valeur de style ou d’interaction. C’est un fichier texte balisé.
• La feuille de style CSS décrit le comportement de style des divers éléments. Il est interprété par le moteur de rendu du navigateur.
• Le programme Javascript est un programme écrit dans un langage interprété, qui va entre autre nous permettre de modifier le document.

Idéalement, ces 3 langages doivent être écrits dans des documents différents.

Appliquer ces règles facilite énormément la maintenance.

1.2 Balises HTML

HTML défini un nombre fini de balises (contrairement à XML). Ces balises HTML ont la particularité, tout comme dans XML, d’avoir un sens. C’est un sens sémantique. L’erreur courante est de penser que l’utilisation de ces balises donne un sens de style. Il n’en est rien.

En vérité, les navigateurs intègrent depuis leur création une feuille de style par défaut, feuille de style qui est souvent proche entre les éditeurs. C’est pour cela qu’on a tendance à penser qu’il y a un comportement graphique par défaut pour une balise donnée. Il faut savoir que l’utilisateur peut lui même modifier la feuille de style de son navigateur.

A l’origine, l’idée était que l’utilisateur fasse lui même sa feuille de style sur son poste client, et qu’Internet ne fournisse que des documents HTML. Ainsi, chacun aurait eu un web à son gout.

Il ne faut donc pas perdre de vue que les balises HTML n’ont qu’un sens sémantique : <p> signifie paragraphe. <ul> signifie liste non ordonnée.

Il n’y a pas (plus) de balise signifiant gras ou italique (les balises <b> et <i> sont dépréciées). A la place, il existe les balises <em> et <strong> qui signifie respectivement mise en valeuret mise en valeur plus importante, et donc le comportement par défaut est souvent italique et gras.

2 CSS

Le style d’un document est donc totalement géré par un langage propre, CSS. C’est lui qui va nous permettre de faire tout ce qu’on veut. L’apprentissage de ce langage fait l’objet de nombreux ouvrages.

3 Tableaux

Revenons en au HTML. Que signifie les balises table, tr et td, et toutes les autres de la même famille ? Et bien elles doivent être utilisées pour des tableaux. Plutôt simple finalement. Un tableau dans le sens tableau de valeur, avec son en-tête, son pied-de-page, etc.

Utiliser le tableau comme instrument de mise en page pose deux problèmes principaux : la sémantique, donc, mais aussi la compatibilité entre les navigateurs. Avoir le même rendu partout est beaucoup plus difficile avec les tableaux qu’avec les feuilles de style. De plus, si on désire faire de notre page HTML une application à part entière, grâce à Javascript, et que l’ont souhaite manipuler les éléments concernés, on bloquera sur ces fameux tableaux.

On pourra enfin noter la propreté du code. En effet, entre un

<table align="center"><tr><td rowspan="2"><img src="left.gif"></td><td>Menu</td><td rowspan="2"><img src="right.gif"></td></tr><tr><td>Contenu du site</td></tr></table>

Et un

<div id="ma_div"><div id="mon_menu"></div><div id="mon_contenu"></div></div>

par exemple, le choix est vite fait.

4 Exemple

Supposons que nous souhaitions obtenir le résultat suivant :

Une série d’image alignée à droite et pointant chacune vers un lien différent.

4.1 Mauvais code

Voici le code qui peut être fait à l’ancienne manière :

<div align="right">
  <table width="150" border="0">
    <tr>
      <td><div align="center"><a href="http://www.youtube.com/user/LAGguitarsUSA" target="_blank"><img src="private/interface/youtube.png" width="32" height="32" border="0" /></a></div></td>
      <td><div align="center"><a href="http://www.myspace.com/lagguitarsusa" target="_blank"><img src="private/interface/myspace.png" width="32" height="32" border="0" /></a></div></td>
      <td><div align="center"><a href="http://www.facebook.com/pages/LAG-Guitars-USA/237519112623" target="_blank"><img src="private/interface/facebook.png" width="32" height="32" border="0" /></a></div></td>
      <td><div align="center"><a href="http://twitter.com/LAGguitarsUSA" target="_blank"><img src="private/interface/twitter.png" width="32" height="32" border="0" /></a></div></td>
    </tr>
  </table>
</div>

On peut se poser plusieurs questions :

4.1.1 Pourquoi utiliser une div ?

En effet, rien ici ne justifie l’utilisation d’une div. Il faut rappeler qu’il existe sur les éléments HTML deux comportements de base : Inline et Block. Div est un élément bloc. Ici, la div est utilisée pour aligner le contenu à droite. C’est superflu. De même, des div sont utilisées pour centrer les images. C’est également superflu.

4.1.2 Pourquoi utiliser un tableau ?

Alors là… il n’y a simplement pas de réponse. Le tableau a une taille fixe, et il semble qu’elle serve à gérer l’espacement entre les images, qui sont centrées dans leurs cellules.

4.1.3 Quelles sont les autres erreurs dans ce bout de code ?

Les balises images ne possèdent pas l’attribut alt qui est pourtant obligatoire. De même, les attributs border, width ou height n’existent pas. L’attribut target n’existe pas non plus, il était lié aux iframes. Une ouverture dans une nouvelle fenêtre se fait via javascript (comportement de l’application)

4.2 Comment faut il penser l’application ?

La réflexion devrait plutôt ressembler à ceci :

4.2.1 Que souhaitons nous faire ?

Il faut se poser clairement la question : quel est l’objectif final ?

Nous souhaitons avoir une liste de liens images.

4.2.2 Traduite ça en HTML

Il existe une balise dont le sens est liste non-ordonnée. C’est donc celle ci qu’il va falloir utiliser. Chaque lien est un élément de liste. Cette liste est un élément de type en-ligne. Nous pourrons donc appliquer à la liste un alignement à droite.

4.2.3 Quels pourraient être les besoins supplémentaires éventuels

Supposons que nous ayons besoin de faire un traitement sur ces images, à tout hasard, un rollover. Il faut donc penser à identifier chacune des images afin de pouvoir effectuer un traitement Javascript dessus.

4.2.4 Le rendu HTML

<ul>
  <li>
    <a href="http://www.youtube.com/user/LAGguitarsUSA">
      <img src="private/interface/youtube.png" alt="youtube" />
    </a>
  </li>
  <li>
    <a href="http://www.myspace.com/lagguitarsusa">
      <img src="private/interface/myspace.png" alt="myspace" />
    </a>
  </li>
  <li>
    <a href="http://www.facebook.com/pages/LAG-Guitars-USA/237519112623">
      <img src="private/interface/facebook.png" alt="facebook" />
    </a>
  </li>
  <li>
    <a href="http://twitter.com/LAGguitarsUSA">
      <img src="private/interface/twitter.png" alt="twitter" />
    </a>
  </li>
</ul>

Vous pouvez apprécier la différence de lisibilité de code, et à quel point cela emmènera à faciliter la maintenance.

4.2.5 Le style

Normalement contenu dans une feuille de style, il peut arriver que nous n’ayons pas d’autre choix que d’insérer le style à l’aide de l’attribut style, qui contient du code CSS.

Ici, nous devons signifier à notre liste :

• Qu’elle doit flotter à droite.
• Que ses éléments ne doivent pas avoir de puce.

Une rapide recherche google nous donne la solution :

.list_florig {
float:right;
list-style-type:none;
}

.list_florig {
display:inline; //on veut avoir la liste sur une ligne.
}

Et voilà, c’est tout. Ce code suffit à réaliser tout ce dont nous avons besoin.

S’il subsiste des bordures aux images, dues au lien, ceci réglera le problème :

.list_florig img {
border:none;
}