Jouer avec les tableaux
Article mis en ligne le 9 novembre 2016
dernière modification le 9 avril 2021

par Jean Christophe Villeneuve

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

Mon tableau
Colonne 1Colonne 2Colonne 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.

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 1Colonne 2
texte là aussi
encore et toujours

Résultat sans la div  :

Colonne 1Colonne 2
texte là aussi
encore et toujours