Modifications

Aller à : navigation, rechercher

Aide:Tableau pour expert

84 octets ajoutés, 28 février 2011 à 22:27
m
width et height
'''width''' et '''height''' spécifient la largeur et la hauteur, aussi bien du tableau que des cellules. La taille peut se préciser en pixels ou en pourcentage. Dans les deux cas, cela représente une taille minimale.
Le premier exemple montre l'utilisation d'une taille fixe. Le premier cas utilise une largeur de 10 pixels, cependant la largeur du contenu du tableau étant plus grande, il s'adapte donc à cette taille. Le second cas utilise une taille de 100 pixels ; 100 pixels est plus grand que la largeur occupée par le contenu du tableau, celui-ci a donc bien une largeur de 100 pixels. Le troisième exemple utilise une largeur de 200 pixels.
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col widthstyle="background:#E0E0FF; width:33%" | Résultat affiché! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage Wiki! scope=col widthstyle="background:#E0E0FF; width:33%" | Codage HTML
|-
|
<table class="wikitable" style="width:10px">
<tr>
<td>cellule</td>
</tr>
</table>
<table class="wikitable" style="width:100px">
<tr>
<td>cellule</td>
</tr>
</table>
<table class="wikitable" style="width:200">
<tr>
<td>cellule</td>
</tr>
</table>
Voyons ce qu'il en est de l'utilisation d'une taille proportionnelle. Dans le premier cas, le tableau doit occuper un maximum de 33% de la largeur disponible. Dans le deuxième et le troisième cas, le tableau doit respectivement occuper un maximum de 50% et de 100%, de l'espace disponible.
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- bgcolor="#E0E0FF" ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki! scope=col style="background:#E0E0FF; width:33%" | Codage HTML
|-
|
|
<pre>
<table class="wikitable-center" style="width:33%">
<tr>
<td>cellule</td>
</tr>
</table>
|
<pre>
{| class="wikitable-center" style="width:50%"
|cellule
|}
<table class="wikitable-center" style="width:50%">
<tr>
<td>cellule</td>
</tr>
</table>
|
<pre>
{| class="wikitable-center" style="width:100%"
|cellule
|}
<table class="wikitable-center" style="width:100%">
<tr>
<td>cellule</td>
</tr>
</table>
Pour l'attribut <code>height</code>, l'utilisation est la même que pour <code>width</code>, mais cette fois-ci la hauteur du tableau change. Ces deux attributs peuvent également être utilisés pour chacune des cellules :
{| border="0" alignclass="wikitable-center" cellpadding="3px" style="width:100%; border: 1px solid #999; background-color:#FFFFFF;"|- style="background:#E0E0FF" ! scope=col style="background:#E0E0FF; width:33%" | Résultat affiché! scope=col style="background:#E0E0FF; width:33%" | Codage Wiki! scope=col style="background:#E0E0FF; width:33%" | Codage HTML
|-
|
{| class="wikitable-center" style="height:200px"
| colspan="3" | Tableau 1
|-
|
<pre>
{| class="wikitable-center" style="height:200px"
| colspan="3" | Tableau 1
|-
<table class="wikitable-center" style="height:200px">
<tr>
<td colspan="3">Tableau 1</td>
</tr>
<tr>
<td style="width:33%">1/3 cellule 1</td> <td style="width:33%">1/3 cellule 2</td> <td style="width:33%">1/3 cellule 3</td>
</tr>
</table>
|-
|
{| class="wikitable-center" style="height:200px"
| colspan="3" | Tableau 2
|-
|
<pre>
{| class="wikitable-center" style="height:200px"
| colspan="3" | Tableau 2
|-
<table class="wikitable-center" style="height:200px">
<tr>
<td colspan="3">Tableau 2</td>
</tr>
<tr>
<td style="width:50%">1/2</td> <td style="width:25%">1/4</td> <td style="width:25%">1/4</td>
</tr>
</table>
Wgw
5 307
modifications

Menu de navigation