CSS : on reprend tout à zéro ! (12ème épisode)
Par Joe Gillespie
Cet article est le douzième d'une série qui en compte 15. Chaque épisode sera publié bimensuellement dans nos pages.
Je sais bien qu'on utilise des tableaux pour réaliser des mises en page depuis la préhistoire du Web, mais je pense avoir démontré dans ce feuilleton que les mises en page par CSS offrent davantage de possibilités et de souplesse. Les tableaux sont faits pour présenter des données tabulaires, comme on le ferait avec les feuilles de calcul qu'on utilise pour organiser des chiffres ou des mots en rangs et en colonnes.
Autrefois, avec les anciens navigateurs, il était possible de changer l'aspect des tableaux et de leurs cellules en utilisant les différentes propriétés de tableaux : couleurs de fond, images de fond, etc. Beaucoup de ces caractéristiques sont désormais dépassées et ne sont plus valides ; même s'il est encore possible qu'elles fonctionnent, on ne peut plus compter sur elles. D'ailleurs, on n'a jamais vraiment pu compter dessus. Quand on cherchait à placer une image de fond pour un tableau sous Netscape 4 ou une version antérieure, celle-ci apparaissait individuellement dans chacune des cellules, un peu comme quand on regarde à travers un kaléidoscope, ce qui rendait le tout aussi pénible à faire qu'inutile.
Avant, on pouvait sans problème indiquer une hauteur de tableau en pixels, ou encore en pourcentage de la hauteur de la fenêtre, mais ce n'est plus possible. Les tableaux fixent leur propre hauteur en fonction de leur contenu.
La gestion du style des tableaux avec les CSS peut se révéler un peu délicate, et il est difficile de tout prévoir. On peut construire sa propre structure de tableau en CSS à l'aide de display:table; et de display:table-cell;, en considérant que chaque cellule constitue une boîte (div) séparée, mais dans la plupart des cas, il est plus simple de se contenter de fournir les définitions de style pour les éléments HTML du tableau : table, tr, td, th, etc.
tr représente une rangée de tableau, c'est-à-dire une rangée horizontale de cellules. td est une division de rangée de tableau. On peut le voir comme une colonne, mais il ne se comporte pas comme une colonne, et on ne peut pas indiquer une couleur de fond ni un style d'écriture propre à une colonne.
Les tableaux héritent de certains styles des divs auxquelles ils appartiennent, mais pas de tous. Si la partie body de votre page a pour caractéristiques font-family: verdana, arial, sans-serif style et color:#009, le tableau héritera de celles-ci, mais pas de la taille du texte ni de son alignement. Il y a également une hiérarchie. Toute règle s'appliquant à un td prendra le pas sur celle du tr, qui elle-même passera avant toute règle générale de style imposée pour l'élément table, c'est-à-dire le tableau. Vous pouvez tourner ceci à votre avantage. Si vous choisissez le noir comme couleur de fond de tableau, et le blanc comme couleur de fond du td, et si vous donnez au tableau un écartement des cellules de 2 pixels (cellspacing="2"), vous obtiendrez un tableau avec des cellules blanches séparées par une bordure noire de 2 pixels.
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
td.Bien entendu, vous avez également accès à tous les styles CSS pour les bordures, ce qui signifie que vous n'êtes pas prisonnier des horribles bordures de tableau par défaut en HTML. Vous pouvez également jouer avec les couleurs ou les aspects des bordures pour n'afficher que des lignes verticales ou des horizontales, qui seront pleines, pointillées, hachurées ou autres.
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
| Titre 1 | Titre 2 | Titre 3 | Titre 4 |
|---|---|---|---|
| 1 | 2 | 3 | 4 |
| 1 | 2 | 3 | 4 |
th reçoit une couleur de fond plus sombre.Une autre idée intéressante consiste à attribuer aux tr des images de fond en dégradé de couleur.
Si vous créez une petite image suffisamment haute pour remplir la cellule tout en restant très étroite, disons 8 pixels de large, il sera possible de la répéter horizontalement avec background-repeat: repeat-x, ce qui est plus fin et élégant que des bordures.
Cette petite image (227 octets) peut être répétée horizontalement...
| Rangée 1 | 2 | 3 | 4 |
|---|---|---|---|
| Rangée 1 | 2 | 3 | 4 |
| Rangée 1 | 2 | 3 | 4 |
| Rangée 1 | 2 | 3 | 4 |
Si vous voulez appliquer aux cellules individuelles un style différent de l'ensemble du tableau, vous pouvez le faire en utilisant des définitions de style « en ligne » adjointes aux balises <td> appropriées.
<td style="background-color: #f00">cellule 1</td>
| 1 | 2 | 3 | 4 |
| 2 | 3 | 4 | |
| 1 | 2 | 3 | |
| 1 | 2 | 3 | 4 |
Cette approche, en revanche, a le désavantage de ne pas permettre l'utilisation d'une feuille de style externe. Tout est gravé dans le code même de la page ; mais on peut se l'accorder, de manière exceptionnelle. Une façon plus adroite de styler rangées et colonnes consiste à les placer au sein de leurs propres div et à les nommer ainsi :
#colonne1 td { ... }
#colonne2 td { ... }
Avec cette méthode, vous bénéficiez d'un certain contrôle sans pour autant devoir recourir à une construction de tableau par div individuelles (ce qui reste une excellente solution, si vous en avez le temps et la patience).
Je n'ai pas placé toutes les déclarations de style dans la page, il y en a trop, mais un coup d'oeil sur le code-source vous permettra de comprendre ce qui se passe.
De nombreuses possibilités vous sauteront à l'esprit quand vous commencerez à styler vos tableaux. Mais non, ce n'est pas obligatoirement barbant de faire des tableaux !
Le mois prochain, nous verrons comment styler des formulaires, ainsi que quelques autres petits détails.