Mettre en place un tableau
Il existe plusieurs méthodes :
Utiliser le pipe "|" (barre verticale obtenue avec AltGr +6)
C’est la méthode de base.
En savoir plus : titre et descriptif du tableau pour l’accessibilité, titre des colonnes, erreurs à éviter, fusion de cellules.
Mieux : utiliser l’icône dédiée du plugin Enluminures typographiques
Ce plugin propose plusieurs raccourcis typographiques supplémentaires et permet aussi une construction de tableau plus graphique mais on ne peut pas fusionner les cellules.
Si cela suffit pour tableau simple, cela devient vite prise de tête pour les tableaux plus complexes.
Encore mieux : Importer un tableau depuis un fichier csv
On remplit son tableau avec un tableur et on enregistre le fichier au format csv.
On téléverse ce fichier dans l’article comme n’importe quel document.
On l’affiche avec le raccourci
Mais cette méthode supprime les cellules fusionnées.
Et faire un tableau important avec des cellules fusionnées devient vite un cauchemar avec la méthode des pipes.
Le must : Importer un tableau au format odt
On construit son tableau complexe avec des cellules fusionnées dans un traitement de texte et on l’enregistre au format odt.
On crée un nouvel article à partir de ce fichier grâce au plugin odt2spip.
On copie-colle le tableau obtenu dans l’article de son choix.
Jouer avec les largeurs de colonnes
Par défaut, les colonnes d’un tableau s’adaptent à leurs contenus.
Mais on peut modifier ce comportement avec un peu de CSS à placer dans un fichier perso.css qui doit se trouver dans /squelettes/styles
Un exemple :
Un tableau à 3 colonnes de tailles différentes : on retaille la première et la deuxième avec ce code css dans perso.css
On ne modifie le tableau que pour cet article (le 293)
et dans l’article
donne
| Colonne 1 | Colonne 2 | Colonne 3 |
|---|---|---|
| Texte 1-1 | Texte 2-1 | Texte 3-1 |
| Texte 1-2 | Texte 2-2 | Texte 3-2 |
Jouer avec les couleurs
Les couleurs d’un tableau vous gênent ? Pas de souci, on peut les changer avec un peu de css toujours dans /squelettes/styles/perso.css.
Un exemple pour avoir des tableaux blancs avec des bords de cases noirs :
et pour cibler un article XX précis
Et si vous voulez jouer avec les lignes du tableau :
Ligne d’entête
Lignes impaires
Lignes paires
Faire un tableau "transparent"
Il peut être intéressant, pour certains tableaux, de n’avoir ni fond, ni bords visibles. Comme par exemple pour aligner 3 images horizontalement.
Voilà comment procéder.
Dans l’article, on va mettre le tableau dans une "div" comme dans cet exemple :
Ensuite, dans le fichier perso.css on va rajouter ceci :
Résultat avec la div :
| Colonne 1 | Colonne 2 |
|---|---|
| texte | là aussi |
| encore | et toujours |
Résultat sans la div :
| Colonne 1 | Colonne 2 |
|---|---|
| texte | là aussi |
| encore | et toujours |