Caractéristiques d'un tableau

 

accueil (cours internet)

 

Principaux éléments

remarques

exemples

résumé du tableau

pour aider à la compréhension du tableau sur les navigateurs non-graphiques

 

<table summary="En 10 ans les ventes ----" >

légende

<caption>légende</caption>

en-tête <thead> <tr> <th>entête col1</th> <th>entête col2</th> </tr> </thead>
corps du tableau <tbody><tr>...</tr></tbody>
pied du tableau <tfoot><tr>...</tr></tfoot>

 

Caractéristiques générales

remarques

exemples

largeur du tableau

s'exprime en % de la largeur de page ou en pixels

<table width ="80%">
<table width ="450">

alignement sur la page

 

<table align= "center">

nombre de lignes

déterminé par le nombre de balises <tr>


nombre de colonnes

déterminé par le nombre de balises <td> par ligne.


disposition des colonnes

rarement utilisé

alignement horizontal : align=left, right, center

alignement vertical : valign= middle (par défaut),top, bottom, baseline

<table>
<colgroup span=1 align="right" width="75">
<colgroup span=5 align="center">
<tr>...

le 1er colgroup s'applique à la 1e col., le 2e aux 5 suivantes...

 

Espacement et bordures

remarques

exemples

marge intérieure à la cellule

écart entre le contenu et les bords, s'exprime en pixels

<table cellpadding="10">

espace entre les cellules

s'exprime en pixels

<table cellspacing="5">

taille de la bordure

détermine l'épaisseur du quadrillage en pixels

<table border="1">

arrière-plan

couleur ou image

<table bgcolor ="#CCFFCC">

<table background ="../images/sable.gif">

 

Caractéristiques d'une ligne

(l'emportent sur celles du tableau)

remarques

exemples

alignement horizontal du texte dans la ligne

center (par défaut), left, ou right

<tr align="right">

alignement vertical du texte middle (par défaut),top, bottom, baseline

<tr valign="top">

arrière-plan

couleur ou image (masque l'arrière plan du tableau sur la ligne concernée)

<tr bgcolor="#FFFF66">

<tr background ="../images/ciel.gif">

hauteur minimale

en pixels

<tr height="27">

 

Caractéristiques d'une cellule

(l'emportent sur celles de la ligne et du tableau)

remarques

exemples

alignement horizontal du texte dans la ligne

center (par défaut), left, ou right

<td align="right">

alignement vertical du texte

middle (par défaut),top, bottom, baseline

<td valign="top">

arrière-plan

couleur ou image (masque l'arrière plan du tableau ou de la ligne sur la cellule concernée)

<td bgcolor="#FFFFFF">

<td background ="../images/nuage.gif">

étendue (cellules fusionnées)

nb de lignes ou de collonnes sur lesquelles s'étend la cellule

<td colspan="2">

<td rowspan="3">

 

Fioritures...

Peu de navigateurs savent les interpréter, préférer l'utilisation des feuilles de style.

couleur des bordures

<table bordercolorlight="#CCCCCC" bordercolordark="#999999 ...

<td bordercolor= "#FF9999" ...

affichage du cadre

détermine le contour du tableau

<table frame =" " ...
void (pas de contour) ; above (en haut) ; below (en bas) ; hsides (haut et bas) ; lhs (à gauche) ; rhs (à droite) ; vsides (droite et gauche) ; box ; border

séparation des cellules

 

<table rule=" " ...
none (pas de quadrillage) ; all (quadrillage) ; rows (séparation des lignes) ; groups (séparation des groupes de cellules : thead, tbody, tfoot, colgroup)

 

 

Eric
Pichon

retour haut de pageaccueil (cours internet)