HTML & CSS pour débutants (Partie 07) : Tables (01)

Les tableaux sont des structures assez complexes composées de lignes et de colonnes. Le squelette externe des tableaux est toujours formé de l'élément table.

<table>
…
</table>

À l'intérieur de cet élément se fait la définition réelle du tableau. Il est d'ailleurs recommandé, lors de la création d'un tableau en HTML, de lui attribuer une bordure. Cela permet de mieux visualiser comment les lignes et les colonnes se répartissent. Pour cela, on assigne à l'élément d'ouverture de <table> la combinaison attribut-valeur border="1". (Notez que l'attribut border ne doit pas être utilisé en HTML. Il est préférable d'utiliser les propriétés CSS correspondantes. Mais nous y reviendrons plus tard).

<table border="1">
…
</table>

Poursuivons avec la définition des lignes de tableau. Cela se fait à l'aide de l'élément tr.

<table border="1">
   <tr></tr>
</table>

Cependant, cela ne mène pas encore au rendu souhaité. Ensuite, il faut définir les colonnes. Cela se fait de nouveau à travers l'élément td.

<table border="1">
   <tr>
      <td></td>
   </tr>
</table>

Vous pouvez maintenant définir le contenu de la première cellule du tableau. Cela se fait entre les balises <td> et </td>.

<table border="1">
   <tr>
      <td>Contenu 1</td>
   </tr>
</table>

Il est maintenant temps de jeter un œil au résultat dans le navigateur.

Ce n'est certainement pas encore très spectaculaire, puisque le tableau ne se compose actuellement que d'une seule cellule. Vous pouvez maintenant ajouter une autre colonne. Cela se fait à nouveau avec l'élément td. Assurez-vous de le définir à l'intérieur de l'élément tr.

<table border="1">
   <tr>
      <td>Contenu 1</td>
      <td>Contenu 2</td>
   </tr>
</table>

Encore une fois, jetez un coup d'œil au résultat ici.

Pour ajouter des lignes supplémentaires au tableau, il suffit de créer un autre élément tr où les éléments td souhaités seront à nouveau définis.

Voici un exemple:

<table border="1">
   <tr>
      <td>Contenu 1</td>
      <td>Contenu 2</td>
   </tr>
   <tr>
      <td>Contenu 3</td>
      <td>Contenu 4</td>
   </tr>
</table>

Un aperçu du résultat dans le navigateur donne ceci:





De cette manière, vous pouvez également créer des tableaux plus complets.

Définir l'en-tête, le corps et le pied

Les tableaux peuvent être divisés en des parties logiques. Il s'agit d'une partie en-tête, une ou plusieurs parties de données et une partie de pied. L'exemple ci-dessous montre à quoi cela pourrait ressembler:

<table border="1">
  <thead>
    <tr>
      <th&gt>Départ</th>
      <th&gt>Arrivée</th>
      <th&gt>Quai</th>
    </tr>
  </thead>
  <tfoot>
    <tr>
      <td>Berlin</td>
      <td>Stralsund</td>
      <td>5</td>
    </tr>
  </tfoot>
  <tbody>
    <tr>
      <td>Berlin</td>
      <td>Hambourg</td>
      <td>1</td>
    </tr>
    <tr>
      <td>Munich</td>
      <td>Berlin</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

Et voici un aperçu du résultat dans le navigateur:





La répartition dans les parties mentionnées n'a manifestement pas d'effet visuel. Une question se pose naturellement : Pourquoi donc se donner la peine de définir ces parties ? Il y a deux bonnes raisons à cela:

• Les parties peuvent être formatées différemment en CSS selon les besoins.

• Lors de l'impression de longs tableaux, les navigateurs peuvent répéter l'en-tête et le pied du tableau sur chaque page.

L'en-tête du tableau est introduit avec <thead>. Ensuite, viennent les lignes du tableau appartenant à la partie en-tête. N'oubliez pas de fermer la partie en-tête avec </thead>.

Pour qu'un tableau ait un pied, celui-ci doit absolument être défini avant le corps du tableau. Le pied est introduit par <tfoot>. Ensuite, une ou plusieurs lignes appartenant à la partie pied peuvent suivre. Pour fermer le pied du tableau, utilisez </tfoot>.

Le corps du tableau est défini à l'intérieur de l'élément tbody. Cet élément tbody peut apparaître plusieurs fois. Pour fermer un corps de tableau, utilisez </tbody> à chaque fois.

Par exemple, pourquoi utiliser plusieurs éléments tbody dans un tableau ? Un bel exemple pourrait être le tableau de la Bundesliga. Dans un tel tableau, il y a généralement plusieurs parties.

• Champion

• Participants à la Ligue des Champions

• Qualifié pour la Ligue des Champions

• Participants à l'Europa League

• Le milieu de tableau gris

• Place de relégation

• Relégués

Chacune de ces parties pourrait être placée dans sa propre balise tbody et ensuite être stylisée différemment en CSS.

Définir les colonnes à l'avance

La façon dont le tableau est affiché par les navigateurs dépend bien sûr principalement du nombre de lignes et de colonnes disponibles. Le processus d'affichage d'un tableau n'est cependant pas si simple pour le navigateur. En réalité, un navigateur doit d'abord lire l'intégralité du tableau avant de pouvoir l'afficher. Surtout pour les tableaux très volumineux, cela peut bien sûr prendre un certain temps. Ce problème peut être contourné en informant directement le navigateur du nombre réel de colonnes que le tableau contient.

<table>
   <colgroup span="2"></colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titre</th>
     <th>Prix</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Une brève histoire de presque tout</td>
     <td>29,95 euros</td>
   </tr>
 </table>

La pré-définition des colonnes est initiée via colgroup. Notez que la plupart des attributs disponibles dans les versions HTML précédentes pour colgroup ne sont plus autorisés en HTML5. Seul l'attribut span est maintenant autorisé parmi eux. Ce span attend en valeur le nombre de colonnes contenues dans le tableau.

L'élément colgroup est directement placé derrière le <table> introductif. Les colonnes elles-mêmes sont alors définies par les éléments col individuels.

Lors de l'utilisation de colgroup, on a essentiellement deux options :

• Avec l'attribut span

• Sans l'attribut span

Si l'attribut span n'est pas utilisé, un élément col doit être défini pour chaque colonne sur laquelle le groupe de colonnes devrait s'étendre à l'intérieur de l'élément colgroup. Notez que col est un élément autonome.

<table>
   <colgroup>
   <col />
   <col />
 </colgroup>
   <tr>
     <th>ISBN</th>
     <th>Titre</th>
     <th>Prix</th>
   </tr>
   <tr>
     <td>23223423434</td>
     <td>Une brève histoire de presque tout</td>
     <td>29,95 euros</td>
   </tr>
 </table>

Il existe d'ailleurs une forme mixte.

<table> 
 <colgroup> 
 <col> 
 </colgroup> 
 <colgroup span="2"></colgroup>
 …

C'est pratique lorsque l'on souhaite pré-définir une colonne séparément, mais regrouper les autres dans un groupe.