<< Retour au sommaire

 

HTML 5, Les tableaux

 

 

Table des matières

  1. Rappel de navigation ;
  2. Le tableau ;
  3. La fusion de cellules.

 

Rappel de navigation

 

Voici un rappel de navigation dans un tableau avec JAWS :

« y », Touche de navigation rapide, permet d’atteindre le tableau suivant ;

« MAJ +Y », Touche de navigation rapide, permet d’atteindre le tableau précédent ;

« WINDOWS .point virgule », Lecture de la ligne courante ;

« WINDOWS +deux points », Lecture de la colonne courante ;

« ALT +CTRL +Flèche haute », Atteindre la cellule de la ligne précédente ;

« ALT +CTRL +Flèche basse », Atteindre la cellule de la ligne suivante ;

« ALT +CTRL +Flèche gauche », Atteindre la cellule précédente ;

« ALT +CTRL +Flèche droite », Atteindre la cellule suivante.

 

Le tableau

 

Le tableau permet de structurer la position des données dans une page, sachant que le quadrillage peut-être affiché ou non.

Il existe un certain nombre de techniques d’utilisation d’un tableau, ici dans ce manuel, nous allons étudier la structure classique, une légende, des titres de colonnes et les données.

 

La syntaxe :

<table>

<caption>Une légende ici</caption>

<tr><th>en-tête 1</th><th>en-tête 2</th><th>en-tête 3</th></tr>

<tr><td>donnée ligne 1 colonne 1</td><td>donnée ligne 1 colonne 2</td><td>donnée ligne 1 colonne 3</td></tr>

<tr><td>donnée ligne 2 colonne 1</td><td>donnée ligne 2 colonne 2</td><td>donnée ligne 2 colonne 3</td></tr>

<tr><td>donnée ligne 3 colonne 1</td><td>donnée ligne 3 colonne 2</td><td>donnée ligne 3 colonne 3</td></tr>

</table>

 

La description :

<table></table> est le bloc tableau, il contient toutes les balises composant le tableau, et comme il s’agit d’une balise de type « bloc », vous devez l’employer en dehors des autres balises de type « bloc ». Vous ne devez donc pas placer un tableau à l’intérieur d’un <p> (paragraphe).

<caption></caption> affiche la légende du tableau, la légende peut être assimilée à un titre principal de tableau, balise facultative.

<tr></tr> Doit contenir une ligne.

<th></th> Doit contenir l’en-tête d’une colonne, balise facultative.

<td></td> contient une donnée du tableau, c’est une cellule.

 

Comment afficher le quadrillage ?

Dans une balise, il est possible de rajouter un ou plusieurs attributs afin de spécifier des propriétés.

L’attribut qui permet de spécifier une bordure, le quadrillage, est « border », quant à sa propriété, il s’agit de spécifier en pixel l’épaisseur du trait.

Par exemple, pour un trait de 3 pixels d’épaisseur :

<table border="3">

Si aucune bordure n’est spécifiée, le quadrillage du tableau est invisible !

 


Voici un exemple,

Tester la page dans votre navigateur >>

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>Un super tableau</title>

</head>

<body>

<table border="3">

<caption>Les planètes du système solaire par ordre croissant d'éloignement du soleil</caption>

<tr><th>Planètes</th><th>Type</th><th>Composition de la surface</th></tr>

<tr><td>Mercure</td><td>Tellurique</td><td>Rocheuse</td></tr>

<tr><td>Vénus</td><td>Tellurique</td><td>volcanique</td></tr>

<tr><td>La Terre</td><td>Tellurique</td><td>29% de continents et 71% d'océans</td></tr>

<tr><td>Mars</td><td>Tellurique</td><td>Rocheuse</td></tr>

<tr><td>Jupiter</td><td>Jovienne</td><td>Gazeuse</td></tr>

<tr><td>Saturne</td><td>Jovienne</td><td>Gazeuse</td></tr>

<tr><td>Uranus</td><td>Jovienne</td><td>Gazeuse</td></tr>

<tr><td>Neptune</td><td>Jovienne</td><td>Gazeuse</td></tr>

</table>

</body>

</html>

 


La fusion de cellules

 

La fusion permet de réunir plusieurs cellules en une seule, et il existe 2 types de fusion :

  1. La fusion horizontale, réunit plusieurs cellules d’une même ligne, on utilise l’attribut « colspan » ;
  2. La fusion verticale, réunit plusieurs cellules d’une même colonne, on utilise l’attribut « rowspan ».

 

Dans le code ci-après, on fusionne les 2 premières cellules d’une ligne qui en comprend 4 :

<tr><td colspan="2">

Texte des 2 cellules fusionnées

</td><td>

Texte de la cellule 3

</td><td>

Texte de la cellule 4

</td></tr>

 

Maintenant, voici la syntaxe pour fusionner verticalement, c’est-à-dire plusieurs cellules d’une même colonne.

Dans une première proposition, dans un tableau de 2 lignes et de 3 colonnes, on fusionne la première cellule des lignes 2 et 3 :

<tr><td>

Texte ligne 1 colonne 1

</td><td>

Texte ligne 1 colonne 2

</td><td>

Texte ligne 1 colonne 3

</td></tr>

<tr><td rowspan="2">

Texte commun ligne 2 et 3 colonne 1

</td><td>

Texte ligne 2 colonne 2

</td><td>

Texte ligne 2 colonne 3

</td></tr>

<tr><td>

Texte ligne 3 colonne 2

</td><td>

Texte ligne 3 colonne 3

</td></tr>

 

Dans la proposition suivante, c’est la troisième cellule des lignes 2 et 3 qui sont fusionnées :

<tr><td>

Texte ligne 1 colonne 1

</td><td>

Texte ligne 1 colonne 2

</td><td>

Texte ligne 1 colonne 3

</td></tr>

<tr><td>

Texte ligne  2 colonne 1

</td><td>

Texte ligne 2 colonne 2

</td><td rowspan="2">

Texte commun lignes 2 et 3 colonne 3

</td></tr>

<tr><td>

Texte ligne 3 colonne 1

</td><td>

Texte ligne 3 colonne 2

</td></tr>

 


Dans l’exemple suivant, le tableau « planning » comprend 4 colonnes, « nom », « prénom », « date » et « motif du rendez-vous ».

  1. Lorsqu’un rendez-vous a lieu avec une société et non pas avec une personne, les colonnes 1 et 2 de la ligne du rendez-vous sont fusionnées et contient la « raison sociale » ;
  2. Lorsque 2 personnes participent à un même rendez-vous, la date et le motif du rendez-vous sont communs pour les 2 lignes, il y a donc 2 fusions verticales.

 

Tester la page dans votre navigateur >>

 

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<!--[if lt IE 9]>

    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

<![endif]-->

<title>La fusion de cellules</title>

</head>

<body>

<!-- Voici un tableau de 5 lignes et de 4 colonnes avec une bordure de 3 pixels d'épaisseur -->

<table border="3">

<!-- Voici maintenant la légende -->

<caption>Mon planning</caption>

<!-- Voici la ligne d'en-têtes des 4 colonnes -->

<tr>

<th>

Nom

</th><th>

Prénom

</th><th>

Date

</th><th>

Motif du rendez-vous

</th></tr>

<!-- Voici un rendez-vous avec une personne, donc, aucune fusion des 2 premières cellules n'est nécessaire -->

<tr><td>

DURAN

</td><td>

Bernard

</td><td>

14/03/2014

</td><td>

Achat d'un vélo d'appartement d'occasion

</td></tr>

<!-- Voici un rendez-vous avec une société, la fusion des 2 premières cellules est nécessaire -->

<tr><td colspan="2">

RENAULT

</td><td>

21/03/2014

</td><td>

Achat de mon nouveau véhicule

</td></tr>

<!-- Voici un rendez-vous avec une seconde personne, aucune fusion des 2 premières cellules n'est nécessaire -->

<tr><td>

DUPONT

</td><td>

Nathalie

</td><td>

29/05/2014

</td><td>

Vente de mon ordinateur portable qui est bien planté

</td></tr>

<!-- Voici un rendez-vous avec une association, fusion des 2 premières cellules oblige ! -->

<tr><td colspan="2">

Musée de l'empaillage

</td><td>

19/06/2014

</td><td>

Vente de ma belle-mère

</td></tr>

<!-- Voici maintenant un même rendez-vous avec 2 personnes, fusion de la date et du motif pour les 2 lignes -->

<tr><td>

MARTIN

</td><td>

Christophe

</td><td rowspan="2">

01/07/2014

</td><td rowspan="2">

Dîner au restaurant

</td></tr>

<tr><td>

VANDEL

</td><td>

Frank

</td></tr>

<!-- Fermeture du tableau -->

</table>

</body>

</html>

 

Philippe BOULANGER