Construire un tableau en HTML

Voici ma méthode mnémotechnique basique pour y arriver sans trop se mélanger les pinceaux sur la base d’un tableau à 2 lignes (balise TR) et 4 colonnes (balise TD).

Un tableau est décrit par différents éléments :

  • L’élément TABLE correspond au tableau lui-même
  • L’élément TR est utilisé pour définir chacune des lignes du tableau
  • L’élément TD est utilisé pour chaque cellule
Dans l’ordre pour faciliter cette construction, je conseille de créer d’abord les lignes  :

<table>
<tr>ma 1ere ligne</tr>
<tr>ma 2nd ligne</tr>
</table>

Ensuite de « découper » chaque ligne en son nombre de colonne (ce qui revient à placer entre ET pour chaque TR quatre fois une balise TD de façon à obtenir le code suivant (et pour clarifier la lecture je passe à la ligne la balise fermante (avec un /devant) :

<table>
<tr>
<td>1ere ligne 1ere colonne</td>
<td>1ere ligne 2e colonne</td
<td>1ere ligne 3e colonne</td>
<td>1ere ligne 4e colonne</td>
</tr>
<tr>
<td>2e ligne 1ere colonne</td>
<td>2e ligne 2e colonne</td>
<td>2e ligne 3e colonne</td>
<td>2e ligne 4e colonne</td>
</tr>
</table>

et ainsi de suite pour les lignes suivantes il suffit d’ajouter un bloc

<tr>
<td>xe ligne 1ere colonne</td>
<td>xe ligne 2e colonne</td>
<td>xe ligne 3e colonne</td>
<td>xe ligne 4e colonne</td>
</tr>

avant </table>
Si vous voulez ajouter une colonne il faudra ajouter pour chaque TR une ligne <td></td> et pour enlever une colonne il faudra supprimer pour chaque TR la colonne en trop.

 

Pour fusionner deux colonnes, utiliser la propriété colspan
<tr>
<td colspan= »2″> fusion de 2 colonnes</td>
</tr>
<tr>
<td> col1 ligne2</td>
<td> col2 ligne2</td>
</tr>
Ce qui a pour résultat :

fusion de 2 colonnes
col1 ligne2 col2 ligne2

 

Pour fusionner des lignes, utiliser la propriété rowspan :
<tr>
<td> col1 ligne2</td>
<td rowspan= »2″> fusion de 2 lignes</td>
</tr>
<tr>
<td> col2 ligne2</td>
</tr>

col1 ligne2 fusion de 2 lignes
col2 ligne2

 

Combinaison :
<tr>
<td>colonne1 ligne1  </td>
<td>colonne2 ligne1  </td>
<td>colonne3 ligne1  </td>
<td>colonne4 ligne1  </td>
<tr>
<td rowspan= »2″> fusion de ligne</td>
<td colspan= »3″> fusion de colonne</td>
</tr>
<tr>
<td colspan= »2″> fusion colonne2et3 ligne3 </td>
<td>colonne3  ligne3</td>
</tr>

a pour résultat :

colonne1 ligne1 colonne2 ligne1 colonne3 ligne1 colonne4 ligne1
fusion de ligne fusion de colonne
fusion colonne2et3 ligne3 colonne3 ligne3

 

Ensuite, reportez vous ici pour compléter selon vos besoins.