Cours de HTML - Les tableaux dans une page Web



Contenu du cours
  • I. Généralités
    1. Introduction
    2. Structure d'un tableau
      1. Introduction

  • II. Les éléments d'un tableau
    1. La balise <table>
    2. La balise <caption>
    3. Les balises <col> et <colgroup>
      1. Introduction
      2. Attributs
      3. Exemples
    4. Structure du contenu
      1. Les balises <thead> et <tfoot>
      2. La balise <tbody>
    5. Les lignes: la balise <tr>
      1. Généralités
      2. Balises <td> et <th>

  • III. Remarques
    1. Cellules vides
    2. Tableaux imbriqués
    3. Des tableaux pour la présentation
    4. Exercice : Formatages de cellules
  • _______________________

    Cette création est mise à disposition par le professeur Gilles Chagnon sous un contrat Creative Commons.

    I. Généralités

    1. Introduction

    Usuellement un tableau est constitué de lignes et de colonnes. Ce n'est pas tout à fait le cas en HTML :

    1. Un tableau est un conteneur <table>

    2. Un tableau est constitué de lignes <tr> (pour table row)

    3. Un tableau est constitué de cellules<td> (pour table data)

    Il est également possible de fournir une légende au tableau. Tous ces éléments se structurent globalement dans un entête, un pied de tableau, et un corps de tableau.

    2. Structure d'un tableau

    a. Introduction

    Un tableau se déclare grâce à la balise <table>. Cette balise peut avoir plusieurs balises-enfants. La plupart sont facultatives, mais si elles sont présentes, elles doivent être utilisées dans cet ordre :

    1. <caption>

    2. <col> ou <colgroup>

    3. <thead>

    4. <tfoot>

    5. <tbody>

    II. Les éléments d'un tableau

    1. La balise <table>

    La notion de table étant complexe, le nombre d'attributs de cette balise est important.

    Attribut

    Effet

    Valeur

    summary

    donne un rapide résumé du contenu du tableau. Cela améliore l'accessbilité de la page.

    une chaîne de caractères

    width

    largeur du tableau

    une longueur, qui peut s'exprimer en nombre de pixels ou en pourcentage de la largeur de la fenêtre du navigateur

    border

    épaisseur de la bordure extérieure

    en pixel (par défaut, 0, sans bordure)

    frame

    (rien à voir avec la balise <frame>, que l'on verra dans le cours sur les cadres). Présence de l'encadrement extérieur

    • void : aucune

    • above : haut seulement

    • below : bas seulement

    • hsides : haut et bas

    • vsides : gauche et droite

    • lhs : gauche seulement

    • rhs : droite seulement

    • box : sur les 4 côtés

    • border : sur les 4 côtés aussi

    rules

    comme l'attribut frame, mais pour l'encadrement intérieur

    • none : aucun

    • groups : seulement entre les groupes de lignes (<thead>, <tbody> et <tfoot>) et les groupes de colonnes (<colgroup> et <col>)

    • rows : entre les lignes

    • cols : entre les colonnes

    • all : partout (valeur par défaut)

    cellspacing

    marge entre cellules consécutives

    en pixels

    cellpadding

    marge entre le bord et le contenu de la cellule

    en pixels

    align

    position du tableau dans la fenêtre. Cet attribut est obsolète en HTML 4.01 strict.

    • center

    • left

    • right

    bgcolor

    couleur de fond du tableau. Cet attribut estobsolète en HTML 4.01 strict.

    nom de couleur ou triplet RGB

    Table 1. Attributs de la balise <table>.

    Certains de ces attributs sont liés ; ainsi si border="0", alors frame="void" et rules="none".

    Par défaut la taille du tableau s'ajuste à son contenu. C'est cette gestion particulière de la taille qui fait du tableau un moyen très utile de présentation.

    2. La balise <caption>

    Cette balise est facultative, et ne peut être présente qu'une seule fois dans le tableau. Son rôle est de lui donner une légende, plus complète que le court résumé de l'attribut summary.

    Elle possède un attribut align, qui gère son alignement relativement au tableau. Cet attribut est obsolète en HTML 4.01 strict.

    Exemple d'utilisation :

    <caption>Légende du tableau.</caption>

    3. Les balises <col> et <colgroup>

    a. Introduction

    Le rôle fondamental de ces balises est de définir des groupements de colonnes. <colgroup> le fait de manière plus "structurelle".

    1. <col> permet à plusieurs colonnes de partager les mêmes attributs. C'est un élément vide.

    2. <colgroup> permet de regrouper un ensemble de colonnes en une seule unité logique, et d'appliquer par exemple un style à cet ensemble de colonnes.

    b. Attributs

    Attribut

    Effet

    Valeur(s)

    span

    Nombre de colonnes à regrouper

    un nombre

    width

    Largeur de chaque colonne

    une longueur, qui peut s'exprimer en nombre de pixels, en pourcentage, ou bien par exemple width="0.5*", en proportion relative

    valign

    alignement vertical

    • top : alignement en haut de la cellule

    • middle : alignement au milieu de la cellule (valeur par défaut)

    • bottom : alignement en bas de la cellule

    • baseline : alignement sur la ligne du bas dela cellule

    align

    alignement horizontal

    • left (valeur par défaut)

    • right

    • center

    • justify

    • char : l'alignement se fait sur un caractère particulier

    char

    spécifie quel caractère doit servir de base pour l'alignement

    un caractère. La valeur par défaut est celle du séparateur décimal défini par l'attribut de langage lang, à savoir le "." pour la langue par défaut, et le "," si l'attribut définit le français comme langue (lang="fr"). Il n'est pas demandé aux navigateurs de supporter cet attribut.

    charoff

    spécifie le décalage en position horizontale imposé aucaractère d'alignement.

    un nombre.

    Table 2. Attributs communs à <col> et <colgroup>.

    c. Exemples

    Par exemple, si on doit spécifier que quarante colonnes dans un tableau doivent être alignés à droite, au lieu d'écrire...

    <colgroup>
      <col width="20">
      <col width="20">
    ... 40 éléments au total... </colgroup>

    ... on peut se contenter d'écrire...

    <colgroup span="40" width="20"></colgroup>

    Quand il est nécessaire d'identifier une unique colonne sur ces quarante, par exemple la dernière, on peut regrouper sous la forme...

    <colgroup width="20">
      <col span="39"></col>
      <col valign="top"></col>
    </colgroup>

    4. Structure du contenu

    a. Les balises <thead> et <tfoot>

    Le rôle de ces balises est de contenir les informations nécessaires à l'entête et au bas du tableau. Il s'agit essentiellement des titres de colonnes. Ces balises contiennent des lignes (voir le paragraphe consacré à la balise <tr> pour plus de détails). Il est possible, pour peu que l'on ait déclaré la balise <thead> (respectivement <tfoot>), de dupliquer l'entête (respectivement le bas) d'un tableau en cas de saut de page.

    Les attributs de ces balises sont les attributs d'alignement des cellules (valign, align, char et charoff).

    b. La balise <tbody>

    Son rôle est de définir le corps même d'un tableau. En dupliquant plusieurs <tbody> au sein d'un même tableau, on peut définir plusieurs composantes structurelles d'apparences et de formats différents.

    Les attributs de cette balise sont les attributs d'alignement des cellules (valign, align, char et charoff).

    5. Les lignes: la balise <tr>

    a. Généralités

    Les attributs de cette balise sont les attributs d'alignement des cellules (valign, align, char et charoff), ainsi que l'attribut bgcolor, dont la fonction est de spécifier la couleur de fond de la ligne. Mais ce dernier attribut est obsolète en HTML 4.01 Strict.

    Cette balise permet de définir une ligne dans le tableau. Elle peut contenir une ou plusieurs balises <th> ou <td>.

    b. Balises <td> et <th>

    Ces balises acceptent les mêmes contenus, ainsi que les mêmes attributs. Cependant, <th> doit être utilisé pour indiquer des cellules destinées à être des entêtes de colonnes (Table Header).

    Ces balises peuvent contenir à peu près tous les types d'éléments, y compris les <div> et les <p>.

    Attribut

    Effet

    Valeur(s)

    abbr

    fournit un abrégé du contenu de la cellule

    une chaîne de caractères

    axis

    indique à quelle catégorie appartient la cellule (voir sur le site du W3C pour plus d'informations sur l'utilisation de cet attribut dans la structuration du contenu d'un tableau).

    une chaîne de caractères

    headers

    renvoi à(aux) l'identifiant(s) de la cellule "header" associée. Cela permet à un agent vocal de présenter le type de contenu de la cellule avant le contenu proprement dit.

    une liste d'indentifiants (séparés par des espaces)

    scope

    indique quel est le jeu de cellules auquel la cellule "header" courante s'applique

    • row : s'applique à la ligne courante

    • col : s'applique à la colonne courante

    • rowgroup : s'applique à l'ensemble du <thead>, <tfoot> ou <tbody> courant

    • colgroup : s'applique au groupe de colonnes courant (spécifié par les balises <colgroup> ou <col>)

    rowspan

    nombre de lignes concernées par la balise courante.

    un nombre. La valeur par défaut est 1. Si rowspan="0", la cellule s'applique à l'ensemble des lignes, depuis la ligne courante jusqu'à la dernière dans le <thead>, <tfoot> ou <tbody> courant.

    colspan

    nombre de colonnes concernées par la cellule courante.

    un nombre. La valeur par défaut est 1. Si rowspan="0", la cellule s'applique à l'ensemble des colonnes, depuis la ligne courante jusqu'à la dernière du <colgroup>.

    align

    alignement horizontal

    • left (valeur par défaut)

    • right

    • center

    • justify

    • char : l'alignement se fait sur un caractère particulier

    char

    spécifie quel caractère doit servir de base pour l'alignement

    un caractère. La valeur par défaut est celle du séparateur décimal défini par l'attribut de langage attr, à savoir le "." pour la langue par défaut, et le "," si l'attribut définit le français comme langue (attr="fr"). Il n'est pas demandé aux navigateurs de supporter cet attribut.

    charoff

    spécifie le décalage en position horizontale imposé au caractère d'alignement.

    un nombre.

    valign

    alignement vertical

    • top : alignement en haut de la cellule

    • middle : alignement au milieu de la cellule (valeur par défaut)

    • bottom : alignement en bas de la cellule

    • baseline : alignement sur la ligne du bas de la cellule

    nowrap

    empêche le retour à la ligne automatique dans les cellules quand le bord de la fenêtre du navigateur est atteint. Obsolète en HTML 4.01 strict.

    valeur unique : nowrap

    bgcolor

    couleur de fond de la cellule. Cet attribut est obsolète en HTML 4.01 strict.

    nom de couleur ou triplet RGB

    width

    largeur de la cellule. Cet attribut est obsolète en HTML 4.01 strict.

    nombre de pixels ou pourcentage

    height

    hauteur de la cellule. Cet attribut est obsolète en HTML 4.01 strict.

    nombre de pixels ou pourcentage

    Table 3. Attributs des balises <th> et <td>.

    III. Remarques

    1. Cellules vides

    Si le nombre de cellules est différent d'une ligne à l'autre, les derniers emplacements sont vides. Par ailleurs, un conteneur vide <td></td> crée un emplacement vide alors qu'un conteneur contenant un espace insécable &#160; crée une cellule vide.

    2. Tableaux imbriqués

    Un tableau peut en contenir un autre qui peut en contenir un autre qui... Il n'y a pas de limitation.

    3. Des tableaux pour la présentation

    Créés au départ pour présenter des tables de données, les tableaux sont très vite devenus un moyen efficace de présentation claire et ordonnée. Ils permettent, par exemple, de faire de manière souple du multicolonne. De nombreux sites les utilisent, comme...

    Néanmoins, les performances des navigateurs les plus récents dans le support des feuilles de style rendent cette utilisation des tableaux obsolète ; il vaut mieux maintenant lui préférer ue mise en page à base d'éléments div.




    Conditions d'utilisation et licence

    Creative Commons License
    Cette création est mise à disposition par Gilles Chagnon sous un contrat Creative Commons.


    Source : www.gchagnon.fr/cours/html/index.html