HTML- les tableaux

Publié le par e-commerce

En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. Les tableaux sont donc très utile pour l'alignement du texte et des images pour une conception graphique plus élaborée.

Les cellules d'un tableau peuvent contenir tous les éléments Html soit :

du texte

des images

des liens

des arrière-plans

des tableaux

Un tableau est composé de lignes (horizontales) et de colonnes (verticales) qui forment les cellules du tableau. Pour créer un tableau, il faut au préalable ouvrir une zone de tableaux avec l'instruction: <TABLE></TABLE>. Les lignes du tableau sont identifiées par l'instruction <TR></TR> et les cellules avec <TD></TD>.

Définition du tableau

<TABLE></TABLE>

Début et fin de tableau

La largeur de la table

<TABLE width=?>
<TABLE width=%>

Début du tableau

Définition d'une ligne

<TR></TR>

Début et fin de ligne

Définition d'une cellule

<TD></TD>

Début et fin de cellule

Bordure de cadre

<TABLE border=?></TABLE>

Bébut du tableau

Titre du tableau

<CAPTION></CAPTION>

Début du tableau

Titre de colonne

<TH> </TH>

Début du tableau

Alignement

ALIGN=LEFT

Aligne à gauche le contenu de la cellule

ALIGN=CENTER

Centre le contenu de la cellule

ALIGN=RIGHT

Aligne à droite le contenu de la cellule

VALIGN=TOP

Aligne le contenu en haut de la cellule

VALIGN=MIDDLE

Aligne le contenu au milieu de la cellule

VALIGN=BOTTOM

Aligne le contenu au bas de la cellule

COLSPAN=n

Constitue une cellule s'étalant sur une largeur de n colonnes

ROWSPAN=n

Constitue une cellule s'étalant sur une hauteur de n colonnes

NOWRAP

Interdit l'agencement automatique du texte dans la cellule

Exemples:

<TABLE>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

<TABLE border=2>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

Il est possible d'ajouter des espaces entre les cellules et à l'intérieur (enrobage) même des cellules. Il est parfois nécessaires de fusionner des cellules sur une même ligne ou sur plusieurs colonnes.

L'espace entre les cellules ou
l'épaisseur des lignes du quadrillage

<TABLE cellspacing=?>

L'enrobage des cellules ou
l'espace entre le bord et le contenu

<TABLE cellpadding=?>

Largeur d'une cellule

<TD width=?> en pixels
<TD width=%> en pourcentage

Fusion de lignes

<TD rowspan=?>

Fusion de colonnes

<TD colspan=?>

Exemples :

<TABLE border=2 cellspacing=10>
<TR><TD>1</TD><TD>2</TD></TR>
<TR><TD>3</TD><TD>4</TD></TR>
</TABLE>

<CENTER><TABLE width=60% border=1>
<TR>
<TD>cellule1</TD>
<TD>cel. 2</TD>
<TD>3</TD>
</TR>
</TABLE></CENTER>

<CENTER><TABLE width=60% border=1>
<TR>
<TD width=33%>cellule1</TD>
<TD width=33%>cel. 2</TD>
<TD width=34%>3</TD>
</TR>

</TABLE></CENTER>

Publié dans l'informatique

Pour être informé des derniers articles, inscrivez vous :

Commenter cet article