Tableau avec différentes parties

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

Résolu Tableau avec différentes parties

Message par Kimi Kozuma le Sam 7 Juil 2012 - 5:20

Bonjour.

J'ai tenté de réaliser un tableau comme celui-là:
Mais je rencontre plusieurs problèmes différents: les boites ne sont pas à la même hauteur, certaines boites superpose les autres, le texte n'apparait pas...
Je sais qu'on a pas le droit de demander "un truc comme ça", mais je voudrais juste savoir les étapes à faire pour réaliser un tableau comme cela. Si quelqu'un aurait l'amabilité de m'expliquer comment faire, sachez que je vous remercie d'avance de m'épargner une autre nuit blanche à ce sujet Smile


Dernière édition par Kimi Kozuma le Lun 9 Juil 2012 - 15:42, édité 1 fois

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau avec différentes parties

Message par Invité le Lun 9 Juil 2012 - 11:27

Bonjour,

Ca ressemble à :
Un tableau:
<table> </table>
avec 3 lignes:
<table>
<tr> </tr>
<tr> </tr>
<tr> </tr>

</table>
et 3 colonnes:
<table>
<tr>
<td> </td>
<td> </td>
<td> </td>

</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>

</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>

</tr>
</table>
Ayant un espacement des cellules:
<table width="100%" cellspacing="5">
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
<td> </td>
</tr>
</table>
Quelques fusions de cellules:
<table width="100%" cellspacing="5">
<tr>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
Et un peu de style:
<table width="100%" cellspacing="5" id="tablacc">
<tr>
<td> </td>
<td colspan="2"> </td>
</tr>
<tr>
<td> </td>
<td rowspan="2"> </td>
<td rowspan="2"> </td>
</tr>
<tr>
<td> </td>
</tr>
</table>
avec dans la feuille CSS:
Code:
#tablacc td{
  border: 1px solid #fdf;
  background: #000;
  color: #fff;
  padding: 10px;
  vertical-align: top;}
Spoiler:
Bien sincèrement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau avec différentes parties

Message par Kimi Kozuma le Lun 9 Juil 2012 - 14:29

Merci c'est impeccable.

J'aurais une autre question. Comment on fait pour pouvoir personnaliser chacune des cellules différemment. J'ai vu que le css ne comportait que le style pour toutes les cellules.

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau avec différentes parties

Message par Invité le Lun 9 Juil 2012 - 15:27

Dans ce cas là, il faut appliquer un identifiant (ou une class) par cellule et ôter celui du tableau:
<table width="100%" cellspacing="5" id="tablacc">
<tr>
<td class="cellacc1"> </td>
<td colspan="2" class="cellacc2"> </td>
</tr>
<tr>
<td class="cellacc3"> </td>
<td rowspan="2" class="cellacc4"> </td>
<td rowspan="2" class="cellacc5"> </td>
</tr>
<tr>
<td class="cellacc6"> </td>
</tr>
</table>
Puis reporter chaque identifant ou class dans la feuille CSS. Vous pouvez les nommer comme vous le souhaitez Wink.
Code:
.cellacc1{propriétés}
.cellacc2{propriétés}
.cellacc3{propriétés}
.cellacc4{propriétés}
.cellacc5{propriétés}
.cellacc6{propriétés}

Bien sincèrement.

Invité
Invité


Invité a été remercié(e) par l'auteur de ce sujet.

Résolu Re: Tableau avec différentes parties

Message par Kimi Kozuma le Lun 9 Juil 2012 - 15:41

Merci beaucoup de m'avoir tout expliqué Smile

Kimi Kozuma
****

Messages : 245
Inscrit(e) le : 03/06/2009

http://setmybodyfree.forumactif.fr/
Kimi Kozuma 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