Les tableaux constituent un moyen facile de présenter l’information en rangées et colonnes de cellules.
Pour tirer profit de cet article, mieux vaut connaître la syntaxe HTML des tableaux. La balise <table>, qui permet d’insérer un tableau dans la page, est l’une des balises les plus utilisées en HTML.
Les tableaux sont créés dans SPIP de la façon suivante :
||Légende du Tableau|Résumé du Tableau||
| {{Nom}} | {{Date de naissance}} | {{Ville}} |
| Jacques | 5/10/1970 | Paris |
| Claire | 12/2/1975 | Belfort |
| Martin | 1/31/1957 | Nice |
| Marie | 23/12/1948 | Perpignan |
ce qui produit cet affichage :
| Nom | Date de naissance | Ville |
|---|---|---|
| Jacques | 5/10/1970 | Paris |
| Claire | 12/2/1975 | Belfort |
| Martin | 1/31/1957 | Nice |
| Marie | 23/12/1948 | Perpignan |
Les styles permettent de paramétrer finement l’affichage des tableaux :
- table.spip permet de modifier le comportement général du tableau, notamment ses dimensions, ses marges et sa position (calé à gauche, centré, etc.) ;
- table.spip caption concerne la légende (optionnelle) du tableau ;
- table.spip tr.row_first concerne la « première ligne » du tableau (ici en jaune). Pour que la première ligne soit prise en compte comme rangée de titres, il faut que chacun des éléments qu’elle contient soient en gras ;
- table.spip tr.row_odd et table.spip tr.row_even pour les autres lignes. Un des intérêts de ces styles est la possibilité d’appliquer deux couleurs différentes via « row_odd » et « row_even » (ici, gris clair et gris foncé), permettant d’alterner les couleurs d’une ligne à l’autre, ce qui facilite agréablement la lecture du tableau.
- table.spip th et table.spip td concernent les cellules du tableau, et permettent, par exemple, de contrôler leur espacement intérieur (padding), afin d’aérer la présentation.