Tableaux (2/3)

Alignement du tableau

Pour définir l'alignement du tableau sur la feuille, vous devez renseigner l'attribut ALIGN du marqueur <TABLE>.

Par défaut, le tableau est positionné à gauche de la page, et aucun élément n'est placé à sa droite (espace vide).

Si ALIGN="CENTER", le tableau est centré sur la page, et là encore aucun élément n'est placé à sa gauche et à sa droite.
Vous pouvez aussi aligner du texte sur l'un des côtés du tableau :

Si ALIGN="LEFT", le tableau est placé à gauche de la page, et du texte peut être placé à sa droite.
Si ALIGN="RIGHT", le tableau est placé à droite de la page, et du texte peut être placé à sa gauche.

Pour arrêter l'alignement du texte à gauche ou à droite du tableau, il suffit taper la ligne de commande suivante :
<BR CLEAR="alignement_horizontal">
Comme précédemment, alignement_horizontal peut prendre les valeurs LEFT ou RIGHT (pour arrêter respectivement l'alignement du texte autour d'une image positionnée à gauche ou à droite de l'écran). Mais il peut prendre aussi la valeur ALL, si les deux marges de la page sont occupées.

Exemple :

<HTML>
<HEAD>
<TITLE>Alignement de tableau</TITLE>
</HEAD>
<BODY>

<p>Ce premier tableau n'est pas entoure par du texte.</p>
<table align="center" border> 
<tr>
      <th>Intitule premiere colonne</th>
      <th>Intitule deuxieme colonne</th>
</tr>
<tr>
      <td>Texte de la premiere case de la deuxieme ligne</td>
      <td>Texte de la deuxieme case de la deuxieme ligne</td>
</tr>
<tr>
      <td>Texte de la premiere case de la troisieme ligne</td>
      <td>Texte de la deuxieme case de la troisieme ligne</td>
</tr>
</table>
Ce texte est place en dessous du tableau. Ce texte est place en dessous du tableau. Ce texte est place en dessous du tableau. Ce texte est place en dessous du tableau. Ce texte est place en dessous du tableau. Ce texte est place en dessous du tableau. Ce texte est place en dessous du tableau. Ce texte est place en dessous du tableau.

<p><br><br><br>Ce second tableau est entoure par du texte</p>
<table align="left" border>
<tr>
      <th>Intitule premiere colonne</th>
      <th>Intitule deuxieme colonne</th>
</tr>
<tr>
      <td>Texte de la premiere case de la deuxieme ligne</td>
      <td>Texte de la deuxieme case de la deuxieme ligne</td>
</tr>
<tr>
      <td>Texte de la premiere case de la troisieme ligne</td>
      <td>Texte de la deuxieme case de la troisieme ligne</td>
</tr>
</table>
Ce texte est place a la droite du tableau. Ce texte est place a la droite du tableau. Ce texte est place a la droite du tableau. Ce texte est place a la droite du tableau. Ce texte est place a la droite du tableau. Ce texte est place a la droite du tableau. Ce texte est place a la droite du tableau. Ce texte est place a la droite du tableau.Ce texte est place a la droite du tableau. Ce texte est place a la droite du tableau.

</BODY>
</HTML>

Alignement du contenu des cellules

Les marqueurs <TR>, <TD> et <TH> peuvent contenir un paramètre d'alignement vertical (VALIGN) et un paramètre d'alignement horizontal (ALIGN).

En cas de modification de ALIGN et VALIGN dans <TR>, le nouvel alignement sera l'alignement par défaut dans toute la ligne.
En cas de modification de ALIGN et VALIGN dans <TD> et <TH>, l'alignement s'applique seulement à la cellule.
Valeurs possibles pour ALIGN et VALIGN : ALIGN="CENTER" ; ALIGN="LEFT" ; ALIGN="RIGHT" ; VALIGN="TOP" ; VALIGN="MIDDLE" ; VALIGN="BOTTOM".

"Fusionner" des cellules

Il est parfois utile de "fusionner" des cellules, pour en créer une de largeur plus importante. Pour cela, les marqueurs <TD> et <TH> possèdent deux paramètres COLSPAN et ROWSPAN.

COLSPAN permet de fusionner des cellules sur plusieurs colonnes.
ROWSPAN permet de fusionner des cellules sur plusieurs lignes.

Le plus simple est de commencer par un exemple :

Utilisation de COLSPAN :

<table border> 
    <td colspan=3>Fusion de colonnes sur une meme ligne</td>
</tr>
<tr>
    <td>col 1</td>
    <td>col 2</td>
    <td>col 3</td>
</tr>
</table>

Utilisation de ROWSPAN :

<table border>
<tr>
    
    <th rowspan=3>Fusion de lignes sur une meme colonne</th>
    <td>element 1 ligne1</td>
    <td>element 2 ligne1</td>
</tr>
<tr>
    <td>element 1 ligne2</td>
    <td>element 2 ligne2</td>
</tr>
<tr>
    <td>element 1 ligne3</td>
    <td>element 2 ligne3</td>
</tr>
</table>

Page d'accueil
Plan du site

Rubriques :

Documentations :

HTML

DHTML

JAVAScripts

WML (WAP)

Liens utiles :

Hébergement

Référencement

Web rémunéré