Conception & Réalisation de sites Web

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Mike Mister
Nom Stuntman Pink
Profession Cascadeur Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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é :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Mister Pink Gangster

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 :

Prénom Nom Profession
Mike Stuntman Cascadeur
Acteur
Pilote.
Mister Pink Gangster

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 :

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.

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.

enfant à Ngor (Sénégal)
Balise Indication donnée au navigateur
<table> Début d'un tableau. Cette balise propose les attributs suivants :
width="Val", Val étant un entier ou un pourcentage. Précise la largeur du tableau
cellpadding="Val", Val étant un entier. Précise l'espacement entre le texte d'une cellule et le bord de la cellule
cellspacing="Val", Val étant un entier. Précise l'espacement entre 2 cellules
border="Val", Val étant un entier. Précise la largeur du trait des bords des cellules
</table> Fin d'un tableau.
<tr> Début d'une ligne du tableau [tr => table row].
</tr> Fin d'une ligne du tableau.
<td> Début d'une cellule (ou case) du tableau [td => table data]. Cette balise propose les attributs suivants :
width="Val", Val étant un entier ou un pourcentage. Précise la largeur de la cellule
align="Val", Val pouvant être left (gauche), right (droite), center (centré) ou justify (justifié). Précise l'alignement horizontal du texte.
valign="Val", Val pouvant être top (haut), bottom (bas), ou middle (milieu). Précise l'alignement vertical du texte.
</td> Fin d'une cellule (ou case) du tableau.
<th> Début d'une cellule d'intitulé (entête, généralement utilisée pour la première ligne) du tableau [th => table header]. Cette balise propose les mêmes attributs que la balise td (cf ci-dessus).
</th> Fin d'une cellule d'intitulé du tableau.
Copyright © 2017 Erwan DUPEUX MAIRE - Tous droits réservés.
Valid XHTML 1.0 Transitional Valid CSS!