Les tableaux

Le besoin

5.1 Les tableaux de mise en forme insérés par le CMS ont les caractéristiques suivantes :

  • role = « presentation »
  • compréhensibles en lecture linéaire
  • pas d’éléments caption, th, thead, tfoot
  • pas d’attributs scope, headers, axis, colgroup

5.2 Les tableaux de données simples ont les caractéristiques suivantes :

  • élément caption, contribuable
  • th pour les en-têtes, avec attribut scope pertinent

5.3 Les tableaux de données complexes ont les caractéristiques suivantes :

  • élément caption, contribuable
  • th pour les en-têtes, avec couples id/headers pour créer les associations en-têtes/cellules de données

Résultat

  • Pas de fonctionnalité d’insertion de tableaux dans l’éditeur par défaut, installation du plugin WP_edit
  • Pour les tableaux de mise en forme : pas d’attribut role = « presentation », possibilité de le saisir manuellement dans le code.
  • Pour les tableaux de données, caption et en-têtes contribuables
  • Pour les tableaux complexes, pas de gestion des couples id/headers, à saisir manuellement dans le code.

Exemple de tableau de mise en forme

Actualités
Création d’une zone bleue en centre ville
Agenda
Foire à tout le 28 juin 2015

Méthode

  • Utiliser la fonctionnalité « Tableau »
  • « Insérer un tableau » avec le nombre de lignes et de colonnes nécessaires (ici 2 colonnes et 2 lignes)
  • Saisir les données dans chaque cellule

Code généré

<table role="presentation">
<tbody>
<tr>
<td><strong>Actualités</strong>
Création d'une zone bleue en centre ville</td>
<td><strong>Agenda</strong>
Foire à tout le 28 juin 2015</td>
</tr>
</tbody>
</table>

Exemple de tableaux de données

Évolution de la population
Année 1962 1968 1975 1982 1990 1999 2008
Population 774 807 1036 1140 1354 1716 1768

Méthode

  • Utiliser la fonctionnalité « Tableau »
  • « Insérer un tableau » avec le nombre de lignes et de colonnes nécessaires (ici 8 colonnes et 2 lignes)
  • Dans « Propriétés du tableau », cocher la case « Légende » pour voir apparaître une zone pour saisir le titre du tableau (caption)
  • Saisir le titre du tableau « Évolution de la population »
  • Saisir les données dans chaque cellule
  • Positionner le curseur sur l’en-tête « Année » et utiliser « Propriétés de la cellule du tableau », choisir « Cellule d’en-tête » pour le type de cellule et « Ligne » pour la portée
  • Même chose pour l’en-tête de ligne « Population »

Code généré

<table><caption>Évolution de la population</caption>
<tbody>
<tr>
<th scope="row">Année</th>
<td>1962</td>
<td>1968</td>
<td>1975</td>
<td>1982</td>
<td>1990</td>
<td>1999</td>
<td>2008</td>
</tr>
<tr>
<th scope="row">Population</th>
<td>774</td>
<td>807</td>
<td>1036</td>
<td>1140</td>
<td>1354</td>
<td>1716</td>
<td>1768</td>
</tr>
</tbody>
</table>

 

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *