Il a longtemps été impossible d'obtenir des colonnes de même taille sans effectuer de bidouillages : avec des images, du JavaScript ou d'autres techniques qui ne touchent parfois pas toutes les personnes ou ne sont pas facilement adaptables (certaines techniques vous demanderont de recommencer toute la procédure si vous désirez écarter un peu plus les colonnes). Ce tutoriel présente deux techniques rendues possibles par l'utilisation de CSS3, l'une d'entre elles vous démontrera qu'il est possible de simuler le comportement des tableaux pour parvenir à nos fins, tandis que l'autre utilisera une fonctionnalité prévue uniquement à cet effet.

Avant l'arrivée et la popularisation de CSS, les tableaux remplissaient malgré eux cette fonction ; il a, par ailleurs, été démontré sous beaucoup d'angles que cette option était à proscrire. Notamment au niveau de la sémantique : un tableau est fait pour représenter des données. À la lecture de ces lignes, vous devez sûrement vous demander pourquoi je vous explique de nouveau cela (car je suis sûr que vous le saviez déjà auparavant) ; nous allons exploiter ces fonctionnalités pour produire l'effet escompté. ;)

Un autre moyen d'atteindre notre but, de façon plus claire mais compatible avec moins de navigateurs, est d'utiliser les nouvelles propriétés définies avec la norme CSS niveau 3 qui permettent de créer des colonnes de texte dans n'importe quel élément. Nous aborderons ce sujet, accompagné d'un sujet de travaux pratiques, à la fin de ce tutoriel.


L'auteur