Ilsé
>> Fondatrice <<
Nombre de messages : 209
Age : 31
Localisation : DTC
Date d'inscription : 20/10/2006
 |  Sujet: Les tableaux  Sam 30 Mar - 17:43 | |
| Je commence par expliquer le tableau de base.
- Code:
-
<table style="width: 100%; border-collapse:collapse; border:1px solid #FFFFFF;">
<tr style="border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF;">contenu 1</td>
<td style="border:1px solid #FFFFFF;">contenu 2</td>
</tr>
<tr style="border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF;">contenu 3</td>
<td style="border:1px solid #FFFFFF;">contenu 4</td>
</tr>
</table>
Ce qui donne :
- Spoiler:
contenu 1 |
contenu 2 |
contenu 3 |
contenu 4 |
- Code:
-
<table style="width: 100%; border-collapse:collapse; border:1px solid #FFFFFF;"></table>
Te donne les informations générales du tableau. Ainsi, tu aura une table pour encadrer un texte avec une bordure de 1 pixel, solide ( donc pleine ) et de couleur blanche.
Tu peux modifier la taille ( width ) et la bordure sans problèmes. Fais des tests !
- Code:
-
<tr></tr> Te donne une rangée ( ou colonne, je confonds toujours les deux termes :s ) du tableau.
Quant à - Code:
-
<td></td> , il te donne une colonne ( ou rangée, pour le même problème qu'au dessus xD ).
- Code:
-
style="border:1px solid #FFFFFF;"
Ici, il n'y a que des informations sur la bordure : largeur en pixel, style ( pleine ) et couleur.
Tu rajoutes des td et des tr autant que tu veux mais ils vont toujours ensemble ( ou alors, tu n'a pas de séparations ). Tu peux aussi retirer la bordure, ce qui sépare ton texte sans ligne. Exemple :
- Spoiler:
contenu 1 |
contenu 2 |
contenu 3 |
contenu 4 |
Pour règler la taille, il faut juste l'ajouter pour que l'ordinateur comprenne ce que tu veux. Je te conseille deux codes, tout simples, pour ça.
WIDTH : La propriété "width" indique la largeur d'un bloc. Se note en pixels.
HEIGHT : La propriété "height" indique la hauteur d'un bloc. En pixels aussi.
En son absence comme le contenu est prioritaire, l'élément "contenant le contenu" s'ajuste automatiquement et sa valeur est considérée comme étant "auto".
Pour avoir deux parties différentes dans ton tableau :
- Code:
-
<table style="width: 100%; border-collapse:collapse; border:1px solid #FFFFFF;">
<tr style="border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF; width:10px">contenu 1</td>
<td style="border:1px solid #FFFFFF; width:100px">contenu 2</td>
</tr>
<tr style="border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF;">contenu 3</td>
<td style="border:1px solid #FFFFFF;">contenu 4</td>
</tr>
</table>
Donne :
- Spoiler:
contenu 1 |
contenu 2 |
contenu 3 |
contenu 4 |
Et bien sûr, on peut décorer les tableaux comme on veut ! Il suffit de connaître les codes basiques ^^
Un exemple ? J'vais mettre une texture dans toutes les cases 
- Code:
-
<table style="width: 100%; border-collapse:collapse; border:1px solid #FFFFFF; background-image:url(http://i63.servimg.com/u/f63/09/03/76/30/012dn010.jpg);">
<tr style="border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF; width:10px">contenu 1</td>
<td style="border:1px solid #FFFFFF; width:100px">contenu 2</td>
</tr>
<tr style="border:1px solid #FFFFFF;">
<td style="border:1px solid #FFFFFF;">contenu 3</td>
<td style="border:1px solid #FFFFFF;">contenu 4</td>
</tr>
</table>
- Spoiler:
contenu 1 |
contenu 2 |
contenu 3 |
contenu 4 |
Pour en mettre dans une case seulement, il fallait placer la texture dans un td ou un tr ^^
Si vous avez des questions, n'hésitez pas ! | |
|
