Balisage des tables

Pour créer une table, vous devez commencer et terminer une ligne avec le marqueur de table "||". Entre le marqueur de début et le marqueur de fin, vous pouvez créer un nombre arbitraire de cellules en les séparant avec des "||". Pour obtenir une cellule centrée qui s'étende sur plusieurs colonnes, vous devez débuter cette cellule avec plusieurs marqueurs de cellule. Les lignes qui se suivent avec le même niveau d'indentation se combinent pour former une seule table.

Pour plus d'informations sur le balisage possible, voir AideDeL'Édition.

Attributs des tables

En plus de l'option de répéter des marqueurs de cellule pour obtenir une colonne qui s'étende sur plusieurs colonnes, vous pouvez configurer directement beaucoup d'attributs HTML des tables. Tous les attributs doivent être placés entre des signes plus-petit-que et plus-grand-que <...>, directement après le marqueur de cellule.

Le balisage wikiesque propose les options suivantes :

• <-2>: extension multi-colonne

• <|2>: extension multi-ligne

• <style="..."> placera la donnée de style dans le html (td) de la cellule

• <rowstyle="..."> placera la donnée de style dans le html (tr) de la ligne

• <tablestyle="..."> placera la donnée de style dans le html (table) de la table

• <class="..."> placera cette classe CSS dans le html (td) de la cellule

• <rowclass="..."> placera cette classe CSS dans le html (tr) de la ligne

• <tableclass="..."> placera cette classe dans le html (table) de la table

• <id="..."> placera cet id CSS dans le html (td) de la cellule

C'est tout ce dont vous avez besoin pour définir les styles de vos tables. Contentez-vous d'utiliser les styles au format CSS dans ces emplacements, et ils se retrouveront incorporés dans la balise HTML générée. Alternativement, l'administrateur (via les fichiers thème) et les utilisateurs (via leurs préférences d'utilisateur) peuvent étendre le CSS de moin avec leurs propres définitions, pour que les utilisateurs puissent y faire référence avec class ou id. Vous pouvez utiliser plusieurs options simultanément en les inscrivant séquentiellement dans un seul bloc <...>. Exemple : <tablestyle="..." rowstyle="..."> dans la première cellule, pour définir à la fois le style de la table complète et le style de la première ligne.

Nous maintenons toujours l'ancien balisage de table, mais nous en générons les effets en ajoutant des valeurs supplémentaires au paramètre style :

• <50%> : largeur de la cellule (ajoutera width: 50%; au style)

• <width="50%"> : idem

• <tablewidth="100%"> : met la largeur de la table à 100% (valide uniquement sur la première ligne de la table)

• <(> : aligné à gauche (ajoutera text-align: left; au style)

• <:> : centré (ajoutera text-align: center; au style)

• <)> : aligné à droite (ajoutera text-align: right; au style)

• <^> : aligné en haut (ajoutera vertical-align: top; au style)

• <v> : aligné en bas (ajoutera vertical-align: bottom; au style)

• <#XXXXXX> : couleur de fond (ajoutera background-color: #XXXXXX; au style)

• <bgcolor="#XXXXXX"> fait de même

• <rowbgcolor="#XXXXXX"> définit la couleur de fond de la ligne (valide uniquement dans la première cellule)

• <tablebgcolor="#XXXXXX"> définit la couleur de fond de la table

Si vous utilisez plusieurs options contradictoires, comme par exemple <(:)>, c'est la dernière option qui l'emporte. Il n'y a pas d'option explicite pour centrer verticalement (middle), car c'est toujours le cas par défaut.

Exemple

 NOUVEAU STYLE: Mise en forme générale des tables et options HTMLesques::
 ||||||<tablestyle="width: 80%">'''En-tête'''||
 ||cellule 1||cellule2||cellule 3||
 ||<rowspan=2> multi-ligne||||<style="background-color: #E0E0FF;"> étendue sur 2 colonnes||
 ||<rowstyle="background-color: #FFFFE0;">cellule2||cellule 3||
 Largeur de cellule::
 || étroite ||<style="width: 99%; text-align: center;"> large ||
 Extension sur plusieurs lignes et colonnes::
 ||<|2> 2 lignes || ligne 1 ||
 || ligne 2 ||
 ||<-2> ligne 3 sur 2 colonnes ||
 Alignement::
 ||<style="text-align: left;">gauche ||<style="vertical-align: top; text-align: center;"|3> haut ||<style="vertical-align: bottom;"|3> bas ||
 ||<style="text-align: center;"> centrée ||
 ||<style="text-align: right;"> droite ||
 Polices::
 || normal ||<style="font-weight: bold;"> gras ||<style="color: #FF0000;"> rouge ||<style="color: #FF0000; font-weight: bold;"> rouge gras ||
 Couleurs::
 ||<style="background-color: red;"> rouge ||<style="background-color: green;"> verte ||<style="background-color: blue;"> bleue ||

 VIEUX STYLE : Mise en forme générale des tables et options HTMLesques::
 ||||||<tablewidth="80%">'''En-tête'''||
 ||cellule 1||cellule2||cellule 3||
 ||<rowspan=2> multi-ligne||||<bgcolor="#E0E0FF"> étendue sur 2 colonnes||
 ||<rowbgcolor="#FFFFE0">cellule2||cellule 3||
 Largeur de cellule::
 || étroite ||<:99%> large ||
 Extension sur plusieurs lignes et colonnes::
 ||<|2> 2 lignes || ligne 1 ||
 || ligne 2 ||
 ||<-2> ligne 3 sur 2 colonnes ||
 Alignement::
 ||<(> gauche ||<^|3> haut ||<v|3> bas ||
 ||<:> centré ||
 ||<)> droite ||
 Couleurs::
 ||<#FF8080> rouge ||<#80FF80> vert ||<#8080FF> bleu ||
 Retour à la ligne à l'intérieur des cellules::
 || ligne 1<<BR>>ligne 2||

Affichage

NOUVEAU STYLE: Mise en forme générale des tables et options HTMLesques

En-tête
cellule 1	cellule 2	cellule 3
multi-ligne	extension sur 2 colonnes
	cellule 2	cellule 3

Largeur de cellule

étroite

large

Extension sur plusieurs lignes et colonnes

2 lignes	ligne 1
	ligne 2
ligne 3 sur 2 colonnes

Alignement

gauche	haut	bas
cellule centrée
droite

Polices

normal

gras

rouge

rouge gras

Couleurs

rouge

vert

bleu

VIEUX STYLE : Mise en forme générale des tables et options HTMLesques

En-tête
cellule 1	cellule 2	cellule 3
multi-ligne	extension sur 2 colonnes
	cellule 2	cellule 3

Largeur de cellule

étroite

large

Extension sur plusieurs lignes et colonnes

2 lignes	ligne 1
	ligne 2
ligne 3 sur 2 colonnes

Alignement

gauche	haut	bas
cellule centrée
droite

Couleurs

rouge

vert

bleu

Retour à la ligne à l'intérieur des cellules

ligne 1 ligne 2

Insérer des données tabulaires provenant d'autres sources

• valeurs séparées par des virgules : voir AideDesAnalyseurs#csvparser

• inclure des pages de wiki : voir Include

Listes avec puces et autres contenus complexes à l'intérieur des cellules

• Voir la macro MiniPage