On en parle beaucoup depuis quelques années dans le cadre du xHTML, à savoir comment monter un design élaboré pour un site internet en respectant la sémantique, ce qui en l'occurrence, signifie, sans utiliser de tableau.
Pour commencer, je précise qu'il s'agit de ne pas utiliser de tableaux uniquement pour son design.
Rien ne vous empêche d'en utiliser pour y stocker du contenu, c'est après tout leur fonction ! ;)

Qu'est-ce qu'un tableau de design ?

Premièrement, nous allons définir un cette notion de tableau de design.
Quand-est ce qu'un tableau doit être utilisé, quand-est ce qu'on doit l'éviter.
Tout ceci est évidement assez subjectif. Pour ma part, je considère qu'un tableau ne doit contenir aucune cellule vide.
Evidement, ca n'est pas suffisant. On pourrait donc se dire que un tableau ne doit être la que pour stocker des données, et que tout enrobage graphique à son égard doit être optionnel et peut aussi bien être enlevé sans nuire au design global du site.
Mais plus simplement, on peut se contenter d'utiliser le moins de tableaux que possible.

Qu'est-ce que ca change ?

Bien souvent, on utilisais les tableaux pour structurer facilement les designs des sites.
Bloc multidirectionnellement extensibles, menu, design en colonnes, autant de choses qu'on faisait avec des tableaux.
Aujourd'hui, on vois de moins en moins de tableau.
Mais malheureusement, cela résulte en une surexploitation du javascript, ou par un recul aux niveau de certains designs, de manière à prendre moins de risques.
Il faut également dire que les sites pro se contentent bien souvent de réutiliser des schémas/patrons éprouvés afin ne pas s'embêter côté interopérabilité, entre autre.

Peut-on s'en passer ?

Oui. Mais cela demande une grosse et difficile mise à jour de connaissances et de méthodologie de travail pour les vieux de la vieille.
On peut tout faire sans le moindre tableau, et même bien plus.
Mais cela demande parfois un peu plus de travail, et quelques fois de jolies prises de tête pour déboguer.
Globalement, le problème viens surtout du fait que les tableaux soit interprétés quasiment identiquement sur tous les navigateurs, ce qui est loin d'être le cas pour les alternatives actuelles.
En fin de compte, quand en a pris l'habitude, se passer des tableaux est quand même largement préférable.

Comment ?

Le W3C, ne nous as évidement pas laissé sans alternatives.
Actuellement, la principale réside dans les float.
En second, on peut accessoirement utiliser les display, mais ce dernier n'est pas encore parfaitement implémenté par tous les navigateurs.

Les floats

Les float sont donc une propriété CSS qui permet de faire flotter un élément en dehors du flux.
Concrètement, l'élément concerné se retrouve entouré par le reste du contenu.
Plutôt que vous expliquer le fond de la chose, je vais vous montrer deux possibilités pour réaliser un design composé de trois colonnes avec des floats.





Code (xHTML)<div class="gauche"></div>
<div class="milieu"></div>
<div class="droite"></div>
Code (CSS).gauche, .milieu, .droite
{
float: left;
}
Dans cet exemple, les divs vont se retrouver alignés les uns à côté des autres, un peu comme s'ils étaient des éléments inline.
Important : Un bug récurrent fait que les blocs ainsi flottant perdent leur place dans le design global, en fait, tout ce qui se trouve en bas remontera sur vos blocs, à la manière d'un positionnement absolu.
La solution consiste à placer une balise juste après votre série de blocs flottants :
Code (xHTML)<br style="clear: both;" /> La propriété CSS clear permet de stopper les flottants précédents, de manière à ce que les éléments suivants ne soient pas déplacés dans le flux.

L'autre solution est assez proche :
Code (xHTML)<div class="gauche"></div>
<div class="droite"></div>
<div class="milieu"></div>
Code (CSS).gauche
{
float: left;
}
.droite
{
float: right;
}
Dans ce second cas, le bloc droit est positionné avant le bloc du milieu (dans notre code html) et ensuite rendu flottant à droite avec css.
Ne me demandez pas pourquoi et comment ca marche, mais ca marche ! :))

Les deux méthodes ont leurs avantages et leurs inconvénients, que je vous laisse découvrir par vous même. ;)
Pour un bloc extensible verticalement et horizontalement, ca n'est pas bien plus compliqué, il vous suffit de répéter l'opération 3 fois, une pour chaque ligne.
Après, votre bloc ne sera pas forcément extensible dynamiquement, peut-être aurez vous besoin de spécifier manuellement une largeur ou hauteur pour votre bloc central (celui avec le contenu).

Et je précise aussi que pour ce genre de résultat, CSS3 avec ses images de bordures devrait rendre obsolète ce genre de combines.

Et les displays ?

Je ne m'attarderais pas trop sur cette méthode, étant donné que son résultat est assez variable, surtout sur les différentes versions d'Internet Explorer, comme vous pouvez l'imaginer.
Pour faire court, disons que display est loin ne pas prendre comme valeur que block ou inline.
En effet, il accepte également toute une série de valeurs destinées à simuler le comportement d'un tableau avec de simples divs.
Si vous souhaitez en savoir plus, vous pouvez rechercher les mots-clés "display table" ou encore "display cell" sur votre moteur de recherche.
Mais sachez qu'aucune version d'Internet Explorer (même la 7) ne les comprend, et que j'ai pu noter parfois certains bugs, même avec Firefox.
Vous êtes avertis ! ^^

C'est tout ?

Oui, c'est tout pour l'instant, je préfère vous laisser faire vos propres tests et expérimentations, c'est comme ca qu'on apprend, après tout. ;)

Ce site ainsi que tout son contenu est sous licence Creative Commons.
XHTML 1.0 | CSS 2.0 | Contact | Statistiques | Firefox | Fam³