Aide:Tableau : Différence entre versions

De Ekopedia
Aller à : navigation, rechercher
(→‎Petits exemples)
(→‎Divers exemples de tableaux : : ajout un lien)
 
(30 révisions intermédiaires par 4 utilisateurs 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}}
 +
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 />
 +
<br />
 +
[[File:Tableau.jpg|thumb|400px|center|<center>- Exemple d'un tableau au quotidien -</center>]]
 +
<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é) ==
  
−
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.
+
=== 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 />
  
 +
=== Liste de liens en colonnes + encadré ===
  
−
== Petits exemples ==
+
{{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"
 +
! syntaxe !! Rendu
 +
|-
 +
| <code><nowiki>{{Fait}}</nowiki></code> || <br /> {{Fait}}<br />
 +
|-
 +
| <code><nowiki>{{Fait}}<br /></nowiki><nowiki><center>([[Modèle:Fait/Documentation]])</center><br /></nowiki></code>
 +
| {{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}} C’est fait !</nowiki></code> || 24 mars 2012 à 18:58 (CET) ''':''' {{Fait}} C’est fait !
 +
|}
 +
</center>{{clr}}<br />
 +
 
 +
=== Petits exemples en class="ekotable" ===
  
−
Nous montrerons, ici, deux exemples simples pour avoir un premier contact avec le codage Wiki. Notre premier exemple nous montrera le tableau le plus minimaliste qui soit, c'est à dire celui qui ne contiendrait qu'une seule cellule.
+
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.
  
 
{| 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 15 : Ligne 353 :
 
|-
 
|-
 
|
 
|
−
{| border="1"  
+
{| class="ekotable"  
 
|cellule
 
|cellule
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"  
+
{| class="ekotable"  
 
|cellule
 
|cellule
 
|}
 
|}
Ligne 26 : Ligne 364 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>cellule</td>
 
     <td>cellule</td>
Ligne 33 : Ligne 371 :
 
</pre>
 
</pre>
 
|}
 
|}
−
 
+
<br />
−
 
+
* Le '''deuxième exemple''' contient deux cellules.<br />
−
Le deuxième exemple contient deux cellules. 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.
  
 
{| 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 42 : Ligne 380 :
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
|gauche
 
|gauche
 
|droite
 
|droite
Ligne 48 : Ligne 386 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
|gauche
 
|gauche
 
|droite
 
|droite
Ligne 55 : Ligne 393 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>gauche</td>
 
     <td>gauche</td>
Ligne 64 : Ligne 402 :
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
|gauche || droite
 
|gauche || droite
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
|gauche || droite
 
|gauche || droite
 
|}
 
|}
Ligne 75 : Ligne 413 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>gauche</td>
 
     <td>gauche</td>
Ligne 83 : Ligne 421 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
== La syntaxe des tableaux ==
 
== La syntaxe des tableaux ==
 +
 
Nous verrons ici les différentes balises qui peuvent apparaître dans la création d'un tableau.
 
Nous verrons ici les différentes balises qui peuvent apparaître dans la création d'un tableau.
  
Ligne 91 : Ligne 431 :
 
: la barre verticale « | » (ou tube) étant utilisée dans la syntaxe des tableaux, si l'on désire en mettre une dans le tableau, il faut utiliser <code>&lt;nowiki&gt;|&lt;/nowiki&gt;.</code>
 
: la barre verticale « | » (ou tube) étant utilisée dans la syntaxe des tableaux, si l'on désire en mettre une dans le tableau, il faut utiliser <code>&lt;nowiki&gt;|&lt;/nowiki&gt;.</code>
 
----
 
----
 +
<br />
  
 
=== tableau ===
 
=== tableau ===
Ligne 105 : Ligne 446 :
 
On voit donc bien qu'un tableau commence toujours par l'accolade ouvrante '''{''', suivie d'un trait vertical |. La fin d'un tableau est également composée de deux caractères. Le premier est le trait vertical | et il est suivi du deuxième caractère qui est l'accolade fermante '''}'''.
 
On voit donc bien qu'un tableau commence toujours par l'accolade ouvrante '''{''', suivie d'un trait vertical |. La fin d'un tableau est également composée de deux caractères. Le premier est le trait vertical | et il est suivi du deuxième caractère qui est l'accolade fermante '''}'''.
 
Le champ ''paramètres'' doit bien entendu être remplacé par différents paramètres utilisés dans les tableaux tel que la couleur de fond, la taille, s'il faut faire apparaître une bordure, etc. L'utilisation des paramètres n'est pas obligatoire et on peut donc sans problème ne rien placer à cet endroit.
 
Le champ ''paramètres'' doit bien entendu être remplacé par différents paramètres utilisés dans les tableaux tel que la couleur de fond, la taille, s'il faut faire apparaître une bordure, etc. L'utilisation des paramètres n'est pas obligatoire et on peut donc sans problème ne rien placer à cet endroit.
 +
<br />
  
 
=== cellule ===
 
=== cellule ===
Ligne 120 : Ligne 462 :
  
 
  &lt;td&gt;cellule1&lt;/td&gt;&lt;td&gt;cellule2&lt;/td&gt;&lt;td&gt;cellule3&lt;/td&gt;
 
  &lt;td&gt;cellule1&lt;/td&gt;&lt;td&gt;cellule2&lt;/td&gt;&lt;td&gt;cellule3&lt;/td&gt;
−
 
  
 
Comme pour le tableau en lui-même, chacune des cellules d'un tableau peut contenir des paramètres. Pour cela, le contenu d'une cellule sera précédé des paramètres de la façon suivante :
 
Comme pour le tableau en lui-même, chacune des cellules d'un tableau peut contenir des paramètres. Pour cela, le contenu d'une cellule sera précédé des paramètres de la façon suivante :
Ligne 135 : Ligne 476 :
  
 
  &lt;td ''paramètres''&gt;cellule1&lt;/td&gt;&lt;td ''paramètres''&gt;cellule2&lt;/td&gt;&lt;td ''paramètres''&gt;cellule3&lt;/td&gt;
 
  &lt;td ''paramètres''&gt;cellule1&lt;/td&gt;&lt;td ''paramètres''&gt;cellule2&lt;/td&gt;&lt;td ''paramètres''&gt;cellule3&lt;/td&gt;
 +
<br />
  
 
=== ligne ===
 
=== ligne ===
Ligne 150 : Ligne 492 :
  
 
Un grand avantage du codage wiki est qu'il se charge entièrement de la fermeture des balises <code>tr</code> ainsi que de leur ouverture si cette ouverture est nécessaire. Par exemple, si on reprend le tout premier tableau que nous avons créé, celui contenant une seule cellule, nous n'utilisons pas |- dans notre encodage et pourtant le code source HTML contient bien une balise <code>tr</code>.
 
Un grand avantage du codage wiki est qu'il se charge entièrement de la fermeture des balises <code>tr</code> ainsi que de leur ouverture si cette ouverture est nécessaire. Par exemple, si on reprend le tout premier tableau que nous avons créé, celui contenant une seule cellule, nous n'utilisons pas |- dans notre encodage et pourtant le code source HTML contient bien une balise <code>tr</code>.
−
 
  
 
Comme pour les autres balises, il est bien sûr possible d'utiliser des paramètres :
 
Comme pour les autres balises, il est bien sûr possible d'utiliser des paramètres :
Ligne 159 : Ligne 500 :
  
 
  &lt;tr ''paramètres''&gt; ... &lt;/tr&gt;
 
  &lt;tr ''paramètres''&gt; ... &lt;/tr&gt;
 +
<br />
  
 
=== cellule titre ===
 
=== cellule titre ===
Ligne 184 : Ligne 526 :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
! Titre Colonne 1 !! Titre Colonne 2
 
! Titre Colonne 1 !! Titre Colonne 2
 
|-
 
|-
Ligne 196 : Ligne 538 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
! Titre Colonne 1 !! Titre Colonne 2
 
! Titre Colonne 1 !! Titre Colonne 2
 
|-
 
|-
Ligne 205 : Ligne 547 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <th>Titre Colonne 1</th>
 
     <th>Titre Colonne 1</th>
Ligne 221 : Ligne 563 :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
! Titre Colonne 1 || Colonne 2
 
! Titre Colonne 1 || Colonne 2
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
! Titre Colonne 1 || Colonne 2
 
! Titre Colonne 1 || Colonne 2
 
|}
 
|}
Ligne 236 : Ligne 578 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <th>Titre Colonne 1</th>
 
     <th>Titre Colonne 1</th>
Ligne 248 : Ligne 590 :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
! Titre Colonne 1
 
! Titre Colonne 1
 
| Colonne 2
 
| Colonne 2
Ligne 258 : Ligne 600 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
! Titre Colonne 1
 
! Titre Colonne 1
 
| Colonne 2
 
| Colonne 2
Ligne 265 : Ligne 607 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <th>Titre Colonne 1</th>
 
     <th>Titre Colonne 1</th>
Ligne 273 : Ligne 615 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
=== légende ===
 
=== légende ===
Ligne 294 : Ligne 637 :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
|+ légende
 
|+ légende
 
| Colonne 1
 
| Colonne 1
Ligne 305 : Ligne 648 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
|+ légende
 
|+ légende
 
| Colonne 1
 
| Colonne 1
Ligne 313 : Ligne 656 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <caption>légende</caption>
 
   <caption>légende</caption>
 
   <tr>
 
   <tr>
Ligne 322 : Ligne 665 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
=== Exemple récapitulatif ===
 
=== Exemple récapitulatif ===
Ligne 327 : Ligne 671 :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
|+ légende
 
|+ légende
 
!
 
!
Ligne 342 : Ligne 686 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
|+ légende
 
|+ légende
 
!
 
!
Ligne 354 : Ligne 698 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <caption>légende</caption>
 
   <caption>légende</caption>
 
   <tr>
 
   <tr>
Ligne 369 : Ligne 713 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
== Tableaux imbriqués ==
 
== Tableaux imbriqués ==
 +
 
Lorsque vous créez un tableau, vous pouvez y imbriquer un autre tableau. Au lieu de placer du texte dans une cellule, il suffit d'y placer un tableau comme le montre l'exemple suivant :
 
Lorsque vous créez un tableau, vous pouvez y imbriquer un autre tableau. Au lieu de placer du texte dans une cellule, il suffit d'y placer un tableau comme le montre l'exemple suivant :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
| Gauche
 
| Gauche
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
|tableau imbriqué
 
|tableau imbriqué
 
|autre cellule
 
|autre cellule
Ligne 393 : Ligne 739 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
| Gauche
 
| Gauche
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
|tableau imbriqué
 
|tableau imbriqué
 
|autre cellule
 
|autre cellule
Ligne 409 : Ligne 755 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>Gauche</td>
 
     <td>Gauche</td>
 
     <td>
 
     <td>
−
       <table border="1">
+
       <table class="ekotable">
 
         <tr>
 
         <tr>
 
           <td>tableau imbriqué</td>
 
           <td>tableau imbriqué</td>
Ligne 430 : Ligne 776 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 +
== Les paramètres ==
  
−
== Les paramètres ==
 
 
Jusqu'à présent, nous avons vu la syntaxe pour créer des tableaux. Pour chacune des balises, nous avons précisé que l'on pouvait ajouter des paramètres. Ces différents paramètres seront étudiés dans cette section. Ils permettent notamment de spécifier le positionnement du tableau (gauche, milieu, droit), des couleurs à utiliser et bien d'autres choses encore.
 
Jusqu'à présent, nous avons vu la syntaxe pour créer des tableaux. Pour chacune des balises, nous avons précisé que l'on pouvait ajouter des paramètres. Ces différents paramètres seront étudiés dans cette section. Ils permettent notamment de spécifier le positionnement du tableau (gauche, milieu, droit), des couleurs à utiliser et bien d'autres choses encore.
 +
<br />
  
 
=== bordures ===
 
=== bordures ===
Ligne 445 : Ligne 793 :
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
Ligne 520 : Ligne 868 :
  
 
X est la taille de la bordure (en pixel), et Y son style (dotted, dashed, double...)
 
X est la taille de la bordure (en pixel), et Y son style (dotted, dashed, double...)
−
 
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
Ligne 603 : Ligne 950 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
=== fusion de cellules ===
 
=== fusion de cellules ===
Ligne 613 : Ligne 961 :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
| Simple
 
| Simple
 
| colspan="2" | Fusionnée
 
| colspan="2" | Fusionnée
Ligne 627 : Ligne 975 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
| Simple
 
| Simple
 
| colspan="2" | Fusionnée
 
| colspan="2" | Fusionnée
Ligne 638 : Ligne 986 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>Simple</td>
 
     <td>Simple</td>
Ligne 655 : Ligne 1 003 :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
| Première
 
| Première
 
| Deuxième
 
| Deuxième
Ligne 672 : Ligne 1 020 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
| Première
 
| Première
 
| Deuxième
 
| Deuxième
Ligne 686 : Ligne 1 034 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>Première</td>
 
     <td>Première</td>
Ligne 706 : Ligne 1 054 :
  
 
On voit donc avec cet exemple que l'on peut aisément fusionner des cellules que ce soit au niveau des colonnes ou au niveau des lignes. Le nombre de cellules fusionnées n'est pas limité. Et enfin, il est tout à fait possible de mélanger ces deux paramètres.
 
On voit donc avec cet exemple que l'on peut aisément fusionner des cellules que ce soit au niveau des colonnes ou au niveau des lignes. Le nombre de cellules fusionnées n'est pas limité. Et enfin, il est tout à fait possible de mélanger ces deux paramètres.
 +
<br />
  
 
=== alignements ===
 
=== alignements ===
Ligne 723 : Ligne 1 072 :
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| align="left" border="1"
+
{| align="left" class="ekotable"
 
|à gauche
 
|à gauche
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| align="left" border="1"
+
{| align="left" class="ekotable"
 
|à gauche
 
|à gauche
 
|}
 
|}
Ligne 738 : Ligne 1 087 :
 
|
 
|
 
<pre>
 
<pre>
−
<table align="left" border="1">
+
<table align="left" class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>à gauche</td>
 
     <td>à gauche</td>
Ligne 746 : Ligne 1 095 :
 
|-
 
|-
 
|
 
|
−
{| align="center" border="1"
+
{| align="center" class="ekotable"
 
|au centre
 
|au centre
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| align="center" border="1"
+
{| align="center" class="ekotable"
 
|au centre
 
|au centre
 
|}
 
|}
Ligne 757 : Ligne 1 106 :
 
|
 
|
 
<pre>
 
<pre>
−
<table align="center" border="1">
+
<table align="center" class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>au centre</td>
 
     <td>au centre</td>
Ligne 765 : Ligne 1 114 :
 
|-
 
|-
 
|
 
|
−
{| align="right" border="1"
+
{| align="right" class="ekotable"
 
|à droite
 
|à droite
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| align="right" border="1"
+
{| align="right" class="ekotable"
 
|à droite
 
|à droite
 
|}
 
|}
Ligne 776 : Ligne 1 125 :
 
|
 
|
 
<pre>
 
<pre>
−
<table align="right" border="1">
+
<table align="right" class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>à droite</td>
 
     <td>à droite</td>
Ligne 787 : Ligne 1 136 :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
| Positionnement
 
| Positionnement
 
|-
 
|-
Ligne 802 : Ligne 1 151 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
| Positionnement
 
| Positionnement
 
|-
 
|-
Ligne 814 : Ligne 1 163 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <td>Positionnement</td>
 
     <td>Positionnement</td>
Ligne 834 : Ligne 1 183 :
  
 
{| 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"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
| height="150" | Position
 
| height="150" | Position
 
| valign="top" | haut
 
| valign="top" | haut
Ligne 846 : Ligne 1 195 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
| height="150" | Position
 
| height="150" | Position
 
| valign="top" | haut
 
| valign="top" | haut
Ligne 855 : Ligne 1 204 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <td height="150">Position</td>
 
     <td height="150">Position</td>
Ligne 865 : Ligne 1 214 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
=== espacements ===
 
=== espacements ===
Ligne 876 : Ligne 1 226 :
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
Ligne 947 : Ligne 1 297 :
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
Ligne 1 014 : Ligne 1 364 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
=== largeur et hauteur ===
 
=== largeur et hauteur ===
Ligne 1 021 : Ligne 1 372 :
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1" width="10"
+
{| class="ekotable" width="10"
 
|cellule
 
|cellule
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1" width="10"
+
{| class="ekotable" width="10"
 
|cellule
 
|cellule
 
|}
 
|}
Ligne 1 036 : Ligne 1 387 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1" width="10">
+
<table class="ekotable" width="10">
 
   <tr>
 
   <tr>
 
     <td>cellule</td>
 
     <td>cellule</td>
Ligne 1 044 : Ligne 1 395 :
 
|-
 
|-
 
|
 
|
−
{| border="1" width="100"
+
{| class="ekotable" width="100"
 
|cellule
 
|cellule
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1" width="100"
+
{| class="ekotable" width="100"
 
|cellule
 
|cellule
 
|}
 
|}
Ligne 1 055 : Ligne 1 406 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1" width="100">
+
<table class="ekotable" width="100">
 
   <tr>
 
   <tr>
 
     <td>cellule</td>
 
     <td>cellule</td>
Ligne 1 063 : Ligne 1 414 :
 
|-
 
|-
 
|
 
|
−
{| border="1" width="200"
+
{| class="ekotable" width="200"
 
|cellule
 
|cellule
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1" width="200"
+
{| class="ekotable" width="200"
 
|cellule
 
|cellule
 
|}
 
|}
Ligne 1 074 : Ligne 1 425 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1" width="200">
+
<table class="ekotable" width="200">
 
   <tr>
 
   <tr>
 
     <td>cellule</td>
 
     <td>cellule</td>
Ligne 1 086 : Ligne 1 437 :
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1" width="33%"
+
{| class="ekotable" width="33%"
 
|cellule
 
|cellule
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1" width="33%"
+
{| class="ekotable" width="33%"
 
|cellule
 
|cellule
 
|}
 
|}
Ligne 1 101 : Ligne 1 452 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1" width="33%">
+
<table class="ekotable" width="33%">
 
   <tr>
 
   <tr>
 
     <td>cellule</td>
 
     <td>cellule</td>
Ligne 1 109 : Ligne 1 460 :
 
|-
 
|-
 
|
 
|
−
{| border="1" width="50%"
+
{| class="ekotable" width="50%"
 
|cellule
 
|cellule
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1" width="50%"
+
{| class="ekotable" width="50%"
 
|cellule
 
|cellule
 
|}
 
|}
Ligne 1 120 : Ligne 1 471 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1" width="50%">
+
<table class="ekotable" width="50%">
 
   <tr>
 
   <tr>
 
     <td>cellule</td>
 
     <td>cellule</td>
Ligne 1 128 : Ligne 1 479 :
 
|-
 
|-
 
|
 
|
−
{| border="1" width="100%"
+
{| class="ekotable" width="100%"
 
|cellule
 
|cellule
 
|}
 
|}
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1" width="100%"
+
{| class="ekotable" width="100%"
 
|cellule
 
|cellule
 
|}
 
|}
Ligne 1 139 : Ligne 1 490 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1" width="100%">
+
<table class="ekotable" width="100%">
 
   <tr>
 
   <tr>
 
     <td>cellule</td>
 
     <td>cellule</td>
Ligne 1 148 : Ligne 1 499 :
  
 
Pour le paramètre <code>height</code>, l'utilisation est la même que pour <code>width</code> mais cette fois-ci on changera alors la hauteur du tableau. Ces deux paramètres peuvent également être utilisés pour chacune des cellules. Voyons un exemple avec les cellules :
 
Pour le paramètre <code>height</code>, l'utilisation est la même que pour <code>width</code> mais cette fois-ci on changera alors la hauteur du tableau. Ces deux paramètres peuvent également être utilisés pour chacune des cellules. Voyons un exemple avec les cellules :
−
 
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1" width="100%"
+
{| class="ekotable" width="100%"
 
| colspan="3" | Tableau 1
 
| colspan="3" | Tableau 1
 
|-
 
|-
Ligne 1 164 : Ligne 1 514 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1" width="100%"
+
{| class="ekotable" width="100%"
 
| colspan="3" | Tableau 1
 
| colspan="3" | Tableau 1
 
|-
 
|-
Ligne 1 174 : Ligne 1 524 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1" width="100%">
+
<table class="ekotable" width="100%">
 
   <tr>
 
   <tr>
 
     <td colspan="3">Tableau 1</td>
 
     <td colspan="3">Tableau 1</td>
Ligne 1 187 : Ligne 1 537 :
 
|-
 
|-
 
|
 
|
−
{| border="1" width="100%"
+
{| class="ekotable" width="100%"
 
| colspan="3" | Tableau 2
 
| colspan="3" | Tableau 2
 
|-
 
|-
Ligne 1 196 : Ligne 1 546 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1" width="100%"
+
{| class="ekotable" width="100%"
 
| colspan="3" | Tableau 2
 
| colspan="3" | Tableau 2
 
|-
 
|-
Ligne 1 206 : Ligne 1 556 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1" width="100%">
+
<table class="ekotable" width="100%">
 
   <tr>
 
   <tr>
 
     <td colspan="3">Tableau 2</td>
 
     <td colspan="3">Tableau 2</td>
Ligne 1 218 : Ligne 1 568 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
=== couleur d'arrière-plan ===
 
=== couleur d'arrière-plan ===
Ligne 1 228 : Ligne 1 579 :
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1"
+
{| class="ekotable"
 
| bgcolor="#FF0000" | rouge
 
| bgcolor="#FF0000" | rouge
 
| bgcolor="#00FF00" | vert
 
| bgcolor="#00FF00" | vert
Ligne 1 239 : Ligne 1 590 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1"
+
{| class="ekotable"
 
| bgcolor="#FF0000" | rouge
 
| bgcolor="#FF0000" | rouge
 
| bgcolor="#00FF00" | vert
 
| bgcolor="#00FF00" | vert
Ligne 1 247 : Ligne 1 598 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1">
+
<table class="ekotable">
 
   <tr>
 
   <tr>
 
     <td bgcolor="#FF0000">rouge</td>
 
     <td bgcolor="#FF0000">rouge</td>
Ligne 1 256 : Ligne 1 607 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
=== style ===
 
=== style ===
Ligne 1 261 : Ligne 1 613 :
  
 
{| 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;"
−
|- bgcolor="#00CCFF"
+
|- bgcolor="#7EAB7E"
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
! width="33%" | Résultat affiché !! width="33%" | Codage Wiki !! width="33%" | Codage HTML
 
|-
 
|-
 
|
 
|
−
{| border="1" style="background-color:#CCFFCC"
+
{| class="ekotable" style="background-color:#CCFFCC"
 
| cellule 1
 
| cellule 1
 
|-
 
|-
Ligne 1 274 : Ligne 1 626 :
 
|
 
|
 
<pre>
 
<pre>
−
{| border="1" style="background-color:#CCFFCC"
+
{| class="ekotable" style="background-color:#CCFFCC"
 
| cellule 1
 
| cellule 1
 
|-
 
|-
Ligne 1 284 : Ligne 1 636 :
 
|
 
|
 
<pre>
 
<pre>
−
<table border="1" style="background-color:#CCFFCC">
+
<table class="ekotable" style="background-color:#CCFFCC">
 
   <tr>
 
   <tr>
 
     <td>cellule 1</td>
 
     <td>cellule 1</td>
Ligne 1 298 : Ligne 1 650 :
 
|}
 
|}
  
−
Le paramètre ''style'' est un paramètre qui permet de spécifier la mise en forme comme la couleur, la police de caractère, la couleur de fond pour une cellule, etc.  
+
Le paramètre ''style'' est un paramètre qui permet de spécifier la mise en forme comme la couleur, la police de caractère, la couleur de fond pour une cellule, etc.
 +
<br />
 +
<br />
 +
== Remarques ==
  
−
== Remarques ==
 
 
=== Quand les tableaux sont-ils appropriés ? ===
 
=== Quand les tableaux sont-ils appropriés ? ===
 
Les tableaux sont parfaits pour organiser toute information qui sera plus clairement présentée dans un format lignes/colonnes.
 
Les tableaux sont parfaits pour organiser toute information qui sera plus clairement présentée dans un format lignes/colonnes.
  
 
Très souvent, une liste est plus lisible laissée en tant que liste. Certains articles comportent des listes excessivement longues très difficiles à éditer si elles se retrouvent sous forme de tableaux. Avant de transformer une liste en tableau, essayez de vous figurer l'aspect sous forme de tableau (lignes et colonnes) afin d'être sûr de son utilité. Si c'est le cas, alors l'option du tableau est certainement le meilleur choix.
 
Très souvent, une liste est plus lisible laissée en tant que liste. Certains articles comportent des listes excessivement longues très difficiles à éditer si elles se retrouvent sous forme de tableaux. Avant de transformer une liste en tableau, essayez de vous figurer l'aspect sous forme de tableau (lignes et colonnes) afin d'être sûr de son utilité. Si c'est le cas, alors l'option du tableau est certainement le meilleur choix.
 +
<br />
  
 
=== Quand les tableaux sont-ils inappropriés ? ===
 
=== Quand les tableaux sont-ils inappropriés ? ===
 
Les tableaux ne doivent pas être utilisés uniquement pour la présentation. Si l'information que vous éditez n'est pas de nature tabulaire, elle ne devra alors pas être mise en tableau. Évitez d'utiliser les tableaux pour mettre une légende sous une illustration, ordonner un groupe de liens ou autres cas strictement visuels. Cela rend l'article trop difficile à éditer pour d'autres Ekopédiens et les tableaux ne sont pas vraiment faits pour cela.
 
Les tableaux ne doivent pas être utilisés uniquement pour la présentation. Si l'information que vous éditez n'est pas de nature tabulaire, elle ne devra alors pas être mise en tableau. Évitez d'utiliser les tableaux pour mettre une légende sous une illustration, ordonner un groupe de liens ou autres cas strictement visuels. Cela rend l'article trop difficile à éditer pour d'autres Ekopédiens et les tableaux ne sont pas vraiment faits pour cela.
 +
<br />
  
 
==== Liste très longues ou listes très courtes ====
 
==== Liste très longues ou listes très courtes ====
−
Si une liste est vraiment très longue ou au contraire très simple, préférez l'usage des formats de listes standards de Ekopedia. Les listes longues seront difficiles à maintenir si elles se retrouvent à l'intérieur de tableaux et les listes courtes sont réellement trop simples pour nécessiter un formatage en tableau. Voici un petit exemple à ne pas suivre :
+
Si une liste est vraiment très longue ou au contraire très simple, préférez l'usage des formats de listes standards de Ekopedia. Les listes longues seront difficiles à maintenir si elles se retrouvent à l'intérieur de tableaux et les listes courtes sont réellement trop simples pour nécessiter un formatage en tableau. Voici un petit exemple '''à ne pas suivre''' :
  
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
−
{| class="wikitable" |
+
{| class="ekotable" |
 
|-
 
|-
 
|1980||Vague de pluie
 
|1980||Vague de pluie
Ligne 1 333 : Ligne 1 689 :
 
*1994 : Le ciel est vert
 
*1994 : Le ciel est vert
 
</blockquote>
 
</blockquote>
 +
<br />
  
 
==== Légende d'illustration ====
 
==== Légende d'illustration ====
 
Souvent, les illustrations d'un article sont placées dans un semblant de tableau. Du fait que le tableau peut être flottant et placé à gauche ou à droite de l'écran, il paraît facile et pratique d'utiliser un tableau unicellulaire pour placer l'image à un endroit précis de l'écran. Cette solution était nécessaire pour les anciens navigateurs, particulièrement ceux qui ne reconnaissaient pas les [[feuilles de style en cascade]] pour l'affichage de telles images. Aujourd'hui, la plupart des navigateurs fonctionnent parfaitement avec ces feuilles de style. Aussi, la façon recommandée d'afficher les images est d'utiliser les balises nommées <code>div</code>.
 
Souvent, les illustrations d'un article sont placées dans un semblant de tableau. Du fait que le tableau peut être flottant et placé à gauche ou à droite de l'écran, il paraît facile et pratique d'utiliser un tableau unicellulaire pour placer l'image à un endroit précis de l'écran. Cette solution était nécessaire pour les anciens navigateurs, particulièrement ceux qui ne reconnaissaient pas les [[feuilles de style en cascade]] pour l'affichage de telles images. Aujourd'hui, la plupart des navigateurs fonctionnent parfaitement avec ces feuilles de style. Aussi, la façon recommandée d'afficher les images est d'utiliser les balises nommées <code>div</code>.
  
−
Voici un petit aperçu à '''ne pas''' faire :
+
Voici un petit aperçu à '''ne pas faire''' :
  
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
 
<nowiki>
 
<nowiki>
−
{| align="right" border="0" cellpadding="0" | [[Image:Lentilles.jpg|75px|photo de myrtille]] |}
+
{| align="right" border="0" cellpadding="0" | [[Image:Lentilles.jpg|150px|photo de myrtille]] |}
 
</nowiki>
 
</nowiki>
 
</blockquote>
 
</blockquote>
Ligne 1 348 : Ligne 1 705 :
  
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
−
<nowiki>[[Image:Lentilles.jpg|75px|right|photo de myrtille]]</nowiki>
+
<nowiki>[[Image:Lentilles.jpg|150px|right|photo de myrtille]]</nowiki>
 
</blockquote>
 
</blockquote>
  
Ligne 1 354 : Ligne 1 711 :
  
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
−
[[Image:Lentilles.jpg|75px|right|photo de mytille]]
+
[[Image:Lentilles.jpg|150px|right|photo de mytille]]
 
La lentille est originaire d'Asie Centrale et les lentilles sauvages faisaient déjà partie du régime alimentaire des chasseurs cueilleurs du mésolithique (environ 8000 av. JC). Elle s'est répandue il y a fort longtemps au Proche-Orient et en Egypte, puis Phéniciens, Carthaginois et Romains l'ont introduite et développée en Europe.  
 
La lentille est originaire d'Asie Centrale et les lentilles sauvages faisaient déjà partie du régime alimentaire des chasseurs cueilleurs du mésolithique (environ 8000 av. JC). Elle s'est répandue il y a fort longtemps au Proche-Orient et en Egypte, puis Phéniciens, Carthaginois et Romains l'ont introduite et développée en Europe.  
  
Ligne 1 361 : Ligne 1 718 :
 
Les lentilles sont employées pour préparer des potages à petit prix et très nutritifs un peu partout en Europe et en Amérique du nord. Elles sont fréquemment combinées avec le riz qui a un temps de cuisson semblable. De plus leur association forme une protéine plus complète. Les lentilles sont employées dans l'ensemble des régions méditéranéennes et du Moyen-Orient et sont populaires en Inde où elles sont préparés sous forme de purée. En Inde, des lentilles sont la plupart du temps trouvées sous la forme (dal) fendue.  
 
Les lentilles sont employées pour préparer des potages à petit prix et très nutritifs un peu partout en Europe et en Amérique du nord. Elles sont fréquemment combinées avec le riz qui a un temps de cuisson semblable. De plus leur association forme une protéine plus complète. Les lentilles sont employées dans l'ensemble des régions méditéranéennes et du Moyen-Orient et sont populaires en Inde où elles sont préparés sous forme de purée. En Inde, des lentilles sont la plupart du temps trouvées sous la forme (dal) fendue.  
 
</blockquote>
 
</blockquote>
 +
<br />
  
 
=== Problèmes éventuels ===
 
=== Problèmes éventuels ===
Ligne 1 369 : 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]]
 +
[[Catégorie:Projet|* Aide Tableaux]]
 +
[[Catégorie:Modèle cadre]]
 +
[[Catégorie:Modèle tableau]]
 +
[[Catégorie:Créer et rédiger un Article]]

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]