Bandeau

Site de démonstration du jeu de squelettes ESCAL fonctionnant sous SPIP3 et mis à la disposition des Etablissements SColaires de l’Académie de Lyon... et de qui veut.

Utilisé à ce jour dans 177 sites
Jouer avec les tableaux
Article mis en ligne le 9 novembre 2016
dernière modification le 21 février 2023

par Jean Christophe Villeneuve

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)

.article293 th:first-child {
width: 15%;
}
.article293 th:nth-child(2){
width: 20%;
} 

et dans l’article

||Mon tableau|||
|{{Colonne 1}}|{{Colonne 2}}|{{Colonne 3}}|
|Texte 1-1|Texte 2-1|Texte 3-1|
|Texte 1-2|Texte 2-2|Texte 3-2|

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 avec un peu de css toujours dans /squelettes/styles/perso.css.

Un exemple pour avoir des tableaux blancs avec des bords de cases noirs :

table.spip th, table.spip td{
background-color: white;
border: 1px solid black;
}

et pour cibler un article XX précis

.articleXX table.spip th, .articleXX table.spip td{
background-color: white;
border: 1px solid black;
}

Et si vous voulez jouer avec les lignes du tableau :

Ligne d’entête

table.spip tr.row_first{
background-color: blue;
}

Lignes impaires

table.spip tr.row_odd.odd{
background-color: blue;
}

Lignes paires

table.spip tr.row_even.even{
background-color: blue;
}

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 :

<div class="tableau-transparent">
 
|{{Colonne 1}}|{{Colonne 2}}|
|texte |là aussi|
|encore|et toujours|
 
</div>

Ensuite, dans le fichier perso.css on va rajouter ceci :

/* Pour faire des tableaux transparents */
.tableau-transparent th, 
.tableau-transparent td, 
.tableau-transparent tr{
	background-color: transparent !important ;
	border-color: transparent !important ;
}

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
qrcode:https://escal.edu.ac-lyon.fr/spip/spip.php?article293

Plan du site Contact Mentions légales Données personnelles et cookies Espace privé squelette RSS

2009-2023 © Escal - Tous droits réservés
Haut de page
Réalisé sous SPIP
Habillage ESCAL 4.6.0