Les tableaux dans MediaWiki, sans trop se compliquer la vie

Oh, ça rime ! 😀

Après un gadget JS la semaine dernière, voici je crois venu le temps de la simplification de la vie en matière de syntaxe wiki, tout en conservant l’immense majorité des fonctions dont on pourrait avoir besoin.

Manuel d’utilisation
Users Guide

Françaismore to come… 😉

Là encore, c’est simple, même moi je m’y perds de temps en temps, en matière de wikisyntaxe pour les tableaux HTML, diverses questions se posent :

  • Un pipe | ou deux ?
  • Mais alors il faut aller à la ligne quand ?
  • Euh, ça y est, je voulais ajouter un peu de CSS et j’ai réussi à tout casser, comment ça se fait ?
  • Quelqu’un a du paracétamol ou de l’aspirine ?
  • Rhââââ mais boudidiou, tu vas marcher comme je veux, saleté, oui ?

La réponse fournie à toutes ces questions va généralement du basique « bah j’en sais rien non plus », dans 67,2% des cas, au moins bateau « RTFMN »1, qui représente tout de même 11,4% des cas2.

Mais dans l’ensemble, il faut bien admettre qu’à moins de lire consciencieusement le manuel officiel, d’ailleurs placé dans le domaine public, remercions-en-les, le tâtonnement ne fonctionne que bien peu. Et ce n’est pas le pauvre tableau tout bête, collé automatiquement par le bouton au-dessus de la fenêtre d’édition3, qui va y changer quoi que ce soit.

Il fallait donc un outil simple d’accès, sans complication aucune, qui réagit au moindre clic et qui fait ce qu’on veut – ou plus précisément, qui empêche de faire des bêtises…

C’est donc fait, même si c’est en anglais (désolé, mais il fallait tout de même que ce soit accessible au plus de monde possible), et c’est accessible ici.

Petit mode d’emploi :

  • Vous pouvez ajouter des rangées au moyen du bouton « Click to add a row ». Le nombre de rangées que vous pouvez ajouter est quasi illimité
  • Idem avec des colonnes, avec le bouton « Click to add a column »
  • Au début de chaque ligne, un bouton « CSS for this row ⇒ » vous permettra de modifier le CSS de la ligne entière
  • En passant la souris sur une case, un bouton « attributes of this box ⇑&nbsp» apparaîtra juste en-dessous, vous permettant d’en modifier
    • le style CSS,
    • le rowspan4,
    • et le colspan5

    vous prévenant en cas de problème avec l’un au moins de ces deux derniers6

  • Deux cases à cocher permettent de choisir des classes CSS déjà existantes, « wikitable » (qui rend les tableaux beaucoup plus présentables, il faut bien le reconnaître ! ) et « sortable » (qui rend les tableaux ordonnables selon la valeur d’une ou plusieurs colonnes). De par son incomptabilité fonctionnelle avec les colspan/rowspan, cocher cette dernière case déclenche une alerte si des colspan/rowspan sont modifiés dans la table
  • Cliquer sur le bouton « Wikisyntaxify! » envoie les données au serveur, et vous fait apparaître les résultats
  • Résultats qui sont automatiquement sélectionnés pour votre confort : vous n’avez plus qu’à Copier le texte sélectionné, puis à le Copier dans la page qui vous intéresse, et le tour est joué !

Sous vos applaudissements.
J’accepte les chèques, les bons du Trésor, le payement en espèces sonnantes et trébuchantes, ou en billets de banque, mais pas en-dessous de 50 euros 😈


  1. Read The F∪cking Manual, Noob ! []
  2. Vous saviez que 87,53% des gens inventaient des données statistiques de toutes pièces, généralement présentées sous forme de pourcentages ou de « 1 homme • femme • animal de compagnie • billet de banque • (biffer les mentions inutiles) sur 2 • 3 • 4 • 5 • 10 • 20 • 100 • 1 000 • 10 000 • 100 000 • 1 000 000 (biffer les nombres inutiles) » ? C’est fou, non ? []
  3. dont le code est, à l’instant où j’écris ces lignes, sous Monobook :

    {|
    |-
    |
    |
    |}

    c’est-à-dire un tableau sans CSS ni fusion de cellules de 1 rangée et 3 colonnes ;
    et sous Vector :

    {| class="wikitable"
    |-
    ! Texte de l’en-tête !! Texte de l’en-tête !! Texte de l’en-tête
    |-
    | Texte de la cellule || Texte de la cellule || Texte de la cellule
    |-
    | Texte de la cellule || Texte de la cellule || Texte de la cellule
    |-
    | Texte de la cellule || Texte de la cellule || Texte de la cellule
    |}

    qui présente certes l’avantage de contenir 4 rangées et 3 colonnes, mais qui ne contient pas beaucoup plus de CSS, si ce n’est une classe de base pour l’ensemble de la table. []

  4. nombre de rangées sur lesquelles cette case s’étend dans le tableau HTML final []
  5. nombre de colonnes sur lesquelles cette case s’étendra dans le tableau HTML final []
  6. une case qui si on en modifiait le rowspan/colspan s’étendrait sur le corps d’une autre case déjà étendue, ou en-dehors du tableau par exemple []

4 comments to Les tableaux dans MediaWiki, sans trop se compliquer la vie

  • Le plus simple reste quand même d’écrire le tableau en HTML brut 🙂

    • Alphos

      Do you, uh, HTML ?
      Pour ceux qui ne savent pas se servir du HTML, ou ont du mal à admettre qu’une case est toujours dans une ligne, c’est pas plus simple 😉 Combien de suicides y a-t-il eu à cause de < td/> en-dehors de < tr/> ?
      Pis pour le CSS, y'a pour l'instant pas de complétion automatique (pour ne plus avoir à se rappeler si c'est font-variant: small-caps; ou fontvariant: smallcaps; par exemple), mais j'ai songé à en ajouter une, justement 😉

Leave a Reply

You can use these HTML tags

<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong> <pre lang="" line="" escaped="" cssfile="">