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 cellpaddingplacé 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 tdou 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>Pour vous accompagner dans la consolidation de vos acquis académiques, Magoé Education vous offre un espace qui vous permet de reviser vos cours, d'échanger avec des enseignants ainsi qu'avec vos collègues apprenants.</p>
         <p> Avec un environnement de travail complet, Magoé Education facilite la gestion des établissements en couvrant toutes les activités pédagogiques: cahier de texte, emploi du temps, gestion des notes, taux présence, ...</p></td>
      <td align="right" valign="top"><img src="magoe android/logo_magoe_education_512.png" width="200" height="200" alt="Magoé Education /></td>
   </tr>
</table>

Ce qui donne dans le navigateur :

Pour vous accompagner dans la consolidation de vos acquis académiques, Magoé Education vous offre un espace qui vous permet de reviser vos cours, d'échanger avec des enseignants ainsi qu'avec vos collègues apprenants Avec un environnement de travail complet, Magoé Education facilite la gestion des établissements en couvrant toutes les activités pédagogiques: cahier de texte, emploi du temps, gestion des notes, taux présence, ...

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.

---

2018-06-26 07:20:34 / mazoughou@magoe.gn