FA_408_tableaux html

FICHE
NUMÉRO
Comment définir une colonne dans un
tableau HTML ?
LES TABLEAUX EN HTML
La balise <td> (td = table data = donnée du tableau) définit une colonne (une cellule)
du tableau. De ce fait, sont placés entre les balises d’ouverture et de fermeture,
l’ensemble du contenu à afficher et les balises de mise en forme de ce contenu.
Aucun attribut de la balise <td> n’est obligatoire.
Attribut
align
Valeurs possibles
Description
center, left, right
Définit l’alignement des contenus
présents dans la cellule du tableau
408
J
’ai un problème avec la mise en page de mes pages
HTML. Lorsque je fais varier la dimension de la fenêtre
du navigateur, les éléments présents dans ma page Web se
déplacent. Ils ne sont pas fixés ! La solution ? Les tableaux !
TECHNIQUE
HTML
Exemple : <td align="center">…</td>
background
Définit l’adresse de l’image à afficher
en fond de la cellule
URL
Exemple : <td background="imagefond.extension">…</td>
bgcolor
hexadécimal (#000000) ou
nom de la couleur (black)
Définit la couleur du fond de la cellule
colspan
Définit la fusion du nombre de colonnes
sur lesquelles s’étend la cellule
nombre
Exemple : <td colspan="2">…</td>
rowspan
Définit la fusion du nombre de lignes
sur lesquelles s’étend la cellule
nombre
Exemple : <td rowspan="4">…</td>
valign
top, bottom, middle
Définit l’alignement vertical du
contenu de chaque cellule de la ligne
Exemple : <tr valign="bottom">…</tr>
width
nombre de pixels ou
pourcentage
Définit la largeur de la cellule
Exemple : <td width="100">…</td>
Altéa Conseils © 2004
Les tableaux en HTML
http://pbc.alteaconseils.com
© ALTEA CONSEILS • http://pbc.alteaconseils.com • Reproduction limitée dans le cadre de Pau Broadband Country
Exemple : <td bgcolor="#00FF00">…</td>
Pourquoi utiliser les tableaux en mise en
page des fichiers HTML ?
L’utilisation des tableaux lors de la mise en page des fichiers HTML permet au
développeur de maîtriser au mieux l’intégration des différents éléments de la page
Web. De ce fait, la mise en page devient indépendante des dimensions de la fenêtre du
navigateur.
S’il utilise les tableaux, le développeur devra prévoir de se caler sur une résolution
d’écran. La plus courante est 800 x 600 pixels. Il choisira alors une largeur de tableau
qui sera au maximum de 800 pixels.
De ce fait, la définition de la largeur et de la hauteur devra impérativement s’effectuer
en nombre de pixels et non en pourcentage par rapport à la largeur ou la hauteur totale
de la fenêtre du navigateur.
Altéa Conseils © 2004
Les tableaux en HTML
http://pbc.alteaconseils.com
Comment s’organise la définition d’un
tableau au sein d’une page HTML ?
En HTML, un tableau est un cadre présentant une suite de lignes.
La définition d’un tableau au sein d’une page HTML oblige à définir dans un premier
temps le cadre du tableau, puis ses lignes, puis ses colonnes.
Comment créer un tableau en HTML ?
La balise <table> (table = table = tableau) permet l’insertion d’un tableau. Surtout, elle
définit le cadre de ce tableau. De ce fait, sont placées entre les balises d’ouverture et
de fermeture, toutes les balises qui permettent l’organisation des lignes et des colonnes
du tableau.
Aucun attribut de la balise <table> n’est obligatoire.
Attribut
align
Valeurs possibles
Description
center, left, right
Définit l’alignement du tableau par
rapport à l’ensemble de la page Web
Ex : <table align="center">…</table>
background
Définit l’adresse de l’image à afficher
en fond du tableau
URL
Ex : <table background="imagefond.extension">…</table>
bgcolor
hexadécimal (#000000) ou
nom de la couleur (black)
Définit la couleur du fond du tableau
Ex : <table bgcolor="#FFFF00">…</table>
border
nombre de pixels
Définit le nombre de pixels des
bordures du tableau et de ses
cellules
Attribut
width
nombre de pixels
Définit l’espace entre le bord des
cellules de leur contenu
hspace
nombre de pixels
Définit l’espace qui sépare les
cellules du tableau
vspace
nombre de pixels ou
pourcentage
Définit la hauteur de l’ensemble du
tableau
Ex : <table height="75%">…</table>
Altéa Conseils © 2004
Les tableaux en HTML
http://pbc.alteaconseils.com
Définit la largeur de l’ensemble du
tableau
nombre de pixels
Définit le nombre de pixels libres à
droite et à gauche du tableau
nombre de pixels
Définit le nombre de pixels libres audessus et en-dessous du tableau
Ex : <table vspace="2">…</table>
Remarque : D’autres attributs de la balise <table> permettent la gestion de
l’affichage des bordures et du quadrillage (ex : bordure à gauche seulement).
Comme ces effets sont désormais gérés principalement avec les feuilles de style
ces attributs sont dits «depreciated», c’est-à-dire obsolètes.
Comment définir une ligne dans un tableau
HTML ?
La balise <tr> (tr = table row = ligne du tableau) définit une ligne du tableau. En effet, un
tableau HTML se construit ligne par ligne. De ce fait, sont placées entre <tr> et </tr>,
toutes les balises qui permettent l’organisation des colonnes (ou cellules) du tableau.
Aucun attribut de la balise <tr> n’est obligatoire.
Attribut
align
Valeurs possibles
Description
center, left, right
Définit l’alignement des contenus
présents dans les cellules de la
ligne tableau
Ex : <tr align="right">…</tr>
bgcolor
hexadécimal (#000000) ou
nom de la couleur (black)
Définit la couleur du fond de la ligne
Ex : <tr bgcolor="blue">…</tr>
valign
Ex : <table cellspacing="1">…</table>
height
nombre de pixels ou
pourcentage
Ex : <table hspace="5">…</table>
Ex : <table cellpadding="5">…</table>
cellspacing
Description
Ex : <table width="800">…</table>
Ex : <table border="2">…</table>
cellpadding
Valeurs possibles
top, bottom, middle
Définit l’alignement vertical du
contenu de chaque cellule de la ligne
Ex : <tr valign="bottom">…</tr>
height
Définit la hauteur de la ligne en
nombre de pixels
nombre
Ex : <tr height="25">…</tr>
Altéa Conseils © 2004
Les tableaux en HTML
http://pbc.alteaconseils.com