AccueilFAQRechercherS'enregistrerMembresGroupesConnexion

Partagez | 
 

 Tableaux

Voir le sujet précédent Voir le sujet suivant Aller en bas 
AuteurMessage
Stephy
charming anti-PRINCE
avatar

Nombre de messages : 714
Date d'inscription : 30/05/2007

MessageSujet: Tableaux   Dim 25 Oct - 17:20

Tableau
-Les tableaux fonctionne de gauche à droite et non pas de haut en bas. Les colonnes sont donc horizontale et pas verticale.-

Code:
[table valign="top" border="0" cellpadding="5" cellspacing="5"]
[tr][td]
[/td][/tr]
[/table]
{ Explication
valign="top" : Pour que le texte sois toujours en haut.
border="0" : La bordure
tr : La colonne [ 3 tr différents = 3 colonnes une à côté de l'autre ]
td : L'étage [ 3 td différents = 3 étages, l'un en dessous de l'autre ]


Modèle HTML-CSS
Code:
<table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
<tr>
<td style="vertical-align: top; width: 50%;">
      <table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
            <tbody>
                  <tr>
                      <td style="width: 50%; text-align: center; vertical-align: top;"><span class="boxtitle">titre 1</span><div class="box">contenu 1</div>
</td>
                        <td style="width: 50%; text-align: center; vertical-align: top;"><span class="boxtitle">titre 2</span><div class="box">contenu 2</div>
</td>
</tr>
</tbody>
</table>
            <table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
              <tbody>
                  <tr>
<td style="width: 50%; text-align: center; vertical-align: top;" rowspan="1" colspan="1">
<span class="boxtitle">titre 3</span><div class="box">contenu 3<br />blablablablablabla<br />
Blablablablablabla<br />
Blablablablablabla<br /></div>
</td>
</tr>
</tbody>
</table>
<table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 50%; text-align: center; vertical-align: top;" rowspan="1" colspan="1">
<span class="boxtitle">Titre 4</span><div class="box">contenu 4<br />blablablablablabla<br />
Blablablablablabla<br />
Blablablablablabla<br /></div>
</td>
</tr>
</tbody>
</table>
</td>
<td style="vertical-align: top; width: 50%;">
<table cellspacing="2" cellpadding="2" border="0" style="width: 100%; text-align: left; margin-left: auto; margin-right: auto;">
<tbody>
<tr>
<td style="width: 50%; vertical-align: top;"><span class="boxtitle">Titre 5</span>
<div class="box">-Contenu 5<br /> -faire des tableauX<br />-c'est ma passion dans la vie<br />-surtout à une heure du matin<br /></div>
</td>
<td style="vertical-align: top;"><span class="boxtitle">titre 6</span><div class="box">Contenu 6<br />Blablablablablabla<br />blablablablablabla<br />
Blablablablablabla<br />
Blablablablablabla<br /></div>
</td>
</tr>
<tr>
<td rowspan="1" colspan="2" style="width:100%;"><span class="boxtitle">titre 7</span><div class="box">Contenu 7<br />blablablablablabla<br />
Blablablablablabla<br />
Blablablablablabla<br /></div></td>
</tr>
</tbody>
</table>
</td>
</tr>
</table>

Qui donne: http://i83.servimg.com/u/f83/14/13/54/94/tablea11.png
Le principe du premier tableau: http://www.servimg.com/image_preview.php?i=43&u=14135494
Le principe des tableaux à l'intérieur des cellules: http://www.servimg.com/image_preview.php?i=44&u=14135494

[ Explication
Code:
-La base est que <table> ouvre un tableau, à l'intérieur j'ouvre une ligne par <tr> et à l'intérieur de cette ligne je peux ouvrir des cellules <td>.
-Les <br /> sont des retour à la ligne, vous n'êtes absolument pas obligé de les mettre.
-Pour que le texte soit aligné différemment dans les cellules, modifiez le "text-align" qui est dans la ligne du td.
-Les "span" dans lesquels j'intègre les titres servent à mettre le css dessus, et les "div" pour l'intérieur de votre cellule.

Le code css a ajouter pour ces variables est : [CSS]
Code:
.box {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#F0F0F0;
color:#718C91;
font-size:11px;
margin:0;
padding:3px 10px;
}

.boxtitle {
-moz-border-radius-bottomleft:5px;
-moz-border-radius-bottomright:5px;
-moz-border-radius-topleft:5px;
-moz-border-radius-topright:5px;
background-color:#BEDCDC;
color:#F0F0F0;
display:block;
font-size:11px;
font-weight:bold;
margin:0 0 5px;
padding:3px 10px;
text-align:center;
text-decoration:none;
text-transform:uppercase;
}
La légende de ce css est la suivante :
-box title : correspond la zone du titre
-box : correspond la zone intérieure de la cellule
-les -moz-border-radius servent à faire les coins arrondis, vous pouvez effacer ces lignes si vous ne les voulez pas.
(Les bords arrondis ne se verront que sous Firefox)
-Background-color est la couleur d'arrière plan, vous pouvez modifier le code couleur.
-color: est la couleur du texte dans cette zone
-font-size: correpond à la taille de la police, vous pouvez modifier plus grand/plus petit en augmentant ou diminuant la taille en pixel.
-font-weightbold : fais que le texte dans cette cellule est en gras
-text-transform:uppercase : fais que le texte dans la cellule est en majuscule.
(Pour les deux lignes précédentes si vous ne les voulez pas, il suffit de les retirer)
-text-align :aligne le texte dans la cellule, vous pouvez changer "center" pour "left" ou "right"
Revenir en haut Aller en bas
Voir le profil de l'utilisateur http://www.folio-graphiques.fr/comptes/Chewy/index.php
 

Tableaux

Voir le sujet précédent Voir le sujet suivant Revenir en haut 
Page 1 sur 1

Permission de ce forum:Vous ne pouvez pas répondre aux sujets dans ce forum
 :: TASTY PLAYGROUND :: Codes-