Les tables

Fulgence qui ne connaissait pas le XHTML ou le HTML avant le début de notre projet ne sait pas qu'il vient de réveiller en moi un flot de souvenirs...

Flash Back...vous pouvez ne pas lire cette section

En plein durant l'explosion du HTML, très peu de solutions de présentation existées. Et pour pallier à cela, un génie pour certain, le diable incarné pour d'autres proposa que pour simplifier la présentation d'un site il fallait simplement construire un tableau et en jouant avec les attributs alors accessible en HTML on pouvait faire beaucoup de choses. Pour votre information 80% des sites actuels fonctionnent encore sur ce modèle.

Moi-même en ces temps obscures et reculés, j'ai utilisé les tableaux pour construire des sites internets, yahoo , hotmail , cnn , le monde, tous les sites les plus utilisées et visitées au mondes utilisent les tableaux... hé bien ils ont tort na!!!

Pourquoi, tout simplement parce qu'un tableau ça sert à structurer des données pas à présenter un site. Ça c'est pour la théorie, et en pratique, il est plus simple de maintenir un site sans tableau qu'un site avec tableau. Et enfin, pour ce qui auraient toujours pas compris, une page présentée à l'aide de tableaux et toujours plus lourde qu'une page structurer sans tableau. Donc vous gagner ou plus exactement vous récupérer la bande passante consommer par les tableaux par conséquent :

• votre page se charge plus rapidement.
• vous payez moins à votre provider.

Bref si tout cela ne vous convainct pas de laisser tomber une bonne fois pour toute les tableaux pour la présentation...hé bien faite, je ne peu plus rien pour vous ;)

les balises

Les balises de structuration de tables sont nombreuses et je vais essayer de décrire les plus utilisées.

balise de description de table

balise	type	description	attributs utiles
balise	type	description	attributs utiles
<table>	bloc	définition logique d'une table.	summary
<thead>	bloc	définition de l'entête de la table (là où l'on trouvent le titre des colonnes )
<tfoot>	bloc	idem que <thead>
<tbody>	bloc	corps du tableau
<tr>	bloc	definit logique d'une ligne du tableau
<td>	bloc	definit d'un case du tableau	rowspan, colspan
<th>	bloc	définit d'un case titre du tableau	rowspan, colspan
<caption>	bloc	titre d'une table

les balises <table> , <thead> , <tfoot> , <tbody>, <caption>

la balise <table> sert à définir une structure de table en XHTML. Sans elle, toutes les autres balises ne signifie rien et vous aurez un document non-valide.

les balises <thead> , <tfoot> et <tbody> ne sont généralement pas utilisées, elles servent à structurer l'information soumise sous forme de table. Ainsi elles délimitent resepctivement, l'entête <thead>, le bas de tableau <tfoot> et le corps <tbody> à proprement parlé du tableau.
Il est a noté que la balise <tfoot> s'insère immédiatement aprés la balise <thead>.

La balise <caption> sert à indiquer la légende du tableau. Tout comme les balises décrites ci-dessus elle n'est pas indispensable mais permet de mieux structurer votre tableau.

les balises <tr> , <td> , <th>

En XHTML, un tableau est un ensemble de ligne. les balises décrites ci-dessous peuvent être utilisées dans chaque partie du tableau telles que définies dans le point précédent (excepté <caption>).

La balise <tr> définie une telle ligne. Et à l'intérieur de cette ligne vous trouverez des cases définies par <th> ou <td>.

<th> et <td> diffèrent dans le faite que la première sera préférée lorsque l'on veut déclarer le titre d'une colonne ou d'une ligne. Le second contiendra la ou les valeurs de chaque donnée définie.

les attributs les plus utilisés

De tout les attributs que l'on peut ajouter aux balises de tables voici ceux qui peuvent vous être utiles :

summary :

à ajouter à la balise <table> , cette attribut est lui beaucoup plus récents et adresse le problème de l'accessibilité. Il est recommandé de toujours l'employer en y ajoutant un texte descriptif du tableau pour les personnes malvoyantes.

rowspan :

à ajouter à aux balises <td> et/ou <th>, cette attribut permet de fusionner des cases adjacentes toutes au dessous de l'autre.

colspan :

à ajouter à aux balises <td> et/ou <th>, cette attribut permet de fusionner des cases adjacentes toutes aà droite de la cases sur laquelle colspan est indiqué.

exemples

Etudier attentivement la source ci-dessous, les différents points abordés dans ce chapitre y sont repris dans une seule table.

<table summary="exemple d'un tableau">
<caption>ceci est la légende du tableau</caption>
<thead>
<tr>
<th>colonne 1</th>
<th>colonne 2</th>
<th>colonne 3</th>
<th>colonne 4</th>
</tr>
</thead>
<tfoot>
<tr>
<th>colonne 1</th>
<th>colonne 2</th>
<th>colonne 3</th>
<th>colonne 4</th>
</tr>
</tfoot>
<tbody>
<tr>
<td colspan="2"> ligne 1, colonne 1 : <code><td colspan="2"></code></td>
<td>ligne 1, colonne 3</td>
<td>ligne 1, colonne 4</td>
</tr>
<tr>
<td>ligne 2, colonne 1</td>
<td>ligne 2, colonne 2</td>
<td>ligne 2, colonne 3</td>
<td>ligne 2, colonne 4</td>
</tr>
<tr>
<td rowspan="2"> ligne 3, colonne 1 :<br /> <code><td rowspan="2"></code></td>
<td>ligne 3, colonne 2</td>
<td colspan="2" rowspan="2"> ligne 3, colonne 3 :<br /> <code><td colspan="2" rowspan="2"></code></td>
</tr>
<tr>
<td>ligne 4, colonne 2</td>
</tr>
</tbody>
</table>

Et place au résultat final :

ceci est la légende du tableau

titre 1	titre 2	titre 3	titre 4
titre 1	titre 2	titre 3	titre 4
ligne 1, colonne 1 : <td colspan="2">		ligne 1, colonne 3	ligne 1, colonne 4
ligne 2, colonne 1	ligne 2, colonne 2	ligne 2, colonne 3	ligne 2, colonne 4
ligne 3, colonne 1 : <td rowspan="2">	ligne 3, colonne 2	ligne 3, colonne 3 : <td colspan="2" rowspan="2">
	ligne 4, colonne 2

Quant au site de Fulgence, ne vous inquiéter pas, il a aussi eu droit à son tableau, comme convenu.
Maintenant que nous avons à quelques détails près l'ossature de notre page, que nous l'avons bien structuré, se pose le problème de référencement. C'est à dire que l'on voudrait créer des liens entre notre page et les différents sites préférés de Fulgence, mais également, nous aimerions que Fulgence puissent naviguer plus facilement entre les différentes parties de sa page...vue qu'elle est assez longue quand même. En fait on a encore beaucoup de boulot sur la planche... mais ça c'est une autre histoire.