Aide:Insérer un tableau/Taille et proportions
width et height[modifier]
Toujours en utilisant style="xxx", il est possible de définir la largeur ( "width" ) et la hauteur ( "height" ) d'une cellule. Vous pouvez vous y prendre de deux façons différentes.
- Donner une valeur fixe en pixels.
Par exemple : «style="height:300px;" |» vous permettra d'obtenir un tableau ou une cellule de 300 pixels de hauteur.
Attention : évitez d'abuser de ce code pour les cellules, et fixez-vous une limite de 500 pixels de largeur maximum pour une case. - Donner une valeur proportionnelle en pourcentage.
Par exemple : «style="width:60%;" |» vous permettra d'obtenir un tableau ou une cellule occupant 60% de l'espace disponible.
Conseillé : utiliser une taille proportionnelle permet d'obtenir un tableau qui supporte mieux les redimensionnements.
Exemple[modifier]
(Changez la taille de votre fenêtre pour comprendre ce code.)
En tapant ce code :
{| class="tableaustandard" style="width:40%"
|+ Un tableau proportionnel avec des cellules de taille définie
|-
| Ce tableau occupe 40% de l'espace disponible en largeur. Sa largeur changera en fonction de la résolution de l'utilisateur ou de la taille de sa fenêtre.
|-
| style="height:120px"| Cette cellule a 120 pixels de hauteur. Sa hauteur ne changera jamais.
|}
On obtient ceci :
| Ce tableau occupe 40% de l'espace disponible en largeur. Sa largeur changera en fonction de la résolution de l'utilisateur ou de la taille de sa fenêtre. |
| Cette cellule a 120 pixels de hauteur. Sa hauteur ne changera jamais. |
Fusionner les cellules[modifier]
Pour finir, vous apprendrez dans cette section comment faire en sorte que certaines de vos cellules soient plus grandes que d'autres sans déformer votre tableau. Ce type d'opération se nomme une fusion, et peut avoir lieu à l'horizontale ou à la verticale.
Fusion horizontale[modifier]
Appelée aussi fusion en colonnes, il s'agit de la plus simple à mettre en place. Il suffit en effet d'utiliser le code colspan="n", et de remplacer « n » par un nombre.
Exemple[modifier]
En tapant ce code :
{| class="tableaustandard"
|+ Un tableau avec des fusions horizontales
|-
| Colonne 1
| Colonne 2
| Colonne 3
|-
| colspan="2" | Cette cellule fusionne 2 colonnes.
|
|-
| colspan="3" | Cette cellule fusionne 3 colonnes.
|}
On obtient ceci :
| Colonne 1 | Colonne 2 | Colonne 3 |
| Cette cellule fusionne 2 colonnes. | ||
| Cette cellule fusionne 3 colonnes. | ||
Fusion verticale[modifier]
Appelée aussi fusion de lignes, sa mise en place est un peu plus complexe. Il faut utiliser le code rowspan="n", et remplacer « n » par un nombre, en tenant compte de la position de la case à fusionner.
Exemple[modifier]
En tapant ce code :
{| class="tableaustandard"
|+ Un tableau avec une fusion verticale
|-
| rowspan="3" | [[Image:Triopikeur.png|80px]] Cette cellule fusionne 3 lignes.
| Ligne 1
|-
| Ligne 2
|-
| Ligne 3
|}
On obtient ceci :
 Cette cellule fusionne 3 lignes.
|
Ligne 1 |
| Ligne 2 | |
| Ligne 3 |