Le Deal du moment : -23%
EVGA SuperNOVA 650 G6 – Alimentation PC 100% ...
Voir le deal
77.91 €

Tableaux

Aller en bas

Tableaux Empty Tableaux

Message  Stephy 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: https://i.servimg.com/u/f83/14/13/54/94/tablea11.png
Le principe du premier tableau: https://servimg.com/view/14135494/43
Le principe des tableaux à l'intérieur des cellules: https://servimg.com/view/14135494/44

[ 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"
Stephy
Stephy
charming anti-PRINCE

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

http://www.folio-graphiques.fr/comptes/Chewy/index.php

Revenir en haut Aller en bas

Revenir en haut


 
Permission de ce forum:
Vous ne pouvez pas répondre aux sujets dans ce forum