Les tableaux html

Présentation des balises

La balise <table> permet de créer un tableau. Il faudra utiliser la balise <tr> pour créer une nouvelle ligne dans le tableau. Entre les balises <tr> et </tr> nous mettrons nos cellules grâce aux balises <td>. Entre les balises <td> et </td> nous mettrons le contenu de la case (texte, image...).

La balise <td> peut être remplacée par <th> si la case est un intitulé de colonne.

Exemple de tableau :

<table>
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Les balises <th> (intitulés de colonne) peuvent être placée n'importe où dans le tableau.

Autre exemple de tableau :

<table>
   <tr>
      <th>Prénom</th>
      <td>Mike</td>
      <td>Mister</td>
   </tr>
   <tr>
      <th>Nom</th>
      <td>Stuntman</td>
      <td>Pink</td>
   </tr>
   <tr>
      <th>Profession</th>
      <td>Cascadeur</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Les attributs de la balise <table>

On peut afficher les bordures des cellules avec l'attribut border placé dans la balise table.

Exemple :

<table border="1">
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

On peut modifier l'espacement entre le texte et les bords des cellules avec l'attribut cellpadding placé dans la balise table.

Exemple :

<table border="1" cellpadding="15">
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur un tableau plus aéré :

On peut aussi modifier l'espacement deux cellules avec l'attribut cellspacing placé dans la balise table.

Exemple :

<table border="1" cellpadding="15" cellspacing="10">
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

On peut enfin spécifiée la largeur du tableau avec l'attribut width placé dans la balise table. Cette valeur sera indiquée en pixel (width="400") ou en pourcentage (width="100%").

Exemple :

<table border="1" cellpadding="10" cellspacing="1" width="100%">
   <tr>
      <th>Prénom</th>
      <th>Nom</th>
      <th>Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Des attributs pour les cellules (<td> et <th>)

Pour chaque cellule, on peut spécifier une largeur grace à l'attribut width placé dans la balise td ou th. Notez bien que :

• La largeur peut être spécifiée en pixel (width="100") ou en pourcentage (width="33%")
• Attention à la cohérence des largeurs données à chaque cellule. Si on utilise des pourcentages, le total doit être égal à 100% ! Si on utilise des pixels, le total ne doit pas dépasser la largeur du tableau.
• Il n'est pas utile de préciser la largeur de chaque cellule. On donne généralement une largeur à la première cellule d'une colonne et celle ci sera valable pour toute la colonne.

Exemple :

<table border="1" cellpadding="10" cellspacing="1" width="100%">
   <tr>
      <th width="20%">Prénom</th>
      <th width="20%">Nom</th>
      <th width="60%">Profession</th>
   </tr>
   <tr>
      <td>Mike</td>
      <td>Stuntman</td>
      <td>Cascadeur</td>
   </tr>
   <tr>
      <td>Mister</td>
      <td>Pink</td>
      <td>Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Pour chaque cellule, on peut aussi préciser l'alignement horizontal du texte grace à l'attribut align qui peut prendre les valeurs suivantes :

• left (texte aligné à gauche)
• center (texte aligné au centre)
• right (texte aligné à droite)
• justify (texte justifié, peut utilisé sur le web car pas bien rendu)

Pour chaque cellule, on peut enfin préciser l'alignement vertical du texte grace à l'attribut valign (vertical align) qui peut prendre les valeurs suivantes :

• top (texte aligné en haut)
• middle (texte aligné au milieu)
• bottom (texte aligné en bas)

Exemple :

<table border="1" cellpadding="10" cellspacing="1" width="100%">
   <tr>
      <th width="20%" align="center">Prénom</th>
      <th width="20%" align="center">Nom</th>
      <th width="60%" align="left">Profession</th>
   </tr>
   <tr>
      <td align="center" valign="top">Mike</td>
      <td align="center" valign="top">Stuntman</td>
      <td align="left" valign="top">
         Cascadeur<br />Acteur<br />Pilote.
      </td>
   </tr>
   <tr>
      <td align="center" valign="top">Mister</td>
      <td align="center" valign="top">Pink</td>
      <td align="left" valign="top">Gangster</td>
   </tr>
</table>

Ce qui donne dans le navigateur :

En html, les tableaux sont très largement utilisés pour des mises en pages complexes.

Une utilisation détournée mais courante des tableaux :
On peut se servir de tableaux pour mettre en page des textes ou des images sur plusieurs colonnes. On précisera alors border="0" pour que le tableau ne soit pas visible.

Exemple :

<table border="0" cellpadding="5" cellspacing="0" width="100%">
   <tr>
      <td valign="top"><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.</p>
         <p> Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla.</p></td>
      <td align="right" valign="top"><img src="i/cours/enfant-regarde-la-rive.jpg" width="200" height="253" alt="enfant à Ngor (Sénégal)" /></td>
   </tr>
</table>

Ce qui donne dans le navigateur :