Guillaume Duverger - Développement & Graphisme

Les tableaux HTML

Les éléments d'un tableau :

L'élément HTML table permet de représenter un tableau de données. Il fut un temps, pas si lointain, où les tableaux servaient de structure à un site web. Or, leur vocation se résume uniquement à présenter des informations.

💡 Attention : de nombreux attributs en HTML4 sont dépréciés ou obsolètes. Parmi eux, l'attribut align qui définissait l'alignement horizontal du contenu d'une cellule, l'attribut bgcolor qui définissait la couleur d'arrière-plan d'une cellule ou d'un tableau, l'attribut valign qui définissait l'alignement vertical du contenu d'une cellule... Dans tous les cas, il est recommandé aujourd'hui de styliser tous les éléments d'un tableau avec CSS.

Parmi les éléments permettant de construire un tableau, on notera :

• table : c'est l'élément qui définit le tableau. Il accepte de nombreuses propriétés CSS :
  • width : pour la largeur du tableau.
  • border, border-style, border-color, border-width, border-collapse, border-spacing : pour styliser les bordures du tableau.
• caption : il s'agit de la légende (ou titre) qui est facultatif. Il doit se placer juste après l'ouverture du tableau. Les propriétés CSS pouvant mettre en forme cet élément sont :
  • text-align
  • caption-side : valeurs top et bottom
• col : définit une colonne du tableau. Se trouve au sein de l'élément colgroup. Elle admet quelques propriétés CSS :
  • border : cette propriété raccourcie s'applique si la propriété border-collapse vaut collapse (bordures fusionnées) et non separate (valeur par défaut).
  • background
  • width
  • visibility
• colgroup : définit un groupe de colonnes du tableau. Cet élément peut être stylisé en CSS :
  • width
  • :nth-child : cette pseudo-classe va permettre de définir l'alignement des cellules d'une colonne
  • text-align
• tbody : regroupe un ou plusieurs éléments tr formant le corps du tableau. Accepte la pseudo-classe :nth-child et la propriété text-align.
• td : définit une cellule du tableau contenant des données.
• tfoot : il s'agit du pied du tableau.
• th : définit une cellule du tableau comme étant une cellule d'en-tête pour un groupe de cellule. Il possède plusieurs attributs (voir tableaux complexes plus bas) :
  • abbr
  • colspan
  • headers
  • rowspan
  • scope
• thead : il s'agit de l'ensemble de lignes qui définit l'en-tête des colonnes du tableau.
• tr : il s'agit d'une ligne d'une cellule du tableau. Accepte la pseudo-classe :nth-child et la propriété text-align.

Exemple simple d'un tableau :

Le code ci-dessous :

<table>
<caption>Marques de voitures</caption>
<thead>
<tr>
<th>Nom</th>
<th>Nationalité</th>
<th>Date création</th>
</tr>
</thead>
<tfoot>
<tr>
<th>Nom</th>
<th>Nationalité</th>
<th>Date création</th>
</tr>
</tfoot>
<tbody>
<tr>
<td>Chevrolet</td>
<td>États-Unis</td>
<td>1911</td>
</tr>
<tr>
<td>Citroën</td>
<td>France</td>
<td>1919</td>
</tr>

...

</tbody>
</table>

table{
	
margin: 1rem auto;
text-align: center;
width: 100%;
max-width: 100%;
border-collapse: collapse;
border: 1px solid

}
	
tbody tr td:nth-child(2){
	
border-left:1px solid;
border-right: 1px solid
	
	}	
	
thead,
tfoot {

background-color: purple;
color: white

}
	
caption{text-transform:uppercase}

th,td{padding:8px 0}

tbody tr:nth-child(even) {
	
background-color: #ddd
	
}
	
tbody tr td:first-child {
	
font-weight: bold
	
}

💡 NB : on écrira les éléments thead, tfoot et tbody dans cet ordre. Autrement dit le pied se trouve avant le corps dans un tableau. Le navigateur se chargera de restituer correctement les données.

Tableaux complexes :

Dans certains cas, vous aurez besoin d'arranger votre tableau en fonction des données, en fusionnant des colonnes ou des lignes.

Il existe deux attributs qui vont nous permettre la fusion.

• colspan : la fusion s'effectue horizontalement.
• rowspan : la fusion s'effectue verticalement.

💡 Pour les deux attributs, on indiquera le nombre de cellules (élément td) à fusionner entre elles avec un chiffre correspondant.

Exemple avec l'attribut colspan :

Exemple avec l'attribut rowspan :

Rendre un tableau responsive :

A la base les tableaux n'ont pas été conçu pour être optimisés sur les terminaux mobiles. Donc il a fallu s'adapter et trouver des solutions. Aucune n'est parfaite, que ce soit en utilisant la technique Flip Scroll table, No More tables ou encore RWD list to table...

L'exemple ci-dessous utilise la technique "No More tables" qui s'appuie sur l'attribut HTML5 data- pour restituer les données.