Avec les standards du web, la mise en page des éléments visuels d’une page web est gérée par les CSS et les méthodes précédentes qui consistaient incorporer un

dans un
(etc …) pour arriver la composition voulue sont révolues.

Le deuxième effet “kiss kool” est que je me suis surpris essayer d’éviter absolument la balise

même pour présenter des données tabulées !

Je le crie donc haut et fort : le

n’est pas mort, loin de l . Certes comme cité ci-dessus il est plus judicieux d’utiliser les CSS pour constituer la mise en page, mais des éléments tels qu’un calendrier, une liste de produits, etc … peuvent nécessiter un tableau pour être présentés. Revenons donc sur l’art du
 :

Nous allons construire un tableau composé de 3 lignes et de 3 colonnes dont la première ligne sera l’en-tête du tableau :

Tableau de base :

titre 1	titre 2	titre 3
donnée 1-1	donnée 2-1	donnée 3-1
donnée 1-2	donnée 2-2	donnée 3-2

Pour différencier l’en-tête du tableau des cellules de données, nous pouvons définir un style CSS et l’appliquer la première ligne, mais pour des raisons sémantiques il est plus judicieux d’utiliser la balise (table header) :

titre 1
titre 2
titre 3


donnée 1-1
donnée 2-1
donnée 3-1


donnée 1-2
donnée 2-2
donnée 3-2

Le fait d’avoir utilisé la balise a transformé le contenu en texte gras et centré. Rien ne nous empêche de redéfinir l’aspect de la balise avec les feuilles de style CSS, par exemple :

th {
	background: #333;
	color: #fff;
}

Nous pouvons également structurer plus en profondeur le tableau en se servant des et
pour définir et styler les éléments qui composent notre tableau :

titre 1
titre 2
titre 3




pied du tableau




donnée 1-1
donnée 2-1
donnée 3-1


donnée 1-2
donnée 2-2
donnée 3-2

A partir de cette structure nous pouvons agir grâce aux CSS en redéfinissant par exemple :

thead {
	background: #ccc;
}

Voici de façon sommaire comment j’utilise l’élément

. Je n’ai pas voulu faire ici un descriptif complet des attributs de l’élément
et je suis conscient que bon nombre de choses peuvent encore compléter ce billet.