Espace
Espace
Espace
Virtuel
Virtuel
Virtuel
(X)HTML
Les listes
Listes à puces
Listes numérotées
Listes de termes
Les tableaux
Tableaux
Les cellules, bordures
Légendes et titres
Alignement
Les alignements

Alignement des tableaux et cellules

Connaître les attributs d'alignement s'avère parfois très utile pour placer correctement les tableaux dans votre page. Maintenant nous allons voir les différentes possibilités d'alignement d'un tableau avec l'attribut ALIGN qui peut avoir pour valeur : LEFT, CENTER, RIGHT et l'attribut VALIGN qui lui peut avoir MIDDLE (paramètre par défaut), TOP (haut) ou BOTTOM (bas) que l'on place dans la balise <table>.

Alignement Horizontal

A gauche

CodeRésultat
<table align="left">
   <caption align="bottom">
      Aligner ses tableaux
   </caption>
<tr>
   <th>Attribut</th>
   <th>Valeur</th>
</tr><tr>
   <td>Align</td>
   <td>Left (gauche)</td>
</tr></table>
Aligner ses tableaux
AttributValeur
AlignLeft (gauche)

Au centre

CodeRésultat
<table align="center">
<caption align="bottom">
   Aligner ses tableaux
</caption>
<tr>
   <th>Attribut</th>
   <th>Valeur</th>
</tr><tr>
   <td>Align</td>
   <td>Center (centre)</td>
</tr> </table>
Aligner ses tableaux
AttributValeur
AlignCenter (centre)

A droite

CodeRésultat
<table align="right">
<caption align="bottom">
   Aligner ses tableaux
</caption>
<tr>
   <th>Attribut</th>
   <th>Valeur</th>
</tr><tr>
   <td>Align</td>
   <td>Right (droite)</td>
</tr> </table>
Aligner ses tableaux
AttributValeur
AlignRight (droite)

Alignement Vertical

Aligner en haut

CodeRésultat
<table align="center" valign="top">
<caption align="bottom">
   Aligner ses tableaux
</caption>
<tr>
   <th>Attribut</th>
   <th>Valeur</th>
</tr> <tr>
   <td>Valign</td>
   <td>Top (haut)</td>
</tr> </table>
Aligner ses tableaux
AttributValeur
ValignTop (haut)

Aligner au millieu

CodeRésultat
<table align="center" valign="middle">
<caption align="bottom">
   Aligner ses tableaux
</caption>
<tr>
   <th>Attribut</th>
   <th>Valeur</th>
</tr><tr>
   <td>Valign</td>
   <td>Middle (millieu)</td>
</tr></table>
Aligner ses tableaux
AttributValeur
ValignMiddle (millieu)

Aligner en bas

CodeRésultat
<table align="center" valign="bottom">
<caption align="bottom">
   Aligner ses tableaux
</caption>
<tr>
   <th>Attribut</th>
   <th>Valeur</th>
</tr><tr>
   <td>Valign</td>
   <td>Bottom (bas)</td>
</tr></table>
Aligner ses tableaux
AttributValeur
ValignBottom (bas)

Aligner le contenu des cellules

Pour aligner le contenu de vos cellules vous pouvez utiliser les attributs align et valign que vous devez placer dans la balise <td>.

CodeRésultat
<table align="center">
   <caption align="bottom">
      Aligner le contenu des cellules
   </caption>
   <tr>
      <th align="left">Attribut</th>
      <th align="left">Valeur</th>
   </tr><tr>
      <td align="center" height="45px">Align</td>
      <td align="left">Left (gauche)</td>
   </tr><tr>
      <td align="center" height="45px">Align</td>
      <td align="center">Center (centre)</td>
   </tr><tr>
      <td align="center" height="45px">Align</td>
      <td align="right">Right (droite)</td>
   </tr><tr>
      <td align="center" height="45px">Valign</td>
      <td valign="top">Top (haut)</td>
   </tr><tr>
      <td align="center" height="45px">Valign</td>
      <td valign="middle">Middle (millieu)</td>
   </tr><tr>
      <td align="center" height="45px">Valign</td>
      <td valign="bottom">Bottom (bas)</td>
</tr></table>
Aligner le contenu des cellules
Attribut Valeur
Align Left (gauche)
Align Center (centre)
AlignRight (droite)
Valign Top (haut)
Valign Middle (millieu)
Valign Bottom (bas)