Aide:Tableau : Différence entre versions

De Ekopedia
Aller à : navigation, rechercher
(ortho)
(→‎Divers exemples de tableaux : : ajout un lien)
 
(7 révisions intermédiaires par le même utilisateur non affichées)
Ligne 1 : Ligne 1 :
−
Les tableaux peuvent être très utiles pour la représentation de certaines données sur Ekopedia. Si vous êtes déjà familier des codes HTML permettant de créer des tableaux, vous pouvez insérer simplement le code directement dans l'article que vous êtes en train d'éditer.
+
Les '''tableaux''' peuvent être très utiles pour la représentation ordonnée et concise de certaines données sur Ekopedia.<br />
 +
Un tableau peut être programmé soit en '''''codage Wiki''''', soit en '''''codage HTML'''''. Si vous êtes déjà familier des codes HTML permettant de créer des tableaux, vous pouvez insérer simplement le code directement dans l'article que vous êtes en train d'éditer.
  
−
Cependant, les balises de tableaux sont parfois difficiles à éditer surtout pour quelqu'un n'étant pas à l'aise avec la codification HTML. Pour cela, des nouvelles balises développées pour les projets Wikis ont été créées. Ces balises remplacent les traditionnelles balises HTML <nowiki><table>, <tr>, <td>, <th> et <caption></nowiki>. On peut donc se passer totalement des balises HTML, '''il est même plutôt conseillé de ne plus utiliser de code HTML''' pour créer un tableau malgré le fait que son utilisation soit encore possible.
+
Cependant, les balises de tableaux sont parfois difficiles à éditer surtout pour quelqu'un n'étant pas à l'aise avec la '''''codification HTML'''''. Pour cela, des nouvelles balises développées pour les projets Wikis ont été créées. Ces balises remplacent '''''les traditionnelles balises HTML <nowiki><table>, <tr>, <td>, <th> et <caption></nowiki>'''''. On peut donc se passer totalement des balises HTML.<br />
 +
Il est même plutôt conseillé de ne plus utiliser de code HTML pour créer un tableau (malgré le fait que son utilisation soit encore possible).
 
{{Navigation Aide}}
 
{{Navigation Aide}}
−
L'utilisation de tableaux doit être évitée si cela est possible. En effet, l'accessibilité aux pages qui contiennent un tableau est rendue plus difficile à certaines personnes, notamment aux aveugles. Tout au long de cette page d'aide, nous donnerons toujours le [[Aide:Syntaxe|codage Wiki]] et le codage HTML pour chacun des tableaux que nous montrerons.
+
L'utilisation de tableaux doit être évitée si cela est possible. En effet, l'accessibilité aux pages qui contiennent un tableau est rendue plus difficile à certaines personnes, notamment aux aveugles.<br />
 +
Tout au long de cette page d'aide, nous essaierons de donner le [[Aide:Syntaxe|codage Wiki]] et le codage HTML pour chacun des tableaux que nous montrerons.
 
{{Sommaire à gauche}}<br />
 
{{Sommaire à gauche}}<br />
 
<br />
 
<br />
−
[[File:Tableau.jpg|thumb|450px|center|<center>- Exemple d'un tableau au quotidien -</center>]]
+
[[File:Tableau.jpg|thumb|400px|center|<center>- Exemple d'un tableau au quotidien -</center>]]
 
<br />
 
<br />
 
<br />
 
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
<br />
 +
== Comparaison de tableaux: "wikitable" ou "plainlinks" ==
 +
Dans cet exemple provenant du modèle '''{{m|ébauche 25%}}''', la programmation est exactement la même.<br />
 +
C'est seulement le titre de class qui est changé: class="wikitable gauche" ou  class="plainlinks" (''faire Modifier de la présente page pour voir les instructions): <br />
 +
<br />
 +
==='''Tableau créé sous class : "wikitable"'''===
 +
Les données sont séparées par des lignes verticales et horizontales. Un encadré entoure le contenu du tableau réalisé en "table de wiki"...
 +
<br />
 +
<center>
 +
{| class="wikitable" style="border-collapse:collapse; font-size:95%;" cellpadding=1 cellspacing=0 border=0
 +
|- style="line-height:5pt;" style="padding-right:10px;"
 +
! width=20px |<small><small>''O %''</small></small>
 +
! width=80px |<small><small>''10 %''</small></small>
 +
! width=100px |<small><small>''25 %''</small></small>
 +
! width=120px |<small><small>''50 %''</small></small>
 +
! width=160px |<small><small>''75 %''</small></small>
 +
! width=140px |<small><small>''95 %''</small></small>
 +
! width=20px |<small><small>Achevé</small></small>
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor=#FFA500 |
 +
| bgcolor=#7FFF00 |
 +
| bgcolor=#80FF9F |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor=#FFA500 |
 +
| bgcolor=#7FFF00 |
 +
| bgcolor=#80FF9F |
 +
| bgcolor=#00FFFF |
 +
|----
 +
!
 +
|-
 +
|- style="line-height:6pt;"
 +
| colspan="8" style="background: #E5F6FF;" | <br /><center><small>'''Progression du travail rédactionnel''' avant finalisation de l'article ''''':&nbsp;&nbsp;&nbsp;{{Rouge|75 % de texte manquant}}''''' ''.............................'' '''État :'''&nbsp;&nbsp;&nbsp;'''''{{Rouge|À rédiger d'urgence !}}'''''</small></center><br />
 +
|-
 +
|}</center>
 +
<br />
 +
==='''Même tableau lancé sous class : "plainlinks"'''===
 +
L'encadré, les lignes verticales et horizontales du tableau ont automatiquement disparues sous cette forme "plein liens"...
 +
<br />
 +
<center>
 +
{| class="plainlinks" style="border-collapse:collapse; font-size:95%;" cellpadding=1 cellspacing=0 border=0
 +
|- style="line-height:5pt;" style="padding-right:10px;"
 +
! width=20px |<small><small>''O %''</small></small>
 +
! width=80px |<small><small>''10 %''</small></small>
 +
! width=100px |<small><small>''25 %''</small></small>
 +
! width=120px |<small><small>''50 %''</small></small>
 +
! width=160px |<small><small>''75 %''</small></small>
 +
! width=140px |<small><small>''95 %''</small></small>
 +
! width=20px |<small><small>Achevé</small></small>
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor=#FFA500 |
 +
| bgcolor=#7FFF00 |
 +
| bgcolor=#80FF9F |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor=#FFA500 |
 +
| bgcolor=#7FFF00 |
 +
| bgcolor=#80FF9F |
 +
| bgcolor=#00FFFF |
 +
|----
 +
!
 +
|-
 +
|- style="line-height:6pt;"
 +
| colspan="8" style="background: #E5F6FF;" | <br /><center><small>'''Progression du travail rédactionnel''' avant finalisation de l'article ''''':&nbsp;&nbsp;&nbsp;{{Rouge|75 % de texte manquant}}''''' ''.............................'' '''État :'''&nbsp;&nbsp;&nbsp;'''''{{Rouge|À rédiger d'urgence !}}'''''</small></center><br />
 +
|-
 +
|}</center>
 +
<br />
 +
==='''Même tableau''' sous class : "plainlinks" '''+ un cadre'''===
 +
* Le tableau ci-dessus, de class "plainlinks" est encadré grâce au '''[[Modèle:Cadre en couleurs]]''' (plusieurs couleurs disponibles).
 +
* Les instructions sont :
 +
** '''{{m|début cadre Violet}}''' est placé juste avant la '''première ligne''' du tableau de class "plainlinks"
 +
** '''{{m|fin cadre}}''' est placé après la '''dernière ligne''' du tableau de class "plainlinks"....<br />
 +
<br />
 +
<center>
 +
{{début cadre Violet}}
 +
{| class="plainlinks" style="border-collapse:collapse; font-size:95%;" cellpadding=1 cellspacing=0 border=0
 +
|- style="line-height:5pt;" style="padding-right:10px;"
 +
! width=20px |<small><small>''O %''</small></small>
 +
! width=80px |<small><small>''10 %''</small></small>
 +
! width=100px |<small><small>''25 %''</small></small>
 +
! width=120px |<small><small>''50 %''</small></small>
 +
! width=160px |<small><small>''75 %''</small></small>
 +
! width=140px |<small><small>''95 %''</small></small>
 +
! width=20px |<small><small>Achevé</small></small>
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor=#FFA500 |
 +
| bgcolor=#7FFF00 |
 +
| bgcolor=#80FF9F |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor= |
 +
| bgcolor=#00FFFF |
 +
|----
 +
| bgcolor=#400080 |
 +
| bgcolor=#800040 |
 +
| bgcolor=#FF0000 |
 +
| bgcolor=#FFA500 |
 +
| bgcolor=#7FFF00 |
 +
| bgcolor=#80FF9F |
 +
| bgcolor=#00FFFF |
 +
|----
 +
!
 +
|-
 +
|- style="line-height:6pt;"
 +
| colspan="8" style="background: #E5F6FF;" | <br /><center><small>'''Progression du travail rédactionnel''' avant finalisation de l'article ''''':&nbsp;&nbsp;&nbsp;{{Rouge|75 % de texte manquant}}''''' ''.............................'' '''État :'''&nbsp;&nbsp;&nbsp;'''''{{Rouge|À rédiger d'urgence !}}'''''</small></center><br />
 +
|-
 +
|}</center>
 +
{{fin cadre}}
 +
{{clr}}<small>
 +
<br />
 +
<br />
 +
== Divers exemples de tableaux (du plus simple au plus compliqué) ==
 +
 +
=== Liste de références en colonnes ===
 +
Pour organiser une liste longue de références en plusieurs colonnes...
 +
<br />
 +
{{Article détaillé|Modèle:Références/Documentation}}
 
<br />
 
<br />
  
−
== Exemple d'un [[Aide:Tableau|tableau]] en class="wikitable" ==
+
=== Liste de liens en colonnes + encadré ===
 +
 
 +
{{Début cadre Vert}}
 +
{| |<span style="font-size: 110%;">'''
 +
|
 +
*'''[[Image:Hp-finished-icon.png|28px]] [[Spécial:Catégories|Voir Toutes les catégories]]'''
 +
*'''[[Spécial:ArbreCatégorie|Arborescence Catégories]]'''
 +
*'''[[Spécial:Catégories|Liste Catégories <small>(ordre alphabétique)</small>]]'''
 +
*'''[[Spécial:Catégories_les_plus_liées|Catégories les + utilisées]]'''
 +
*'''[[Spécial:Catégories_inutilisées|Catégories inusitées à utiliser]]'''
 +
*'''[[Spécial:Catégories_demandées|Catégories les + demandées par les contributeurs]]'''
 +
|
 +
* '''[http://base.ekopedia.org/ '''Base Ekopédia :''' Stock IMAGES pour illustrer les articles]'''
 +
* '''[http://base.ekopedia.org/Special:NewFiles '''Base Ekopédia :''' Galerie des nouvelles IMAGES]'''
 +
* '''[http://base.ekopedia.org/w/index.php?title=Special:UncategorizedFiles&limit=500&offset=0  '''Base Ekopédia''' : Les IMAGES sans Catégorie]'''
 +
* '''[http://base.ekopedia.org/w/index.php?title=Special:UnusedFiles&limit=500&offset=0 '''Base Ekopédia''' : Les IMAGES sans lien (à employer dans les articles Ekopédia)]'''
 +
|
 +
* '''[[:Catégorie:Espace Images - BASE - Ekopédia|La catégorie '''IMAGES dans l'encyclopédie''']]'''
 +
* '''[http://base.ekopedia.org/Special:MostLinkedFiles Images les plus liées sur Ekopédia]'''
 +
* '''[[Spécial:Fichiers_non_catégorisés|Fichiers Ekopédia non catégorisés]]'''
 +
*
 +
* '''[http://commons.wikimedia.org/w/index.php?title=Special%3ASearch&search=Animated+GIF&fulltext=Search&ns14=1&redirs=1&profile=advanced Recherche d'IMAGES dans la Base COMMONS.Wikimedia]'''
 +
|
 +
</span>
 +
|}
 +
{{Fin cadre}}
 +
</div>
 +
 
 +
=== Exemple de tableau en code wiki ===
 +
On pourra trouver des exemples de tableaux réalisés '''en code wiki''' sur la page [[Aide:Syntaxe]]...
 +
<br />
 +
{{Article détaillé|Aide:Syntaxe#Les_tableaux}}
 +
<br />
 +
 
 +
=== Exemple simple d'un [[Aide:Tableau|tableau]] en class="wikitable" ===
 +
<center>
 
{| class="wikitable"  
 
{| class="wikitable"  
 
! syntaxe !! Rendu
 
! syntaxe !! Rendu
Ligne 17 : Ligne 334 :
 
| <code><nowiki>{{Fait}}</nowiki></code> || <br /> {{Fait}}<br />
 
| <code><nowiki>{{Fait}}</nowiki></code> || <br /> {{Fait}}<br />
 
|-
 
|-
−
| <code><nowiki>{{Fait}}<br /></nowiki>
+
| <code><nowiki>{{Fait}}<br /></nowiki><nowiki><center>([[Modèle:Fait/Documentation]])</center><br /></nowiki></code>  
−
<nowiki><center>([[Modèle:Fait/Documentation]])</center><br /></nowiki></code>  
+
| {{Fait}}<br /><center>([[Modèle:Fait/Documentation]])</center><br />
−
|| {{Fait}}<br />
 
−
<center>([[Modèle:Fait/Documentation]])</center><br />
 
 
|-
 
|-
 
| <code><nowiki>{{Fait}} -- ~~~~</nowiki></code> || {{Fait}} -- [[user:Toto|Toto]] 17 novembre 2011 à 03:16 (CET)
 
| <code><nowiki>{{Fait}} -- ~~~~</nowiki></code> || {{Fait}} -- [[user:Toto|Toto]] 17 novembre 2011 à 03:16 (CET)
Ligne 26 : Ligne 341 :
 
| <code><nowiki>~~~~~ ''':''' {{Fait}} C’est fait !</nowiki></code> || 24 mars 2012 à 18:58 (CET) ''':''' {{Fait}} C’est fait !
 
| <code><nowiki>~~~~~ ''':''' {{Fait}} C’est fait !</nowiki></code> || 24 mars 2012 à 18:58 (CET) ''':''' {{Fait}} C’est fait !
 
|}
 
|}
−
<br />
+
</center>{{clr}}<br />
  
−
== Petits exemples en class="ekotable" ==
+
=== Petits exemples en class="ekotable" ===
  
 
Nous montrerons, ici, deux exemples simples pour avoir un premier contact avec le codage Wiki.<br />
 
Nous montrerons, ici, deux exemples simples pour avoir un premier contact avec le codage Wiki.<br />
−
* Notre premier exemple nous montrera le tableau le plus minimaliste qui soit, c'est à dire celui qui ne contiendrait qu'une seule cellule.
+
* Notre '''premier exemple''' nous montrera le tableau le plus minimaliste qui soit, c'est à dire celui qui ne contiendrait qu'une seule cellule.
  
 
{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
 
{| border="0" align="center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF"
Ligne 56 : Ligne 371 :
 
</pre>
 
</pre>
 
|}
 
|}
−
 
+
<br />
−
* Le deuxième exemple contient deux cellules.<br />
+
* Le '''deuxième exemple''' contient deux cellules.<br />
 
Comme vous pouvez le constater, il est possible d'encoder les cellules de deux façons différentes. Soit les cellules sont placées les unes en dessous des autres (au niveau du codage wiki), soit elles sont placées les unes à côté des autres. Mais nous y reviendrons plus en détail par la suite.
 
Comme vous pouvez le constater, il est possible d'encoder les cellules de deux façons différentes. Soit les cellules sont placées les unes en dessous des autres (au niveau du codage wiki), soit elles sont placées les unes à côté des autres. Mais nous y reviendrons plus en détail par la suite.
  
Ligne 1 412 : Ligne 1 727 :
 
*Les gros tableaux contenant beaucoup d'informations peuvent dépasser le bord droit de l'écran sur de basses résolutions d'affichage. Si vous devez, pour votre article, créer un tableau vraiment très grand, vous devrez alors considérer qu'il y aura lieu d'en créer un autre plus simple, plus petit, pour les utilisateurs qui ne pourront pas visualiser la version longue.
 
*Les gros tableaux contenant beaucoup d'informations peuvent dépasser le bord droit de l'écran sur de basses résolutions d'affichage. Si vous devez, pour votre article, créer un tableau vraiment très grand, vous devrez alors considérer qu'il y aura lieu d'en créer un autre plus simple, plus petit, pour les utilisateurs qui ne pourront pas visualiser la version longue.
 
* Si vous insérez du texte à chasse fixe dans un tableau (en utilisant les balises HTML <code>code</code>, <code>pre</code> ou <code>tt</code>, par exemple), cela forcera la page à être plus large que nécessaire. Tant que cela est possible, évitez l'utilisation de tels textes dans vos tableaux, ainsi le texte sera adapté naturellement. Un problème identique survient lors de l'insertion d'images dans un tableau (car les images sont généralement contraintes à une taille fixe).
 
* Si vous insérez du texte à chasse fixe dans un tableau (en utilisant les balises HTML <code>code</code>, <code>pre</code> ou <code>tt</code>, par exemple), cela forcera la page à être plus large que nécessaire. Tant que cela est possible, évitez l'utilisation de tels textes dans vos tableaux, ainsi le texte sera adapté naturellement. Un problème identique survient lors de l'insertion d'images dans un tableau (car les images sont généralement contraintes à une taille fixe).
−
* Des cellules contenant une grosse quantité d'informations peuvent causer des problèmes d'affichage dans certains navigateurs. En particulier, des cellules contenant un grand paragraphe risquent de brouiller l'affichage de navigateurs en mode console comme Lynx ou Links. De manière générale, tant que faire se peut, tentez de limiter la quantité de texte à l'intérieur d'un tableau.
+
* Des cellules contenant une grosse quantité d'informations peuvent causer des problèmes d'affichage dans certains navigateurs. En particulier, des cellules contenant un grand paragraphe risquent de brouiller l'affichage de navigateurs en mode console comme Lynx ou Links. De manière générale, tant que faire se peut, tentez de limiter la quantité de texte à l'intérieur d'un tableau.<br />
 +
<br />
 +
----
 +
----
 +
<br /></small>
  
 
[[Catégorie:Aide|Tableau]]
 
[[Catégorie:Aide|Tableau]]

Version actuelle en date du 1 août 2012 à 18:00

Les tableaux peuvent être très utiles pour la représentation ordonnée et concise de certaines données sur Ekopedia.
Un tableau peut être programmé soit en codage Wiki, soit en codage HTML. Si vous êtes déjà familier des codes HTML permettant de créer des tableaux, vous pouvez insérer simplement le code directement dans l'article que vous êtes en train d'éditer.

Cependant, les balises de tableaux sont parfois difficiles à éditer surtout pour quelqu'un n'étant pas à l'aise avec la codification HTML. Pour cela, des nouvelles balises développées pour les projets Wikis ont été créées. Ces balises remplacent les traditionnelles balises HTML <table>, <tr>, <td>, <th> et <caption>. On peut donc se passer totalement des balises HTML.
Il est même plutôt conseillé de ne plus utiliser de code HTML pour créer un tableau (malgré le fait que son utilisation soit encore possible).

Nuvola apps help index.png
Aide rapide...

Comment bien contribuer...

Cette boite dans ma page :
{{Navigation Aide}}

L'utilisation de tableaux doit être évitée si cela est possible. En effet, l'accessibilité aux pages qui contiennent un tableau est rendue plus difficile à certaines personnes, notamment aux aveugles.
Tout au long de cette page d'aide, nous essaierons de donner le codage Wiki et le codage HTML pour chacun des tableaux que nous montrerons.



Fichier:Tableau.jpg








Comparaison de tableaux: "wikitable" ou "plainlinks"[modifier]

Dans cet exemple provenant du modèle {{ébauche 25%}}, la programmation est exactement la même.
C'est seulement le titre de class qui est changé: class="wikitable gauche" ou class="plainlinks" (faire Modifier de la présente page pour voir les instructions):

Tableau créé sous class : "wikitable"[modifier]

Les données sont séparées par des lignes verticales et horizontales. Un encadré entoure le contenu du tableau réalisé en "table de wiki"...

O % 10 % 25 % 50 % 75 % 95 % Achevé

Progression du travail rédactionnel avant finalisation de l'article :   75 % de texte manquant ............................. État :   À rédiger d'urgence !


Même tableau lancé sous class : "plainlinks"[modifier]

L'encadré, les lignes verticales et horizontales du tableau ont automatiquement disparues sous cette forme "plein liens"...

O % 10 % 25 % 50 % 75 % 95 % Achevé

Progression du travail rédactionnel avant finalisation de l'article :   75 % de texte manquant ............................. État :   À rédiger d'urgence !


Même tableau sous class : "plainlinks" + un cadre[modifier]

  • Le tableau ci-dessus, de class "plainlinks" est encadré grâce au Modèle:Cadre en couleurs (plusieurs couleurs disponibles).
  • Les instructions sont :
    • {{début cadre Violet}} est placé juste avant la première ligne du tableau de class "plainlinks"
    • {{fin cadre}} est placé après la dernière ligne du tableau de class "plainlinks"....


O % 10 % 25 % 50 % 75 % 95 % Achevé

Progression du travail rédactionnel avant finalisation de l'article :   75 % de texte manquant ............................. État :   À rédiger d'urgence !



Divers exemples de tableaux (du plus simple au plus compliqué)[modifier]

Liste de références en colonnes[modifier]

Pour organiser une liste longue de références en plusieurs colonnes...

Vista-xmag.png Consulter aussi l’article :   Modèle:Références/Documentation.


Liste de liens en colonnes + encadré[modifier]