Tableaux

Tableau simple

Les tableaux sont une façon d'afficher de l'information dans une page Web sous une forme compacte. Les tableaux servent principalement à afficher des données, comme des budgets, des rapports financiers, des définitions de termes ou encore des notes d'examens. On peut aussi l'utiliser tout simplement pour organiser des données sous différentes catégories.

En HTML, les tableaux sont à la base créé à l'aide de 3 balises différentes:

<table>: C'est la balise englobant le tableau. L'ensemble d'un tableau devrait se retrouver à l'intérieur de cette balise.
<tr>: Balise représentant une rangée du tableau.
<td>: Balise représentant une cellule du tableau. Les cellules doivent se retrouver absolument dans une balise de rangée <tr>.

Voici comment créer un simple tableau avec ces 3 balises:

HTML

À noter:

Le tableau est un peu difficile à remarquer. C'est parce que par défaut, les bordures du tableau ne sont pas affiché. Malheureusement, nous verrons uniquement comment ajouter les bordures avec du CSS dans les prochaines semaines.

Sections de tableau

Dans les tableaux plus complexe, il est possible de diviser les tableaux en 3 sections: l'entête, le corps et le pied. Nous utiliserons 3 balises pour séparer ces sections. Ces balises seront mises directement à l'intérieur de la balise <table>.

<thead>: Balise englobant l'entête du tableau. On y mettra en général les différents titres des colonnes.
<tbody>: Balise englobant le corps du tableau. On y mettra généralement les données du tableau.
<tfoot>: Balise englobant le pied du tableau. On y mettra généralement les résultats ou les totaux des données du tableau.

Voici à quoi ressemble un tableau avec ses différentes sections:

HTML

À noter:

Il y a quelques petits détails à mentionner sur le code ci-dessus:

On doit mettre les <tr> à l'intérieur des balises de section.
Dans un <thead>, on doit mettre des <th> au lieu de des <td>.
Il est possible de ne pas mettre de valeur dans une cellule.
Il est possible de ne pas mettre toutes les sections. Par exemple, il est possible d'avoir uniquement le <thead> et <tbody> ou encore uniquement le <tbody> et le <tfoot>.

Légende ou titre du tableau

Il est possible d'afficher un titre ou une légende à un tableau à l'aide de la balise <caption>. Si vous voulez utiliser cette fonctionnalité, vous devez obligatoirement mettre cette balise en premier à l'intérieur de la balise <table>.

HTML

Fusionner des cellules

Il est possible de fusionner des cellules à l'aide des attributs colspan et rowspan. Les attributs sont un moyen de configurer certaines balise. Dans le cas de ces 2 attributs, ils servent à configurer les cellules, donc les balises <th> ou <td>. Ces attributs doivent indiquer de combien de cellules nous voulons faire la fusion à partir de la cellule spécifiée.

La fusion se fait uniquement dans 2 directions: vers la droite pour colspan ou vers le bas pour rowspan. Il est aussi important de noter que nous devons retirer les cellules qui sont fusionné à la cellule spécifié si nous voulons un HTML valide et un affichage correct.

HTML

CSS

À noter:

Les bordures du tableau ci-dessus ont été ajouté pour faciliter la visualisation des fusions. Nous verrons comment styler les tableaux plus tard dans le cours, lorsque nous discuterons du CSS.

Attention:

Par le passé, avec la fusion des cellules, il était fréquent d'utiliser les tableaux pour gérer la disposition (layout) de la page Web. Aujourd'hui, les tableaux servent uniquement à faire la présentation de données. Vous ne devriez jamais utiliser les tableaux pour faire la mise en page d'un site web. C'est une très mauvaise pratique. Ce sera plutôt le travail du CSS de s'occuper de la disposition de notre site Web.

<< Page précédente Page suivante >>