Présentation

Le but de cet article ne sera pas de vous montrer l’ensemble des possibilités de présentation de tableaux que permet le HTML  , mais, à partir d’un ensemble simple, de voir les principales balises disponibles pour définir un tableau et, dans un second temps, comment améliorer sa présentation à l’aide de styles CSS  .

Nous allons essayer de créer une page qui devra afficher un tableau ressemblant l’exemple suivant :

Cela va nous permettre de voir comment réaliser un tableau de plusieurs lignes et colonnes avec, des lignes ayant un nombre de colonnes différents. Nous avons également un titre et des entêtes de colonnes et un total en fin de tableau.

 Composition de base du tableau en HTML  

Les balises que nous utiliserons sont :

• table : pour indiquer que l’on définit un tableau.
• tr : pour définir une ligne de tableau
• td : pour définir une cellule dans une ligne.
• th : pour définir une cellule d’entête dans une ligne.
• caption : permet de définir un titre au tableau

Construisons donc ce tableau en utilisant ces balises.

Ce qui donne le résultat suivant :

On vois que le navigateur a définit un style par défaut différent pour les balises th et td mais sinon, le résultat n’est pas satisfaisant.

 Des cellules sur plusieurs colonnes

Nous allons d’abord régler le problème des lignes ayant des cellules sur plusieurs colonnes.

Pour cela nous disposons d’un attribut colspan qui va nous permettre de préciser le nombre de colonnes qu’aura la cellule.

Il nous suffit de modifier les 2 dernière lignes comme suit :

Nous avons spécifié que la première cellule aura une largeur de 3 colonnes, ce qui donne maintenant l’affichage suivant :

 Entête, corps et pied de tableau

Pour améliorer la présentation, nous devrons passer par du CSS  . Mais avant cela, nous allons ajouter 3 balises non indispensables, mais qui vont nous permettre de séparer le corps du tableau des entêtes et pieds de tableau. Cela peut être utiles pour définir des styles différents selon les zones du tableau, voir certains traitements JavaScript dans le cas de tableaux dynamiques.

Ces balises sont thead, tbody et tfoot. Voici le script modifié :

 Ajouter un cadre aux cellules

Pour que ce tableau soit lisible et agréable, nous allons encadrer chaque cellule. Pour cela, nous aurons besoin d’une feuille de style CSS.

Nous allons d’abord ajouter une ligne de lien vers le fichier CSS dans le fichier HTML (ligne 8).

Nous allons également donner un nom de classe à la table qui nous permettra de lui affecter un style particulier :

Nous pouvons maintenant définir le style du tableau dans le fichier CSS.

Pour cela, nous allons définir un cadre pour l’ensemble des cellules des tableaux ayant la classe table-facture avec le code suivant :

Ce code définit une bordure de 1 pixel sur l’ensemble des cellules du tableau. J’en ai également profité pour ajouter une marge intérieure de 5 pixels.

Voici le résultat :

Les cellules ont bien un cadre mais par défaut, il y a un espace qui n’est pas très estétique. Pour cela nous allons spécifier un style pour l’ensemble de la table pour supprimer cet espace. Voici le code CSS modifié :

Nous obtenons maintenant le tableau suivant :

 Formatage du contenu des cellules

Il nous reste maintenant à fignoler la présentation comme le formatage des prix par exemple. Plusieurs solutions sont possibles en CSS. Pour des raisons de compréhension et permettre des évolutions du tableau, nous allons créer des classes spécifiques pour formater les différents types de cellules : prix, libellés d’activités etc... Nous allons également élargir un peu les cellules.

Ajoutons d’abord des classes à nos balises HTML pour chaque types de cellules du tableau

Puis définissons les styles correspondants :

Pour le libellé du total, je l’ai défini pour les tableaux de classe table-facture alors que pour les définitions suivantes, j’ai définie une règle générale pour toutes les balises th et td ayant le style fld-num quelque soit le tableau.

• Pour le libellé "Total", j’ai aligné le texte à droite et supprimé les bordures.
• Pour les libellés d’activités, j’ai définie des caractères en italique avec une largeur de colonne à 200px.
• Pour les cellules numérique j’ai spécifiée une largeur de colonne de 60 pixels et un alignement à droite.
• Pour le champ qui doit afficher "oui" si la personne est inscrite à une activité, le texte sera centré.

Cela donne l’affichage suivant :

Voici maintenant un exemple de styles pour les sections thead et tbody :

Définissons également un style pour le titre du tableau :

Ici j’ai défini un style uniquement pour les balises caption se trouvant sous une balise table

Voici le résultat final de notre tableau :

 Conclusion

Nous avons vu ici comment rendre présentable un tableau HTML à l’aide de styles CSS. La version 3 de ce langage propose d’autres possibilités qui n’ont pas été vues dans cet article dont le but était de rester simple.

Dans un prochain article, nous verrons comment rendre ce tableau interactif pour permettre à un utilisateur de saisir lui-même les activités auquelles il souhaite participer avec calcul automatique du total. Mais pour cela nous devrons utiliser un autre langage, le JavaScript.