Tableaux

Les tableaux HTML permettent de présenter l'information, quantitative ou qualitative, sous la forme d'une grille régulière en y ajoutant des intitulés de colonnes ou bien de lignes.

De par leur nature régulière, les tableaux ont souvent été utilisés pour effectuer de la mise en page d'éléments de formulaire, d'images, etc. Cette utilisation contre-nature des tableaux est fortement déconseillée.

Éléments HTML

table

Environnement de type tableau.

tr

Ligne d'un tableau. Un tableau HTML est composé d'une succession de lignes.

td

Cellule d'un tableau. Chaque ligne d'un tableau est composée d'une succession de cellules. Des cellules voisines peuvent être fusionnées.

rowspan
La valeur de cet attribut précise le nombre de cellules à fusionner sur la verticale (dans le sens des lignes) depuis la cellule courante.
colspan
La valeur de cet attribut précise le nombre de cellules à fusionner sur l'horizontale (dans le sens des colonnes) depuis la cellule courante.

th

Cellule d'entête d'un tableau. Elle sert d'intitulé à une colonne ou à une ligne.

scope
La valeur de cet attribut permet d'indiquer si la cellule d'entête est un intitulé de colonne (col) ou de ligne (row)

L'exemple ci-dessous illustre la syntaxe d'un tableau HTML simple composé de quatre lignes dont la première est issue de la fusion de quatre colonnes.

<table>
  <tr>
    <td colspan="4">Menu</td>
  </tr>
  <tr>
    <th scope="row">Sandwiches</th>
    <td>The Big Uno</td>
    <td>Sweet Chili Fiesta</td>
    <td>The Ultimate Supreme</td>
  </tr>
  <tr>
    <th scope="row">Cold drinks</th>
    <td>Coca-Cola</td>
    <td>Fanta Orange</td>
    <td>Sprite</td>
  </tr>
  <tr>
    <th scope="row">Hot drinks</th>
    <td>Espresso</td>
    <td>Toffee Latte</td>
    <td>Cappuccino</td>
  </tr>
</table>
Menu
Sandwiches The Big Uno Sweet Chili Fiesta The Ultimate Supreme
Cold drinks Coca-Cola Fanta Orange Sprite
Hot drinks Espresso Toffee Latte Cappuccino

Il est possible, avec des tableaux de grande taille ou de structure complexe, d'utiliser des éléments HTML supplémentaires afin de distinguer l'entête (thead), le corps (tbody) et le pied de page (tfoot) d'un tableau. L'exemple ci-dessous illustre l'utilisation de ces trois nouveaux éléments.

<table>
  <thead>
    <tr>
      <th colspan="4">Facture détaillée</th>
    </tr>
    <tr>
      <th scope="col">Désignation</th>
      <th scope="col">Prix unitaire</th>
      <th scope="col">Quantité</th>
      <th scope="col">Prix</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Compresseur extra-luminique</td>
      <td>2 579 €</td>
      <td>1</td>
      <td>2 579 €</td>
    </tr>
    <tr>
      <td>Module de déphasage quantique</td>
      <td>479 €</td>
      <td>2</td>
      <td>958 €</td>
    </tr>
    <tr>
      <td>Bouclier anti-gravitationnel</td>
      <td>4 299 €</td>
      <td>1</td>
      <td>4 299 €</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <th scope="row" colspan="3">Total</th>
      <td>7 836 €</td>
    </tr>
  </tfoot>
</table>
Facture détaillée
Désignation Prix unitaire Quantité Prix
Compresseur extra-luminique 2 579 € 1 2 579 €
Module de déphasage quantique 479 € 2 958 €
Bouclier anti-gravitationnel 4 299 € 1 4 299 €
Total 7 836 €

Propriétés CSS

border-width

Épaisseur du bord. Cette valeur peut être exprimée en unités absolues ou relatives.

border-style

Type de trait utilisé pour le bord.

solid              
double              
dashed              
dotted              

border-color

Couleur du bord. Sa valeur peut être exprimée à l'aide d'une des quatre manières décrites dans le chapitre Couleur.

La propriété border permet de spécifier l'épaisseur, le type de trait et la couleur du bord en une seule ligne. Les extraits de code CSS ci-dessous sont équivalents.

td {
  border-width: 4px;
  border-style: dashed;
  border-color: yellow;
}
td {
  border: 4px dashed yellow;
}

Enfin, pour définir un bord différent pour chaque coté de la boite d'un élément, on peut utiliser les propriétés border-top, border-right, border-bottom et border-left.

border-collapse

Cette propriété s'applique à l'élément table et permet de préciser la position relative des bords de deux cellules adjacentes. Les bords peuvent être superposés (collapse) ou séparés (separate).

border-spacing

Si les bords de deux cellules adjacentes sont séparés, cette propriété permet de définir la distance entre ces deux bords.

vertical-align

Cette propriété permet de définir l'alignement vertical du texte à l'intérieur d'une cellule. Les valeurs autorisées sont (entre autres) top, middle et bottom.

Exercice 13

À l'aide des éléments HTML et des propriétés CSS liés aux tableaux, convertissez le fichier planetes.csv afin d'obtenir le résultat ci-dessous :

Système solaire

Correction

Exercice 14

À l'aide des éléments HTML et des propriétés CSS liés aux tableaux, reproduisez l'exemple ci-dessous :

Tetris

Correction