Faire un tableau avec les raccourcis typographiques de Spip

(1)

Faire un tableau avec les raccourcis typographiques de Spip

La théorie...

On pose la structure du tableau

On construit la structure du tableau grâce au « pipe » ([Alt Gr+6] qui donne « | »). Par exemple un tableau de 4 colonnes (5 pipes séparés par 4 espaces) et 3 lignes (3 lignes de 5 pipes) :

| | | | |

Remplissage de la structure

On remplit cette structure avec le contenu, l’espace entre deux pipes étant une « cellule » du tableau :

Ce qui donne :

cellule 1 cellule 2 cellule 3 cellule 4 cellule 5 cellule 6 cellule 7 cellule 8 cellule 9 cellule 10 cellule 11 cellule 12

Des titres de colonnes

La première ligne du tableau donne normalement le titre des colonnes. Elle est présentée différemment des autres lignes quand Spip affiche le tableau. On identifie ces titres de colonnes grâce à des accolades doubles qui entourent le contenu de leurs cellules :

| {{cellule 1}} | {{cellule 2}} | {{cellule 3}} | {{cellule 4}} |

Ce qui donne :

cellule 1 cellule 2 cellule 3 cellule 4 cellule 5 cellule 6 cellule 7 cellule 8 cellule 9 cellule 10 cellule11 cellule 12

Un titre pour le tableau

Un tableau doit comporter aussi un titre et une description. Le titre est affiché sous le tableau (pour être en cohérence avec les autres figures du site). La description, facultative, n’est pas affichée à l’écran, elle est destinée à être lue aux déficients visuels.

On les ajoute en tête du tableau, délimités par des doubles pipes :

||Essai de titre de tableau|Descriptif séparé par un simple pipe du titre... les deux sont encadrés par un double pipe ||

| {{cellule 1}} | {{cellule 2}} | {{cellule 3}} | {{cellule 4}} |

(2)

Ce qui donne :

Essai de titre de tableau cellule 1 cellule 2 cellule 3 cellule 4

cellule 5 cellule 6 cellule 7 cellule 8 cellule 9 cellule10 cellule 11 cellule 12

Et la pratique...

Structure

Il y a 4 informations importantes (colonnes) : le type d’article, la taille verticale, la taille horizontale, s’il doit y avoir une bordure ou non. Il y a 5 types de logos (5 lignes+1 ligne de titre des colonnes).

Donc 6 lignes (lignes) de 5 pipes espacés (colonnes) :

| | | | |

Les titres de colonnes :

| {{type d'article}} | {{taille horizontale}} | {{taille verticale}} | {{type de bordure}} |

| | | | |

Ce qui donne :

type d’article taille horizontale taille verticale type de bordure

On remplit les cellules :

| Article pédagogique | 130px | 57px | si fond blanc, tracez un cadre noir autour |

| Images du mois | 280px | 210px | ne rajoutez pas de cadre, c’est automatique |

| Événements du mois | 280px | 120px | si fond blanc, tracez un cadre noir autour |

| Sites coup de cœur | 280px | 100px | ne rajoutez pas de cadre, c’est automatique |

Ce qui donne :

type d’article taille horizontale taille verticale type de bordure Article pédagogique 130px 57px si fond blanc, tracez un cadre noir autour

Images du mois 280px 210px ne rajoutez pas de cadre, c’est automatique

Événements du mois 280px 120px si fond blanc, tracez un cadre noir autour

(3)

type d’article taille horizontale taille verticale type de bordure

Sites coup de cœur 280px 100px ne rajoutez pas de cadre, c’est automatique Analyse de produit max. 300px max. 300px si fond blanc, tracez un cadre noir autour

On rajoute le titre et le descriptif :

||Taille et bordure des logos des productions BIG|Tableau récapitulant les tailles qui doivent être employées pour logos des articles et sites placées en Une du site BIG||

Ce qui donne :

Taille et bordure des logos des productions BIG

type d’article taille horizontale taille verticale type de bordure Article pédagogique 130px 57px si fond blanc, tracez un cadre noir autour

Images du mois 280px 210px ne rajoutez pas de cadre, c’est automatique

Événements du mois 280px 120px si fond blanc, tracez un cadre noir autour Sites coup de cœur 280px 100px ne rajoutez pas de cadre, c’est automatique Analyse de produit max. 300px max. 300px si fond blanc, tracez un cadre noir autour

Fusion de cellules

On peut peaufiner en fusionnant les deux cellules identiques du tableau donné en exemple dans la ligne de l’analyse de produit (dernière ligne). La fusion de la cellule précédente se fait en indiquant « < » dans la cellule :

Ce qui donne :

Taille et bordure des logos des productions BIG

type d’article taille horizontale taille verticale type de bordure Article pédagogique 130px 57px si fond blanc, tracez un cadre noir autour

Images du mois 280px 210px ne rajoutez pas de cadre, c’est automatique

Événements du mois 280px 120px si fond blanc, tracez un cadre noir autour Sites coup de cœur 280px 100px ne rajoutez pas de cadre, c’est automatique Analyse de produit max. 300px si fond blanc, tracez un cadre noir autour

Avec '^", on peut fusionner avec la cellule du dessus (ici, dans les lignes Événements du mois et Sites coup de cœur dont une cellule est fusionnée avec celle de la ligne Images du mois) :

| Événements du mois |^| 120px | si fond blanc, tracez un cadre noir autour |

(4)

| Sites coup de cœur |^| 100px | ne rajoutez pas de cadre, c’est automatique |

Ce qui donne :

Taille et bordure des logos des productions BIG

type d’article taille horizontale taille verticale type de bordure Article pédagogique 130px 57px si fond blanc, tracez un cadre noir autour Images du mois

Faire un tableau avec les raccourcis typographiques de Spip