Tableau avec différentes parties

[Kimi Kozuma]

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

[Invité]

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.

[Kimi Kozuma]

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.

[Invité]

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 .

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.

[Kimi Kozuma]

Merci beaucoup de m'avoir tout expliqué