INFORMATIQUE

HTML permet de réaliser des tableaux . Un tableau est un ensemble composé de cellules structurées en lignes et en colonnes avec réglage de l'encadrement, de la taille et de l'espacement des cellules, chaque cellule peut contenir du texte, des images ... . Les différentes instructions de base pour déclarer un tableau sont:

<TABLE> et </TABLE> :  permet d'introduire le tableau dans le document; entre les deux balises de début et de fin ,on définira les lignes et les cellules.
<CAPTION> et </CAPTION>: permet de placer une légende au-dessus d'un tableau par défaut (ou si l'attribut align a la valeur top) ou de la positionner au-dessous d'un tableau si l'attribut align a la valeur bottom.

  <TR> et </TR> : (table row) Balises pour définir chacune des lignes du tableau.
<TD> et </TD> : (table data) Balises utilisées pour définir une cellule de données (le texte est centré verticalement dans la cellule).
<TH> et </TH> : (table header) Balises utilisées pour définir une cellule de titre. Le contenu d'une telle cellule apparaît en gras et centré horizontalement dans la cellule, ce type de cellule est normalement utilisé pour donner un titre à chaque ligne et à chaque colonne.

Exemple d'un tableau de 2 lignes de 3 cellules

<TABLE>
<CAPTION> Exemple de Tableau </CAPTION>
<TR><TD> cellule 1 </TD><TD> cellule 2 </TD><TD> cellule 3 </TD></TR>
<TR><TD> cellule 4 </TD><TD> cellule 5 </TD><TD> cellule 6 </TD></TR>
</TABLE>

Voici le résultat :

Exemple de Tableau

cellule 1	cellule 2	cellule 3
cellule 4	cellule 5	cellule 6

Pour améliorer la présentation du tableau, ils existent d'autres instructions.

La balise <TABLE>

La balise <TABLE> peut contenir un certain nombre d'attribut qui définissent son positionnement, sa taille et son aspect.

Les  différents arguments possibles pour la balise <TABLE> sont les suivants

<table  align=bleedleft|bleedright|center|justify|left|right  border="..."  class="..."  cellspacing="..."  cellpadding="..."  clear=all | left|right"..." dir=ltr|rtl  dp="..."  id="..."  lang="..."  cols=number  colspec="..."  frame=above |below|border|box|hsides|lhs|rhs|void|vsides noflow  rules=all|basic|cols|none|rows units=en|relative|pixels   width="..."></table>

• align= Cet attribut permet de définir l'alignement du tableau  par rapport au marges du document. Les valeurs possibles sont left, right, center et justify

• border= Cet attribut permet de de spécifier la largeur des bordures qui délimitent les cellules du tableau

• cellspacing= Cet attribut permet de définir en pixels l'espace de séparation entre les cellules dans le tableau.

• cellpadding= Cet attribut permet de définir en pixels l'espace de séparation entre le bord des cellules de leur contenu.

• cols= Cet attribut permet de spécifier le nombre total de colonnes de la table

• height= Cet attribut permet de fixer en pixels ou en pourcentage la hauteur du tableau de la zone utilisable (par défaut, c'est 100 %).

• width= Cet attribut permet de fixer en pixels ou en pourcentage la largeur du tableau de la zone utilisable (par défaut, c 'est 100 %).( L'unité standard est le pixel mais ,on peut aussi exprimer ces valeurs en: pt=points, pi=picas, in=inches cm=centimètres mm=millimètres em=em units px=screen pixels).

Les autres attributs de la balise <TABLE>
 

background	Permet de sélectionner une image de fond pour l'ensemble du tableau.
bgcolor	ce paramètre permet de sélectionner la couleur de fond (par défaut) pour les cellules du tableau. Valeurs : nom de couleur ou triplet RGB
bordercolor	Cet attribut permet de Définir la couleur du bord interne de chaque cellule de la rangée.
bordercolorlight	Cet attribut permet de définir la couleur de l'effet 3D appliqué au coin inférieur droit des cellules d'une rangée.
bordercolordark	Cet attribut permet de définir la couleur de l'effet 3D appliqué au coin supérieur gauche des cellules.
cols	Cet attribut permet de définir le nombre total de colonnes de la table et de spécifier la largeur allouée à chacune.
hspace	Cet attribut détermine l'espace qui doit rester libre sur le(s) côté(s) de la table, lié à  ALIGN,
vspace	Cet attribut détermine l'espace qui doit rester libre entre le haut et le bas de la table par rapport au reste du document.

• FRAME : cet attribut permet de spécifier la visibilité des différents bords de la table à condition que BORDER soit définit. Les valeurs possibles sont:

FRAME :  ,		FRAME s'occupe du cadre extérieur d'un tableau.
	FRAME=above	Rendre visible le bord supérieur de la table.
	FRAME=below	Rendre visible le bord inférieur de la table.
	FRAME=hsides	Rendre visible les bords gauches et droits de la table.
	FRAME=box	Rendre visible les quatre bords de la table.
	FRAME=lhs	Rendre visible le bord gauche de la table .
	FRAME=rhs	Rendre visible le bord droit de la table.
	FRAME=vsides	Rendre visible les bords supérieurs et inférieurs de la table.
	FRAME=void	Ne pas rendre visible les bords de la table.

•   RULES : L'attribut RULES permet de définir des options supplémentaires pour dessiner les bords des cellules et de spécifier la présence ou non des barres séparant lignes et colonnes du tableau. Il accepte les valeurs none, basic, rows, cols, all . Rules :

RULES :    ,		Cet attribut permet de définir les options d'affichages des traits de séparations horizontaux et verticaux.
	rules=none	Spécifie la suppression de toutes lignes entre cellules et colonnes
	rules=basic	Spécifie que les lignes horizontales devant l'en-tête, le corps et la fin du tableau sont dessinés
	rules=rows	Spécifie que les lignes horizontales de la table sont dessinés.
	rules=cols	Les bords horizontaux entre toutes les colonnes de la table sont dessinés
	rules=all	Les bords de Toutes les cellules sont visibles.

Les balises <TD> (Table Data ) et <TH> (Table Header)

TD et TH servent à définir des cellules dans une ligne, ils définissent des cellules au sein d'une rangée elle même incluse dans une table

• <TD> ... </TD> : ce couple permet de définir le début et la fin d’une cellule de la ligne en cours.

• <TH> ... </TH> : Ce marqueur "TH" s’utilise comme "TD" mais les caractères sont gras et le contenu des cellules est centré au lieu d'être aligné à gauche.

La balise <TD> peut contenir un certain nombre d'attribut définissant le comportement d'une cellule.

• colspan =x :  x est le nombre de colonnes standard que la  cellule doit couvrir en largeur. 

• rowspan =y :  y est le nombre de lignes standard  que la  cellule doit couvrir en hauteur.

Exemple

<table border="1" width="100%">

<tr><td width="50%">Cellule 1</td><td width="50%">Cellule 2</td></tr>

<tr><th width="50%">Cellule 3</th><th width="50%">Cellule 4</th></tr>

</table>

 

ceci donne 

 

Cellule 1	Cellule 2
Cellule 3	Cellule 4

Les autres attributs de la balise <TD>

abbr	Spécifie un nom abrégé pour une cellule d'en-tête
align	permet de spécifier l'alignement horizontal du contenu de la cellule. Valeurs : Left Center Right
background	Permet de définir une image de fond à une cellule.
bgcolor	Cet attribut permet de définir la couleur de fond de la cellule.
bordercolor	Cet attribut permet de définir la couleur du cadre interne de la cellule
bordercolordark	Permet de définir l'une des deux couleurs utilisées pour créer un effet de bord en 3D.
bordercolorlight	Permet de définir l'une des deux couleurs utilisées pour créer un effet de bord en 3D.
char	Permet de désigner le caractère servant à l'alignement des valeurs numériques
colspan	permet de définir le nombre de colonnes occupées par une cellule .
height	Définit la hauteur de la cellule en pixels.
nowrap	Permet de forcer le browser à afficher le contenu de la cellule sur une seule ligne, au lieu d'insérer automatiquement des retours à la ligne
rowspan	Précise  le nombre de lignes qu’une cellule occupe.
valign	Permet de définir l'alignement vertical du contenu de la cellule. Les valeurs possibles sont: Top Middle Bottom Baseline
width	Ce paramètre permet de définir la largeur de la cellule en pixels ou en pourcentage par rapport à la largeur de la table.