NAVIGATION

Page précédente

Page suivante 

Page d'accueil

Définition:

En Html, les tableaux servent non seulement à aligner des chiffres mais surtout à placer des éléments à l'emplacement que vous souhaitez. L'usage des tableaux est donc  fréquent.

Un tableau est composé de lignes et de colonnes qui forment les cellules du tableau


 
Balises de base des Tableaux :

Définition du tableau [Table] <TABLE></TABLE> Début et fin de tableau
Définition d'une ligne [Table Row] <TR></TR>
Début et fin de ligne
Définition d'une cellule
[Table Data] <TD></TD>
Début et fin de cellule



Explications


1) - Tableau SANS bordure:

Un tableau à
deux lignes et deux colonnes donne   quatre cellules
.

        Syntaxe et Exemple:

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


2) Tableaux AVEC bordures:

        La Syntaxe est :

Bordure de cadre

[Border]

<TABLE border=?></TABLE>

 

Exemple de tableaux avec bordure:

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

 

Il y a encore trois éléments définis par défaut mais modifiables :

1 - L'espace entre les cellules ou
l'épaisseur des lignes du quadrillage
<TABLE CELLSPACING=?>
2 - L'enrobage des cellules ou
l'espace entre le bord et le contenu
<TABLE CELLPADDING=?>
3 - La largeur de la table <TABLE WIDTH=?>
<TABLE
WIDTH=%>


Exemples:

 1- Espacement entre les Cellules (épaisseur des lignes du quadrillage)

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

 

 2 - Espace entre le bord et le contenu ( enrobage des cellules )

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

LES CELLULES

Contenu des Cellules.

 Balises des Cellules Cellules Horizontales
Cellules Verticales Cellules ordonnées retour aux Tableaux

 

 A présent passons à l'étude des CELLULES des Tableaux que nous venons de voir:

1 - Contenu des Cellules:
Auparavant sachez que  les cellules peuvent contenir  les éléments Html suivants :
du texte
des images
des liens
des arrière-plans
des tableaux 
 Bien que l'allure du tableau ait été  déterminée, chaque cellule reste  un petit univers à part qui a ses propres spécifications. 


2 - Etude des balises :

Voyons les balises correspondantes:

Largeur d'une cellule <TD width=?> en pixels
<TD width=%> en pourcentage
Fusion de lignes <TD rowspan=?>
Fusion de colonnes
<TD colspan=?>

 

Exemples:

Réalisons  un tableau centré occupant  60% de la fenêtre avec sur une ligne, trois colonnes égales. 

Écrivons  ceci :

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

Ce n'est pas très présentable... 

Essayons à présent avec  la balise de largeur de la cellule?

<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>

C'est meilleur ... 

Reprenons ce  même tableau  avec
DEUX  lignes.

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



A présent nous allons faire en sorte que  la première ligne prenne toute la largeur de la ligne. ...

Ce qui signifie que la première cellule devra  déborder sur les 3 cellules horizontales:

Écrivons:

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






Voyons maintenant  le cas où  la première colonne occupe   toute la hauteur de la colonne. 

La première cellule devra par conséquent déborder  sur 2 cellules verticales:

Écrivons:

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

 

Il nous faut  à présent ordonner nos cellules:

Ligne de tableau <TR align=left/center/right>
<TR valign=
top/middle/bottom>
horizontalement
verticalement

Cellule de tableau <TD align=left/center/right>
<TD valign=
top/middle/bottom>
horizontalement
verticalement

Reprenons le tableau suivant :

Avec quelques modifications , il se transforme comme suit:

<CENTER><TABLE width=60% border=1>
<TR>
<TD colspan=3
align=center>Tarif au ../../..</TD>
</TR>
<TR>
<TD width=33% >Article 1</TD><TD width=33%>Ref 002 </TD>
<TD width=34%
align=right>30fr</TD>
</TR>
</TABLE></CENTER>

 

Pour finir, sachez qu'on peut aussi   de changer la couleur de la cellule.

Couleur de la cellule <TD BGCOLOR="#$$$$$$">

notre dernier exemple pourrait devenir :
<TD colspan=3 align=center bgcolor="#0000FF">

Accueil

Précédent Suivant Tableaux

  Cellules

 
Google