HTML/CSS


Des tableaux en HTML/CSS

Comment définir un tableau dans une page HTML evec un minimum de style.

l’élément table existe depuis les premières versions du HTML  . Si cet élément a été prévu dès le départ pour définir des tableaux, son usage a souvent été détourné pour régler des problèmes de mises en pages. Aujourd’hui, cet usage est à proscrire, le HTML   et le CSS   s’étant enrichis de nouvelles possibilités pour régler de manière beaucoup plus élégantes ce type de problèmes. La balise table est malgré tout toujours utile lorsque l’on désire afficher des données sous forme tabulaire. Il est donc bon de savoir l’utiliser dans ce contexte.


 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
Remarque : La balise th définit une cellule comme le fait la balise td mais cela permet de différentier les cellules d’entêtes des autres et donc, de définir un style différent si on le désire.

Construisons donc ce tableau en utilisant ces balises.

  1.     <caption>Année 2018 - 2019</caption>
  2.     <tr>
  3.       <th>Activité</th>
  4.       <th>Cotisation</th>
  5.       <th>Inscrit</th>
  6.       <th>Prix</th>
  7.     </tr>
  8.     <tr>
  9.       <td>Patchwork</td>
  10.       <td>25 €</td>
  11.       <td>Oui</td>
  12.       <td>25 €</td>
  13.     </tr>
  14.     <tr>
  15.       <td>Peinture</td>
  16.       <td>33 €</td>
  17.       <td></td>
  18.       <td>0 €</td>
  19.     </tr>
  20.     <tr>
  21.       <td>Photo</td>
  22.       <td>45 €</td>
  23.       <td></td>
  24.       <td>0 €</td>
  25.     </tr>
  26.     <tr>
  27.       <td>Roller</td>
  28.       <td>58 €</td>
  29.       <td></td>
  30.       <td>0 €</td>
  31.     </tr>
  32.     <tr>
  33.       <td>Généalogie</td>
  34.       <td>15 €</td>
  35.       <td></td>
  36.       <td>0 €</td>
  37.     </tr>
  38.     <tr>
  39.       <td>Emaux</td>
  40.       <td>30 €</td>
  41.       <td></td>
  42.       <td>0 €</td>
  43.     </tr>
  44.     <tr>
  45.       <td>Frais d'adhésions</td>
  46.       <td>35 €</td>
  47.     </tr>
  48.     <tr>
  49.       <th>Total</th>
  50.       <th>60 €</th>
  51.     </tr>
  52.   </table>

Télécharger

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 :

  1. <tr>
  2.       <td colspan="3">Frais d'adhésions</td>
  3.       <td>35 €</td>
  4.     </tr>
  5.     <tr>
  6.       <th colspan="3">Total</th>
  7.       <th>60 €</th>
  8.     </tr>

Télécharger

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

Remarque : Il existe également un attribut rowspan pour définir des cellules sur plusieurs lignes.

 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é :

  1.     <caption>Année 2018 - 2019</caption>
  2.     <thead>
  3.       <tr>
  4.         <th>Activité</th>
  5.         <th>Cotisation</th>
  6.         <th>Inscrit</th>
  7.         <th>Prix</th>
  8.       </tr>
  9.     </thead>
  10.     <tbody>
  11.       <tr>
  12.         <td>Patchwork</td>
  13.         <td>25 €</td>
  14.         <td>Oui</td>
  15.         <td>25 €</td>
  16.       </tr>
  17.      
  18. ...
  19.  
  20.       </tr>
  21.       <tr>
  22.         <td colspan="3">Frais d'adhésions</td>
  23.         <td>35 €</td>
  24.       </tr>
  25.     </tbody>
  26.     <tfoot>
  27.       <tr>
  28.         <th colspan="3">Total</th>
  29.         <th>60 €</th>
  30.       </tr>
  31.     </tfoot>
  32.   </table>

Télécharger

 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).

  1. <!DOCTYPE html>
  2. <html lang="fr">
  3.  
  4.   <meta charset="UTF-8">
  5.   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  6.   <meta http-equiv="X-UA-Compatible" content="ie=edge">
  7.   <link rel="stylesheet" href="tuto-table-01.css">
  8.   <title>Tuto tableau</title>
  9. </head>

Télécharger

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

  1.  <table class="table-facture">
Remarque : Le fait de donner un nom de classe à l’ensemble de la table permet de gérer au sein de notre projet, des tableaux ayant des styles différents.

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 :

  1. .table-facture th,
  2. .table-facture td {
  3.   border: 1px solid gray;
  4.   padding: 5px;
  5. }

Télécharger

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é :

  1. .table-facture {
  2.   border-collapse: collapse;
  3. }
  4.  
  5. .table-facture th,
  6. .table-facture td {
  7.   border: 1px solid gray;
  8.   padding: 5px;
  9. }

Télécharger

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

  1.       <tr>
  2.         <td class="lib-acti">Patchwork</td>
  3.         <td class="fld-num">25 €</td>
  4.         <td class="fld-log">Oui</td>
  5.         <td class="fld-num">25 €</td>
  6.       </tr>
  7. ...
  8.       <tr>
  9.         <td class="lib-acti" colspan="3">Frais d'adhésions</td>
  10.         <td class="fld-num">35 €</td>
  11.       </tr>
  12.     </tbody>

Télécharger

Puis définissons les styles correspondants :

  1. .table-facture .lib-total {
  2.   text-align: right;
  3.   border-style: none;
  4. }
  5.  
  6. td.lib-acti {
  7.   font-style: italic;
  8.   width: 200px;
  9. }
  10.  
  11. td.fld-num,
  12. th.fld-num {
  13.   text-align: right;
  14.   width: 60px;
  15. }
  16.  
  17. td.fld-log {
  18.   text-align: center;
  19. }

Télécharger

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 :

  1. .table-facture thead {
  2.   background-color: aqua;
  3. }
  4.  
  5. .table-facture tbody {
  6.   background-color: ivory;
  7. }

Télécharger

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

  1. table > caption {
  2.   font-size: 20px;
  3.   padding: 5px;
  4. }

Télécharger

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.



Voir en ligne : MDN web docs

Article n° 132

Crée par: chris

Créé le: 8 juin

Modifié le: 9 juin

Nombre de visites: 16

Popularité: 26 %

Popularité absolue: 4

Mots clés de cet article


SPIP

2003-2019 LePpf
Plan du site | | Contact | RSS 2.0

Visiteurs connectés : 15

Nombre moyen de visites quotidiennes sur le site: 187