SELFHTML: HTML / Tableaux / Aligner le contenu des cellules

SELFHTML/Quickbar HTML Tableaux

	Aligner le contenu des cellules
	Alignement horizontal Alignement vertical Alignement comptable (chiffres)

Alignement horizontal

Exemple d'affichage: aperçu

Les cellules d'entête (<th>) sont centrées si vous ne mentionnez rien d'autre, les cellules de données (<td>) alignées à gauche. Vous pouvez cependant aligner les cellules autrement.

Exemple:

<table border>
    <tr>
      <th align=left>cellule d'entête: 1ère ligne, 1ère colonne</th>
      <th>cellule d'entête: 1ère ligne, 2ème colonne</th>
      <th align=right>cellule d'entête: 1ère ligne, 3ème colonne</th>
    </tr>
    <tr>
      <td>cellule de données: 2éme ligne, 1ère colonne</td> 
      <td align=center>cellule de données: 2éme ligne, 2ème colonne</td>
      <td align=right>cellule de données: 2éme ligne, 3ème colonne</td>
    </tr>
</table>

Explication:

Avec align=left placé dans le repère d'ouverture vous pouvez aligner à gauche une cellule d'entête, avec la mention align=right l'aligner à droite. Vous pouvez centrer des cellules de donner en plaçant align=center dans leur repère d'ouverture et les aligner à droite avec align=right. Les mentions align=center pour les cellules d'entête et align=left pou les cellules de données sont naturellement aussi permises, mais font l'effet du réglage par défaut et de ce fait ne sont pas nécessaires. (align = alignement, left = gauche, center = centré, right = droit).

à partir de HTML 4.0 la mention align=justify est aussi autorisée. Ainsi vous forcez la justification à l'intérieur d'une cellule. De plus est permise la mention align=char en relation avec les attributs char= et charoff=. De telles mentions sont en principe plus judicieuses pour des colonnes complètes (voir alignement comptable (chiffres))

Attention:

Pour aligner de la même façon toutes les cellules d'une ligne, vous pouvez également faire les mentions d'alignement dans le repère d'ouverture de la ligne <tr>. Ainsi avec la mention t <tr align=right> vous alignez à droite par exemple toutes les cellules qui suivent de la ligne.

Alignement vertical

Exemple d'affichage: aperçu

À l'intérieur d'une ligne de tableau, c'est la cellule avec le plus grand contenu qui détermine la hauteur de la ligne. Les contenus des autres cellules de la ligne seront alignés au milieu. Même pour des hauteurs de ligne forcées tous les contenus de cellules sont alignés au milieu si rien d'autre n'est précisé. Vous pouvez aussi aligner le contenu des cellules en haut ou en bas.

Exemple:

<table border>
    <tr>
      <th valign=top>cellule d'entête: 1ère ligne, 1ère colonne</th>
      <th>cellule d'entête: 1ère ligne, 2ème colonne</th>
      <th valign=bottom>cellule d'entête: 1ère ligne, 3ème colonne</th>
    </tr>
    <tr>
      <td valign=top>cellule de données: 2ème ligne, 1ère colonne</td>
      <td>cellule de données: 2ème ligne, 2ème colonne</td>
      <td valign=bottom>cellule de données: 2ème ligne, 3ème colonne</td>
    </tr>
</table>

Explication:

Avec valign=top dans son repère d'ouverture, vous pouvez aligner une cellule en haut, avec la mention valign=bottom l'aligner en bas. Même la mention valign=middle est possible. Ceci est cependant le réglage par défaut - et donc superflu (valign = vertical align = alignement vertical, top = haut, bottom = bas, middle = milieu).

À partir de HTML 4.0 la mention valign=baseline est également permise. Alors, toutes les cellules de la ligne qui reçoit cette commende sont alignées sur une ligne de base commune. à savoir de telle façon que la première ligne de texte de toutes ces cellules commencera à la même hauteur.

Attention:

Pour aligner toutes les cellules d'une ligne de la même façon, vous pouvez également noter les mentions pour l'alignement dans le repère d'ouverture de la ligne <tr>. Ainsi par exemple avec <tr valign=top> vous alignez toutes les cellules suivantes de la ligne en haut.

Alignement comptable (chiffres)

Exemple d'affichage: aperçu

Pour les données comme les chiffres avec décimales de longueurs différentes avant ou après la virgules, l'alignement normal de texte n'est pas tellement approprié. De telles valeurs sont mieux mises en valeur quand elles sont alignées sur la virgule. Un tel alignement est naturellement judicieux pour des cellules qui contiennent de telles données.

Ni Netscape ni l' Explorer Internet MS n'interprètent ces mentions dans leur version 4.x.

Exemple:

<table border>
     <colgroup>
        <col width=120>
        <col width=50 align=char char=",">
     </colgroup>
    <tr>
      <th>élément</th>
      <th>part en mg</th>
    </tr>
    <tr>
      <td>Natrium</td>
      <td>10,3</td>
    </tr>
    <tr>
      <td>Nitrate</td>
      <td>0,117</td>
    </tr>
    <tr>
      <td>carbonate d'hydrogène</td>
      <td>330</td>
    </tr>
</table>

Explication:

Étant donné que cette mention se réfère à toute une colonne, il faut la mettre logiquement dans le repère de colonne <col> (voir à ce sujet prédéfinir des colonnes).

Avec align=char placé dans le repère <col> vous pouvez forcer l'alignement sur le signe décimal pour le contenu de la colonne. En outre vous avez aussi besoin de l'attribut char= (char = character = caractère). Derrière, vous placez entre guillemets un signe que vous utilisez comme signe décimal. Toutes les valeurs de la colonne concernée qui contiennent ce signe seront alignées de telle façon que le signe décimal sera toujours au même endroit. Dans l'exemple ci-dessus une virgule a été définie comme signe décimal. Dans les valeurs de la colonne concernée sont ensuite des valeurs comme 10,3 ou 0,117.

À côté de l'attribut char= pour déterminer le signe décimal vous pouvez mentionner encore en plus l'attribut charoff= (charoff = character offset = position du caractère). Vous mentionnez ainsi à quelle position le signe est placé au plus tôt.


après:	Relier des cellules
avant:	Forcer la hauteur et la largeur

SELFHTML/Quickbar HTML Tableaux