Aide:Tableau : Différence entre versions

De Ekopedia
Aller à : navigation, rechercher
(→‎style : class="ekotable")
(→‎Divers exemples de tableaux : : ajout un lien)
 
(16 révisions intermédiaires par 3 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 +
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.<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}}
−
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.
+
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é) ==
 +
 
 +
=== 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é ===
  
−
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.
+
{{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>
  
−
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.
+
=== 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 ==
+
=== 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 34 : 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 84 : 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 92 : 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 106 : 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 121 : 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 136 : 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 151 : 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 160 : Ligne 500 :
  
 
  &lt;tr ''paramètres''&gt; ... &lt;/tr&gt;
 
  &lt;tr ''paramètres''&gt; ... &lt;/tr&gt;
 +
<br />
  
 
=== cellule titre ===
 
=== cellule titre ===
Ligne 274 : Ligne 615 :
 
</pre>
 
</pre>
 
|}
 
|}
−
 
+
<br />
−
 
 
  
 
=== légende ===
 
=== légende ===
Ligne 325 : Ligne 665 :
 
</pre>
 
</pre>
 
|}
 
|}
−
 
+
<br />
−
 
 
  
 
=== Exemple récapitulatif ===
 
=== Exemple récapitulatif ===
Ligne 374 : 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 :
  
Ligne 436 : 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 525 : 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;"
Ligne 608 : Ligne 950 :
 
</pre>
 
</pre>
 
|}
 
|}
−
 
+
<br />
  
 
=== fusion de cellules ===
 
=== fusion de cellules ===
Ligne 712 : 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 872 : Ligne 1 214 :
 
</pre>
 
</pre>
 
|}
 
|}
 +
<br />
  
 
=== espacements ===
 
=== espacements ===
Ligne 1 021 : Ligne 1 364 :
 
</pre>
 
</pre>
 
|}
 
|}
−
 
+
<br />
  
 
=== largeur et hauteur ===
 
=== largeur et hauteur ===
Ligne 1 156 : 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;"
Ligne 1 226 : Ligne 1 568 :
 
</pre>
 
</pre>
 
|}
 
|}
−
 
+
<br />
−
 
 
  
 
=== couleur d'arrière-plan ===
 
=== couleur d'arrière-plan ===
Ligne 1 266 : Ligne 1 607 :
 
</pre>
 
</pre>
 
|}
 
|}
−
 
+
<br />
−
 
 
  
 
=== style ===
 
=== style ===
Ligne 1 311 : Ligne 1 651 :
  
 
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 ====
Ligne 1 325 : Ligne 1 669 :
  
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
 
<blockquote style="background: white; border: 1px solid black; padding: 1em;">
−
{| border="1" |
+
{| class="ekotable" |
 
|-
 
|-
 
|1980||Vague de pluie
 
|1980||Vague de pluie
Ligne 1 345 : Ligne 1 689 :
 
*1994 : Le ciel est vert
 
*1994 : Le ciel est vert
 
</blockquote>
 
</blockquote>
 +
<br />
  
 
==== Légende d'illustration ====
 
==== Légende d'illustration ====
Ligne 1 373 : 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 381 : 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]