Problème avec les tableaux

Voir le sujet précédent Voir le sujet suivant Aller en bas

Résolu Problème avec les tableaux

Message par Rikku-Chan le Mer 23 Mar 2011 - 22:24

Bonsoir à vous,

Je viens vous demander de l'aide pour un tableau. Enfaite, j'ai essayer et j'ai reussi seulement a faire un tableau, alors que moi j'aimerais qu'il y en ai plusieurs : http://i61.servimg.com/u/f61/16/11/46/37/azdert10.jpg

Voici ce que j'ai mis dansmon article:

Code:
<td style="width:45%;vertical-align:top; height:150px;" class="cellules"><div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>  <td style="width:45%;vertical-align:top; height:150px;" class="cellules">  <div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>
</td></table>

et dans mon css:

Code:
.titre1 {
color:#A8E0AD;
border: 1px solid #000000;
text-transform:uppercase;
font-size:15px;
padding-top:2px;
padding-bottom:2px;
text-align:center;
}

.cellules {
border: 1px solid black;
color:#747474;
}

Seulement que le problème c'est que quand je fais le même code deux fois (celui pour l'article) et bien ça me donne ça: http://i61.servimg.com/u/f61/16/11/46/37/sans_t11.jpg


Voici le code que j'ai mis dans l'article (celui du css c'est le meme que celui d'avant):

Code:
<td style="width:45%;vertical-align:top; height:150px;" class="cellules"><div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>  <td style="width:45%;vertical-align:top; height:150px;" class="cellules">  <div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>
</td>

<td style="width:45%;vertical-align:top; height:150px;" class="cellules"><div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>  <td style="width:45%;vertical-align:top; height:150px;" class="cellules">  <div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>
</td></table>


Les tableaux sont l'un a coté de l'autre =/
Moi je voudrai qu'il y est deux tableau puis après un espace en dessous puis après deux tableaux et ainsi de suite.
Enfait, dans ces tableaux je voudrai mettre les noms des personnages déjà prit.

Merci d'avance ^^


Dernière édition par Rikku-Chan le Mer 23 Mar 2011 - 22:48, édité 1 fois

Rikku-Chan
***

Féminin
Messages : 164
Inscrit(e) le : 17/01/2011

http://www.green-apple.forumsactifs.com
Rikku-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux

Message par Lixyr le Mer 23 Mar 2011 - 22:40

Bonsoir.

Une erreur toute bête. ^^

Vous voulez quatre cellules, et pour chaque cellule vous mettez un attribut : 45%;

Reprenons nos petits cours de math.
Une ligne normale a techniquement une largeur de 100%.

Or, 45 * 4 = 180%.
Il est donc normal que le tableau s'affiche mal puisque vous demandez une largeur bien trop grande.

Il faudrait diviser la largeur totale pouvant être obtenue : 100, par le nombre de cellules contenues sur une même ligne : 4,
ce qui donne une largeur de 20% pour chaque cellule.



<td style="width:20%;vertical-align:top; height:150px;" class="cellules"> <div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>
</td>

Code:


<td style="width:20%;vertical-align:top; height:150px;" class="cellules">  <div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>
</td>




*edit*


ensuite, si ce n'est pas ce que vous demandez, mais que vous voulez que les deux cellules de droite se retrouvent en dessous, et bien il faut changer de ligne :

<table> => table/bordure
<tr> => ligne
<td> => cellule
et leur balise de fermeture correspondante.

Je peux vous faire le code de votre image première d'exemple si vous le voulez, avec les explications.

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux

Message par Rikku-Chan le Mer 23 Mar 2011 - 22:44

Nan en faite c'est pas sur une même ligne que je voulais les quatre tableuax ^^

Mais j'ai trouver (je ne sais pas comment) le resultat. Merci quand même ='D

ps: merc pour le cour de Maths xD

EDIT: oui ce e je voulais c'étai deux tableau au dessus pui deux tableaux en dessous. Merci de votre explication.

Rikku-Chan
***

Féminin
Messages : 164
Inscrit(e) le : 17/01/2011

http://www.green-apple.forumsactifs.com
Rikku-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux

Message par Lixyr le Mer 23 Mar 2011 - 22:46

(j'ai édité après, mon message xD)


Faites attention, je ne sais pas si vous avez posté tout votre code, mais un tableau se fait sous cette forme si vous voulez qu'il s'affiche bien :

Code:

<table>
    <tr>
        <td>PREMIERE CELLULE</td>
        <td>DEUXIEME CELLULE</td>
    </tr>
</table>

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux

Message par Rikku-Chan le Mer 23 Mar 2011 - 22:47

(Oui j'ai vu à la derniere minute xD)

D'accord, je prend note ='D

Rikku-Chan
***

Féminin
Messages : 164
Inscrit(e) le : 17/01/2011

http://www.green-apple.forumsactifs.com
Rikku-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux

Message par Lixyr le Mer 23 Mar 2011 - 22:48

Vous avez trouvé comment mettre un petit espace entre les quatre cellules ?
(deux au dessus et deux en dessous)





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux

Message par Rikku-Chan le Mer 23 Mar 2011 - 22:49

J'ai fait cci:

Code:
<table><tr><td style="width:50%;vertical-align:top; height:150px;" class="cellules"><div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center></td>  <td style="width:50%;vertical-align:top; height:150px;" class="cellules">  <div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>
</td></tr></table>

<table><tr>

<td style="width:45%;vertical-align:top; height:150px;" class="cellules"><div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center> </td><td style="width:45%;vertical-align:top; height:150px;" class="cellules">  <div class="titre1">| FILLES |</div>


<center>Ichigo Kurosaki</center>
</td></table>

Seulement pour agrandir la largeur des colonnes, comment on fait?

Rikku-Chan
***

Féminin
Messages : 164
Inscrit(e) le : 17/01/2011

http://www.green-apple.forumsactifs.com
Rikku-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux

Message par Lixyr le Mer 23 Mar 2011 - 22:53

Ça passe par le width:50%

Par ailleurs, pour changer de ligne, vous n'êtes pas obligé de fermer le tableau et d'en ré ouvrir un pour avoir deux cellules l'un au dessous de l'autre.

Il faut faire une schéma de cet ordre-là :
Code:

<table>
  <tr>
      <td>1.1</td>
      <td>1.2</td>
  </tr>
  <tr>
      <td>2.1</td>
      <td>2.2</td>
  <tr>
</table>

etc


en ensuite, pour espacer entre les cellules, vous modifier (rajoutez*) un attribut dans la table :

<table cellspacing="10">

Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux

Message par Rikku-Chan le Mer 23 Mar 2011 - 22:56

D'accord ='D

Et bien je pense que c'est tout bon, je vous remercie d'avoir prit votre temps pour m'expliquer calmement le problème et je vous souhaite une bonne soirée. A bientot =)

Rikku-Chan
***

Féminin
Messages : 164
Inscrit(e) le : 17/01/2011

http://www.green-apple.forumsactifs.com
Rikku-Chan a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Problème avec les tableaux

Message par Lixyr le Mer 23 Mar 2011 - 22:57

Je vous en prie.

Merci beaucoup. Bonne soirée à vous aussi.
A bientôt.





Lixyr
Aidactive
Aidactive

Féminin
Messages : 5595
Inscrit(e) le : 22/07/2010

http://forum-test-in-lixyr.rpg-dynasty.com/
Lixyr a été remercié(e) par l'auteur de ce sujet.

Voir le sujet précédent Voir le sujet suivant Revenir en haut


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