Introduction

Beaucoup d'entre vous se servent de tableaux pour mettre en forme le message d'accueil de leur forum, ou bien la structure de leurs catégories, voire leurs sites web personnels, mais c'est un autre sujet. Une fois maîtrisés, les tableaux peuvent s'avérer pratiques pour agencer visuellement vos informations.

Bon, en principe je ne devrais pas vous encourager à utiliser des tableaux, dans la mesure où les normes du web - qui évoluent très vite - conseillent de les réserver à leur usage d'origine, à savoir trier des données (ils ne doivent pas être utilisés pour de la mise en page). Dans un monde idéal, vous devriez utiliser des blocs flottants.

Mais nous ne sommes pas dans un monde idéal et je sais que vous n'en ferez qu'à votre tête, parce que les tableaux c'est plus simple (tout est relatif) que les flottants et que de toute façon tout le monde fait comme ça, etc.

Donc, pour vous qui avez du mal à comprendre la logique de la construction d'un tableau, voici une possible méthodologie à suivre, en tout cas celle que j'utilise (à quelques détails près). J'espère que ça vous sera utile, le temps que je me motive à faire un tutoriel pour faire la même chose, mais avec des blocs flottants x)

Première étape : un peu de dessin

Pour commencer, emparez vous d'un crayon et d'une feuille de papier, et prenez cinq minutes pour dessiner votre tableau. Pensez à l'agencement que vous souhaitez avoir, sans (trop) vous préoccuper du concept de cellules.


Prolongez ensuite toutes les différentes séparations entre les cellules de manière à ce qu'elles traversent tout le tableau, verticalement et horizontalement. Vous avez alors votre nombre de lignes et de cellules par ligne.

Deuxième étape : coder un tableau de base

Partant de votre dessin, ne vous préoccupez pas de la hauteur ou de la largeur des lignes, ou des cellules fusionnées, et commencez par écrire le code de votre tableau de base. Dans notre cas, nous avons un tableau à quatre lignes et quatre colonnes, ce qui nous donne ceci :

Code:

<table>
   <tr> <!-- PREMIERE LIGNE -->
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>

   <tr> <!-- DEUXIEME LIGNE -->
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>

   <tr> <!-- TROISIEME LIGNE -->
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>

   <tr> <!-- QUATRIEME LIGNE -->
      <td></td>
      <td></td>
      <td></td>
      <td></td>
   </tr>
</table>

Note : n'hésitez pas à utiliser des commentaires HTML pour vous repérer dans votre code ! Ça n'a rien de honteux et ils ne vous mangeront pas x)

Troisième étape : fusionner les colonnes

On va procéder par étapes. Pour commencer, isolez chaque ligne de votre tableau pour les traiter individuellement, sans vous préoccuper des lignes avant ou après.


Dans notre exemple, nous voyons que les trois premières cellules dans la première ligne (la ligne bleue) ont été fusionnées en une seule. On va faire pareil dans le code et fusionner les trois premières cellules (td) de la première ligne en une seule cellule :

Code:

<tr>
    <td></td> <!-- ON FUSIONNE CETTE CELLULE -->
   <!-- ON ABSORBE CETTE CELLULE -->
   <!-- ON ABSORBE CETTE CELLULE -->
    <td></td>
</tr>

Oui, enfin ça ne suffit pas, il faut aussi indiquer dans le code que cette nouvelle cellule est le résultat de la fusion de trois cellules, on ajoute donc l'attribut colspan (fusion de colonnes) et sa valeur, ici 3.

Code:

<tr>
   <td colspan="3"></td>
   <!-- CELLULE ABSORBEE -->
   <!-- CELLULE ABSORBEE -->
   <td></td>
</tr>

Procédons de la même manière pour toutes les lignes, ce qui vous donnera ceci pour notre tableau d'exemple :

Code:

<table>
   <tr> <!-- PREMIERE LIGNE -->
      <td colspan="3"></td>
      <!-- CELLULE ABSORBEE -->
      <!-- CELLULE ABSORBEE -->
      <td></td>
   </tr>

   <tr> <!-- DEUXIEME LIGNE -->
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <td></td>
      <td></td>
   </tr>

   <tr> <!-- TROISIEME LIGNE -->
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <td></td>
      <td></td>
   </tr>

   <tr> <!-- QUATRIEME LIGNE -->
      <td></td>
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <td></td>
   </tr>
</table>

Notez que j'ai commenté le code de manière à garder une trace de chaque cellule absorbée. Ça peut être utile pour vous repérer, mais si ça ne vous parle pas vous pouvez retirer ces "cellules fantômes".

Une fois que cette étape est terminée, c'est au tour des colonnes. Là, ça va devenir plus compliqué car on a "perdu" des cellules en cours de route, vu qu'elles ont été fusionnées. Ne paniquez pas ! C'est presque fini.

Quatrième étape : fusionner les lignes

En premier lieu, comme pour la précédente étape, repérez les zones fusionnées verticalement :
Dans l'exemple, nous pouvons voir qu'il y a deux zones fusionnées en hauteur.

Comme précédemment, reprenons la lecture "ligne par ligne" du tableau. Nous voici dans la première ligne, on constate que la dernière cellule constitue une colonne de quatre lignes !

Où sont ces cellules dans le tableau codé ? Ce sont les dernières de chaque ligne :

Code:

<table>
   <tr>
      <td colspan="3"></td>
      <!-- CELLULE ABSORBEE -->
      <!-- CELLULE ABSORBEE -->
      <td></td>  <!-- ICI -->
   </tr>

   <tr>
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <td></td>
      <td></td> <!-- ICI -->
   </tr>

   <tr>
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <td></td>
      <td></td> <!-- ICI -->
   </tr>

   <tr>
      <td></td>
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <td></td> <!-- ICI -->
   </tr>
</table>

Supprimez les trois dernières et indiquez dans la première cellule qu'elle est le résultat de la fusion de quatre cellules, à l'aide de l'attribut rowspan cette fois :

Code:

<table>
   <tr>
      <td colspan="3"></td>
      <!-- CELLULE ABSORBEE -->
      <!-- CELLULE ABSORBEE -->
      <td rowspan="4"></td>  <!-- ON FUSIONNE -->
   </tr>

   <tr>
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <td></td>
      <!-- ON ABSORBE CETTE CELLULE -->
   </tr>

   <tr>
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <td></td>
      <!-- ON ABSORBE CETTE CELLULE -->
   </tr>

   <tr>
      <td></td>
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <!-- ON ABSORBE CETTE CELLULE -->
   </tr>
</table>

Sur la deuxième ligne, nous voyons que la première cellule (elle même le résultat d'une fusion) est fusionnée avec sa voisine du dessous. Même procédure :

Code:

<table>
   <tr>
      <td colspan="3"></td>
      <!-- CELLULE ABSORBEE -->
      <!-- CELLULE ABSORBEE -->
      <td rowspan="4"></td>
   </tr>

   <tr>
      <td colspan="2" rowspan="2"></td> <!-- ON FUSIONNE -->
      <!-- CELLULE ABSORBEE -->
      <td></td>
      <!-- CELLULE ABSORBEE -->
   </tr>

   <tr>
      <!-- ON ABSORBE CETTE CELLULE -->
      <!-- CELLULE ABSORBEE -->
      <td></td>
      <!-- CELLULE ABSORBEE -->
   </tr>

   <tr>
      <td></td>
      <td colspan="2"></td>
      <!-- CELLULE ABSORBEE -->
      <!-- CELLULE ABSORBEE -->
   </tr>
</table>

Et voilà, vous avez la structure de base de votre tableau telle que vous l'avez dessinée.
Maintenant, il vous faut encore le remplir avec ce que vous souhaitez ! N'hésitez pas à utiliser les commentaires et votre dessin comme points de repère pour le remplissage