<< Retour au sommaire

 

Les tableaux

 

 

 

Le sommaire :

  1. introduction.
  2. Créer un tableau simple sans quadrillage.
  3. Le quadrillage en CSS.
  4. Les titres de colonnes.
  5. Le titre du tableau.
  6. Fusionner des cellules.
  7. Les balises de gestion de gros tableaux.
  8. Le CSS pour décorer les tableaux.

 

Introduction

 

Un tableau permet d’agencer les données à l’écran par ligne, et accessoirement, par colonnes.

Vous pouvez décider d’afficher ou non les bordures, donc le quadrillage, et de définir des styles de tableaux dans votre fichier CSS.

La balise est <table>.

 

La syntaxe de la balise principale :

<table>

(Ici le contenu de votre tableau)

</table>

 

Vous avez remarquez que la balise <table> doit être fermée par l’élément de fin de balise </table>, et le contenu du tableau doit être entre ces deux balises…

 

La balise <table> est une balise de type block, elle ne doit donc pas être intégrée dans la balise <p>.

 

 


Créer un tableau simple sans quadrillage

 

Quadrillage ou non, la structure est la même…

Pour le quadrillage, c’est juste une histoire de propriété !

 

Dans le bloc <table>, chacune des lignes du tableau doit être entre les balises <tr> et </tr>.

 

<table>

<tr>Première ligne</tr>

<tr>Deuxième ligne</tr>

<tr>Troisième ligne</tr>

( ETC…)

</table>

 

Le problème, c’est qu’une ligne de tableau doit contenir des colonnes, enfin, au moins une au minimum !

On utilisera la balise <td>.

 

<table>

<tr>

Première ligne

<td>Première colonne</td>

<td>Deuxième colonne</td>

<td>Troisième colonne</td>

</tr>

<tr>

Deuxième ligne

<td>Première colonne</td>

<td>Deuxième colonne</td>

<td>Troisième colonne</td>

</tr>

<tr>

Troisième ligne

<td>Première colonne</td>

<td>Deuxième colonne</td>

<td>Troisième colonne</td>

</tr>

(etc.…)

</table>

 

Vous pouvez constater que chacune des colonnes <td> et </td>doit être imbriquée dans la ligne <tr> et </tr> qui la contient…

 

Voici un exemple qui affiche un tableau de 3 lignes et de 3 colonnes.

Pour mieux vous aider à en saisir la structure, vous avez d’abord l’exemple rempli de commentaires, puis l’exemple vidé de ses commentaires. 

 

L’exemple avec commentaires :

 

<!-- Ouverture du tableau -->

<table>

<!-- ouverture de la première ligne -->

<tr>

<!-- ouverture de la première colonne de la ligne 1 -->

<td>Pascale</td>

<!-- ouverture de la deuxième colonne de la ligne 1 -->

<td>33 ans</td>

<!-- ouverture de la troisième colonne de la ligne 1 -->

<td>BORDEAUX</td>

<!-- fermeture de la première ligne -->

</tr>

<!-- ouverture de la deuxième ligne -->

<tr>

<!-- ouverture de la première colonne de la ligne 2 -->

<td>Véronique</td>

<!-- ouverture de la deuxième colonne de la ligne 2 -->

<td>66 ans</td>

<!-- ouverture de la troisième colonne de la ligne 2 -->

<td>LILLE</td>

<!-- fermeture de la deuxième ligne -->

</tr>

<!-- ouverture de la troisième ligne -->

<tr>

<!-- ouverture de la première colonne de la ligne 3 -->

<td>Corinne</td>

<!-- ouverture de la deuxième colonne de la ligne 3 -->

<td>41 ans</td>

<!-- ouverture de la troisième colonne de la ligne 3 -->

<td>ROCHEFORT</td>

<!-- fermeture de la troisième ligne -->

</tr>

<!-- fermeture du tableau -->

</table>

 

 

L’exemple sans commentaires :

 

<table>

<tr>

<td>Pascale</td>

<td>33 ans</td>

<td>BORDEAUX</td>

</tr>

<tr>

<td>Véronique</td>

<td>66 ans</td>

<td>LILLE</td>

</tr>

<tr>

<td>Corinne</td>

<td>41 ans</td>

<td>ROCHEFORT</td>

</tr>

</table>

 

 


Le quadrillage en CSS

 

Pour avoir un quadrillage dans votre tableau, je vous propose de définir des bordures de colonnes en CSS.

 

La première propriété est « border ».

Vous la connaissez déjà, voici la syntaxe pour avoir une bordure continue noire d’une largeur d’un pixel :

Td {   border: 1px solid black;}

 

Mais attention, ici, on aura des bordures en double entre chacune des cellules du tableau !

On va donc utiliser une seconde propriété, elle s’intitule « border-collapse », elle permet de coller les bordures entre elles. Seulement, cette propriété devra être définie en CSS pour la balise <table>.

La propriété « border-collapse » peut recevoir 2 valeurs :

collapse : les bordures seront collées entre elles, c'est l'effet qu'on recherche.

separate : les bordures seront dissociées (valeur par défaut)

 

On se retrouve donc avec le code CSS suivant :

Table {border-collapse: collapse;} 

Td {border: 1px solid black;}

 

 


Les titres de colonnes

 

Pour les titres de colonnes, c’est exactement comme pour les colonnes elles-mêmes mais cette fois nous utiliserons la balise <th> au lieu de la balise <td>.

 

En reprenant l’exemple précédent, voici ce que ça donne…

 

<table>

<tr>

<th>Noms</th>

<th>Ages</th>

<th>Villes</th>

</tr>

<tr>

<td>Pascale</td>

<td>33 ans</td>

<td>BORDEAUX</td>

</tr>

<tr>

<td>Véronique</td>

<td>66 ans</td>

<td>LILLE</td>

</tr>

<tr>

<td>Corinne</td>

<td>41 ans</td>

<td>ROCHEFORT</td>

</tr>

</table>          

 

Attention, maintenant nous devons penser à mettre à jour notre fichier CSS !

Eh bien quoi… Il faut bien que les titres de colonnes aient, elles aussi, une bordure !

Td,th {   border: 1px solid black;}

 

 


Le titre du tableau

 

Vous pouvez placer un titre principal dans votre tableau.

La balise est <caption>.

Vous devez placer cette balise juste au-dessous de la première ligne <tr>.

 

<table>

<caption>Le titre</caption>

Suite du tableau…

 

Toujours en reprenant notre exemple :

 

<table>

<caption>Liste des femmes bizarres</caption>

<tr>

<th>Noms</th>

<th>Ages</th>

<th>Villes</th>

</tr>

<tr>

<td>Pascale</td>

<td>33 ans</td>

<td>BORDEAUX</td>

</tr>

<tr>

<td>Véronique</td>

<td>66 ans</td>

<td>LILLE</td>

</tr>

<tr>

<td>Corinne</td>

<td>41 ans</td>

<td>ROCHEFORT</td>

</tr>

</table>

 

 


Fusionner des cellules

 

Vous pouvez fusionner des cellules :

-         dans le sens horizontal, (fusion de colonnes,)

-         dans le sens vertical, (fusion de lignes.)

 

La fusion se réalise à partir d’attributs que l’on rajoute à la balise <td> :

-         « colspan » pour fusionner des colonnes,

-         « rowspan » pour fusionner des lignes.

 

A ces attributs, vous devez spécifier le nombre de cellules à fusionner !

 

Voici un exemple avec l’attribut « colspan » qui va fusionner la cellule 2 et la cellule 3 de la ligne 4 :

 

<table>

<caption>Liste des films disponibles</caption>

<tr>

<th>Films</th>

<th>Enfants</th>

<th>Adultes</th>

</tr>

<tr>

<td>Les vampires ont soifs</td>

<td>Non, trop violent</td>

<td>Oui</td>

</tr>

<tr>

<td>Nounours en Californie</td>

<td>oui</td>

<td>Non, trop galère !></td>

</tr>

<tr>

<td>Bienvenue chez les ch'ti</td>

<td colspan="2">Pour toute la famille</td>

</tr>

</table>

 

 

Pour la fusion de lignes, c’est pour ainsi dire identique…

Regardez un peu voir !

Ici, nous allons inverser le sens du tableau :

 

<table>

<caption>Liste des films disponibles</caption>

<tr>

<th>films</th>

<td>Les vampires ont soifs</td>

<td>Nounours en Californie</td>

<td>Bienvenue chez les ch'ti</td>

</tr>

<tr>

<th>Enfants</th>

<td>Non, trop violent</td>

<td>oui</td>

<td rowspan="2">Pour toute la famille</td>

</tr>

<tr>

<th>Adultes</th>

<td>oui</td>

<td>Non, trop galère !</td>

</tr>

</table>

 

 


Les balises de gestion de gros tableaux

 

Il existe des balises qui permettent d’encapsuler des tableaux de grandes tailles.

Ces balises sont faites pour mieux gérer l’interface utilisateur et elles sont au nombre de 3 :

  1. <thead> </thead>, pour encapsuler les titres du tableau, ce sont les balises <th>.
  2. <tbody> </tbody>, pour encapsuler le contenu du tableau, ce sont les balises <tr> et <td>.
  3. <tfoot> </tfoot>, pour encapsuler le pied du tableau, ce sont généralement encore les balises <th> que l’on replace en bas du tableau.

 

Mais au moment de l’écriture du tableau, nous devons commencer par le bloc <thead>, puis par le bloc <tfoot>, et enfin, par le bloc <tbody>.

C’est comme ça !

 

Voici la syntaxe :

 

<table>

<thead>

<tr>

<th>mon premier titre</th>

<th>Mon deuxième titre</th>

</tr>

</thead>

<tfoot>

<tr>

<th>mon premier titre</th>

<th>Mon deuxième titre</th>

</tr>

</tfoot>

<tbody>

<tr>

<td>blablablabla</td>

<td>blablablabla encore pendant une heure !</td>

</tr>

</tbody>

</table>

 

 


Le CSS pour décorer les tableaux

 

Pour améliorer la présentation de nos tableaux, nous pouvons utiliser les propriétés CSS classiques que voici :

 

Pour modifier la bordure des cellules, il suffit d'utiliser border.

Pour modifier la couleur de fond d'une cellule, on utilisera background-color.

Pour modifier l'image de fond d'une cellule, on utilisera background-image

Mais on peut aussi modifier la taille (font-size) et la police (font-family) du texte des cellules d'en-tête, en appliquant les propriétés adaptées aux balises <th>

On peut aussi agrandir le tableau tout entier (width), le centrer (margin:auto car le tableau est un block).

On peut centrer le texte à l'intérieur des cellules (text-align:center), modifier les marges intérieures des cellules (padding) pour aérer le tableau.

 

Tenez, voici un exemple de CSS :

<!-- définition des titres de tableaux -->

caption {margin:auto; font-family: Arial, Times, "Times New Roman", serif;   font-weight: bold; font-size: 1.2em;   color: #009900; margin-bottom: 20px; text-align:center;} 

<!-- Définition des tableaux -->

 table {margin: auto; border: 4px outset green;

border-collapse: collapse;} 

<!-- Définition des titres de colonnes -->

 th {background-color: #006600; 

   color: white; font-size: 1.1em; font-family: Arial, "Arial Black", Times, "Times New Roman", serif;} 

<!-- Définition des cellules ordinaires -- <

 td {border: 1px solid black; font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif; 

padding: 5px;} 

 

Philippe BOULANGER