Tableaux

Chapitre 1

Les tableaux

Le tableau HTML permet de présenter des informations strucurées, alignées, avec des entrées.
Si le tableau nous apparaît, tel un document excel, constitué de lignes et de colonnes, le HTML lui le construit ligne par ligne. Et dans les lignes <tr> nous dessinons des cellules <td>.

Comment dessiner un tableau en html

Un tableau se dessine dans l'ordre suivant : on créée une ligne <tr> dans laquelle on ajoute autant de cellules <td> que l'on souhaite construire de colonnes.
Attention toutes les lignes d'un tableau doivent comporter le même nombre de cellules (tant qu'il n'y a pas de fusion.)

Exemple d'un tableau de deux lignes et deux colonnes

<table> → début du tableau 

<tr> → début de la ligne A 
<td> → début de la cellule 1 
</td> → fin de la cellule 1 
<td> → début de la cellule 2 
</td> → fin de la cellule 2 
</tr> → fin de la ligne A 

<tr> → début de la ligne B 
<td> → début de la cellule 3 
</td> → fin de la cellule 3 
<td> → début de la cellule 4 
</td> → fin de la cellule 4 
</tr> → fin de la ligne B 

</table> → fin du tableau

Le résulat de cette succession de balises est un alignement des éléments insérés dans le tableau, mais le tableau est transparent. On ne voit pas les lignes du tableau.

Ajouter un style au tableau

Lorsque l'on écrit le code d'un tableau tel que je l'indique ci-dessus, et sans attribut de style, le tableau ne possède pas de bordures et la présentation est triste.
Afin de rendre visible le tableau il est nécessaire d'introduire quelques feuilles de style. Tout d'abord, dans le code HTML, nous allons dans la balise <head> ajouter la balise <style> :

<head>

  <style>

  </style>

  </head>

Entre les deux balises <style></style>, nous allons placer les feuilles de style. La façon de rédiger les feuilles de style est la suivante :
selecteur{ propriété:valeur;} Il faut bien placer la ou les propriétés entre deux accolades et séparer chaque style avec un point virgule.

Nous allons ajouter au tableau, table une bordure, border noir(#000000), avec un trait continu (solid), et une épaisseur moyenne (2 pixels) :

table { border:#000000 solid 2px;}

Maintenant, le tableau est encadré, nous allons donner une bordure border aux cellules de cellules td avec un trait continu (solid) fin (1px) et bleu (#0099FF) :

td { border:#0099FF solid 1px; }

Le tableau possède maintenant une bordure noire et des cellules encadrées de bleu, mais elles ne sont pas collées les unes aux autres. Pour coller les cellules les unes aux autres, on employe la propriété border-collapse.

On peut aussi ajouter un fond coloré backgroud-color gris (#CCCCCC) au th par exempleet lui ajouter une bordure :

table { 
          border:#000000 solid 2px;
          border-collapse:collapse;
          }
td { 
          border:#0099FF solid 1px; 
          } 
th { 
          border:#0099FF solid 1px; 
          background-color:#CCCCCC;
          }

Autres balises de tableau

Ajouter un titre à son tableau

C'est la balise <caption></caption> qui permet d'ajouter un titre au tableau. La balise se place sous la balise <table> et avant la première ligne <tr></tr>.

Les cellules de titre

Il existe des cellules d'en-tête <th> </th> qui permettent de mettre en valeur des titres de colonne en haut ou à gauche.
Voici un exemples de tableau avec une première ligne de cellules de titre

Titre du tableau 01
th	th	th	th
th	td	td	td

Balises complémentaires

Voici l'ordre dans lequel elle doivent être insérées :

<thead> précise l'en-tête de tableau, cette balise s'emploie avec :
<tfoot> pied du tableau.
<tbody> : corps du tableau, et :

Tableau et accessibilité

Pour que votre site soit accessible à tous, et notamment aux personnes ayant des déficiences visuelles, lorsque vous construisez vos tableaux, il faut penser à ajouter des attributs à certaines de vos balises. - Un attribut est un texte ajouté dans une balise et qui précise l'usage de la balise à l'aide d'une valeur. Pour les tableaux, il convient d'ajouter l'attribut "summary", il se rédige ainsi : <table summary="résumé court de mon tableau">. On précise également avec l'attribut scope dans les balises th si les cellules de titres sont horizontales<th scope="row"> : ou verticales : <th scope="col">.

Fusion des cellules

L'attribut COLSPAN

On peut fusionner les cellules d'un tableau de manière horizontale et pour cela on ajoutera l'attribut colspan="n" ; à la première balise <td>, "n" étant le nombre de colonnes que l'on fusionne, ici 3 colonnes :

cellule fusionnée
A	B	C
D	F	G

Voici le code html du tableau ci-dessus :

<table>
  <tr><th colspan="3">cellule fusionnée</th></tr>
  <tr><td>A</td><td>B</td><td>C</td></tr>
  <tr><td>D</td><td>F</td><td>G</td></tr>
  </table>

L'attribut ROWSPAN

Pour les cellules en colonnes, c'est l'attribut rowspan="n" qui sera utilisé, "n" étant de le nombre de cellules fusionnées. Attention à l'écriture du tableau. Pour les lignes des cellules CD et FG, il n'y a que deux balises <td> à la place de trois.

cellule fusionnée	cellule A	cellule B
	cellule C	cellule D
	cellule F	cellule G

Voici le code html du tableau ci-dessus :

<table>
  <tr><th rowspan="3">cellule fusionn&eacute;e</th><td>cellule A</td><td>cellule B</td></tr>
  <tr><td>cellule C</td><td>cellule D</td></tr>
  <tr><td>cellule F</td><td>cellule G</td></tr>
  </table>

Les tableaux peuvent bien sûr combiner des fusions verticales et horizontales, comme les emplois du temps, ce sont les tableaux complexes.

Style de tableau avancé

Les feuilles de style CSS3 permettent une gestion agréable des tableaux comme les créations dlignes de couleurs aleternées.
On emploie le sélecteur nth-child : le nièmeenfane. Ce sélecteur permet donc de sélectionner le/les n-ièmes enfants d’un élément. Il y a plusieurs façon de procéder :
• Valeur numérique entière (cible un seul enfant)
• Valeur de n, éventuellement suivie d’une valeur entière ajoutée ou soustraite.

element:nth-child(an + b) { propriétés CSS }

En écrivant nth-child(3) je cible le troisième élément de la balise. Avec nth-child(2n+2), je cible le 2e, le 4e, le 6e... élément de ma balise. Comme dans l'exemple ci-dessous où j'applique à la ligne tr ce pseudo élément.

Cellule titre	Cellule titre	Cellule titre

Le code css inséré est le suivant :

							tr:nth-child(2n+2){
	 							background-color:#d5f3f1;
	}