RETOUR SOMMAIRE

La balise <table> est un conteneur très utilisé qui facilite et permet une meilleure mise en page par un découpage en lignes et cellules entièrement paramétables.

Sites à consulter pour compléter les données ci-dessous:
site traitant html

Création des tableaux
Dans la balise <table>, l'utilisation des balises <tr> et <td> est indispensable. D'autres balises peuvent être employées pour compléter ou structurer le tableau et qui sont dans l'ordre d'utilisation:

<table> (balise définissant au navigateur la création d'un tableau)
    <caption> (balise de titre)
    <colgroup>
        <col>
    <thead>
        <tr> (balise définissant le début d'une ligne)
            <th> (balise servant à la définission des cellules de titre des colonnes ou des lignes)
    <tbody>
        <tr>
            <td> (pour les cellules normales. A l'intérieur de ces cellules, on pourra saisir du texte, insérer des images, des formulaires, des listes ou d'autres tableaux)
    <tfoot>
        <tr>
            <td>
Note: pour définir une police de caractères pour le tableau, on est obligé de la définir pour chaque cellule même si elle est identique.

Attributs de la balise <table>

• Attributs spécifiques:
  - cellpadding : espace entre contenu d'une cellule et ses bords (en pixels).
  - cellspacing : espacement entre chaque cellule (en pixels).
  - cols : spécifie le nombre de colonnes du tableau et aide la navigateur à l'afficher plus rapidement (le navigateur n'a alors plus à compter le nombre de <td> et ce, à condition que la valeur de cols corresponde au nbre de <td>).
  - frame : emplacement de la bordure extérieure du tableau (uniquement pour I Explorer). Valeurs de frame: above bordure en haut, below bordure en bas, box bordure sur les 4 côtés, hsides bordure en haut et en bas, Ihs bordure à gauche, rhs bordure à droite, void aucune bordure (par défaut), vsides bordure à gauche et à droite, border.
  - rules : définit les bordures intérieures du tableau (uniquement pour I Explorer). Valeurs de rules: all entre les lignes et les colonnes, cols entre les colonnes, none aucune bordure (par défaut), rows entre les lignes.
  - bordercolor : couleur des bordures du tableau, supprime l'effet 3D.
  - bordercolordark : spécifie l'effet 3D. Place la couleur sombre sur le côté droit et inférieur des cellules d'une rangée.
  - bordercolorlight : agit inversement.
• Autres attributs
  - align : définit l'alignement horizontal du tableau sur la page. 3 valeurs: left pour le placer à gauche (par défault), center pour le centrer, right pour le mettre à droite.
  - bgcolor : couleur d'arrière plan.
  - border : permet de contrôler la taille du cadre entourant chaque cellule et le tableau en pixels. La valeur 0 affiche un tableau sans cadre.
  - width : largeur du tableau (en pixels ou en %).

Attributs de la balise <caption> :

Reprendre ce paragraphe - valign et align. Valeurs
- top : titre centré placé en haut du tableau (par défaut).
- bottom : titre centré placé en dessous du tableau.
- left : titre à gauche, au dessus du tableau.
- right : titre à droite, au dessus du tableau.

Attributs de la balise <tr> :

- align : définit l'alignement horizontal à l'intérieur des cellules d'une même ligne. Valeurs de align: left à gauche (par défaut), center, right.
- bgcolor : pour définir la couleur des cellules d'une même ligne.
- valign : spécifie l'alignement vertical à l'intérieur des cellules d'une même ligne. Valeurs de valign: top alignement en haut, middle alignement au centre, bottom alignement en bas.

Attributs des balises <th> et <td> :

- align : définit l'alignement horizontal à l'intérieur d'une cellule. Valeurs de align: left à gauche , center, right.
- bgcolor : couleur d'arrière plan d'une cellule.
- colspan : permet de grouper des colonnes. Sa valeur est égale au nombre de colonnes à regrouper.
- rowspan : permet de grouper des lignes. Sa valeur est égale au nombre de lignes à regrouper.
- height : hauteur de la cellule (en pixels). Toutes les cellules d'une même ligne prennent la hauteur de la plus grande.
- nowrap : précise qu'il ne doit pas y avoir de rupture de ligne. Attribut booleen (pas de valeur, sa présence suffit).
- valign : spécifie l'alignement vertical à l'intérieur d'une cellule. Valeurs de valign: top en haut, middle au centre, bottom en bas.
- width : largeur d'une cellule (en pixels ou %).Toutes les cellules d'une même colonne prennent la largeur de la plus grande.

Quelques applications

Tableau 1

<table bgcolor="#F0FFFF" border=10 bordercolor=blue cellpadding=10 cellspacing=5> <caption>Titre du tableau</caption> <tr bgcolor="#5F9EA0"> <th>1ère colonne</th><th>2ème colonne</th><th>3ème colonne</th></tr> <tr align=center> <td rowspan=2>A</td><td colspan=2>B</td></tr> <tr><td>E</td><td>F</td></tr> </table>

Titre du tableau 1ère colonne 2ème colonne 3ème colonne A B E F

Bouton

<table border=10 bgcolor="#00FF00"> <tr> <th>annuler</th> </tr> </table>

annuler

Tableau 2

<table border=2 frame=hsides rules=cols> <tr><th>Ligne 1</th><td>cellule 1</td><td>cellule 2</td></tr> <tr><th>Ligne 2</th><td>cellule 1</td><td>cellule 2</td></tr> </table>

Ligne 1 cellule 1 cellule 2 Ligne 2 cellule 1 cellule 2

Tableau 3

<table bgcolor="#F5F5DC" border cellspacing="0"> <tr> <td><table BORDER=5><tr><td>INTERNET</td></tr></table></td> <td>&nbsp;site ftp&nbsp;&#166;&nbsp;guide html&nbsp;&#166;&nbsp;scripts&nbsp;</td> </tr> </table>

INTERNET site ftp ¦ guide html ¦ scripts

RETOUR SOMMAIRE