User Documentation
Télécharger
Lancer

Article : Modifier - Tableaux

À propos des tableaux

En HTML, les tableaux sont constitués de lignes et de colonnes de cellules. Par exemple, un tableau simple peut comporter 4 lignes et 4 colonnes, soit 16 cellules. Cependant, les cellules peuvent être combinées horizontalement ou verticalement pour créer des structures de tableau assez complexes. Les tableaux ont également des caractéristiques moins évidentes telles qu'un en-tête, un corps, un pied de page et des légendes. Les tableaux peuvent être imbriqués!

Par défaut, les cellules d'un tableau s'agrandissent pour s'adapter à leur contenu. Le seul style provient du balisage du tableau : par défaut, les cellules d'en-tête (<th>) ont un texte en gras et centré, tandis que les cellules de données (<td>) ont un texte normal, aligné à gauche.

L'utilisation des tableaux doit être réservée aux données strictement tabulaires, comme un emploi du temps ou un calendrier, où il est important de conserver la structure en lignes et en colonnes. Les tableaux ne doivent pas être utilisés pour la mise en page, comme le placement d'images ou de texte côte à côte.

Vous trouverez plus d'informations dans les articles suivants :

Les tableaux posent un dilemme ! Si vous insérez un tableau à l'aide des outils de tableau de TinyMCE, le tableau aura un bel aspect dans l'écran d'édition et sur le site, mais la mise en page est réalisée avec des styles css en ligne qui peuvent être volumineux et difficiles à modifier. Si le tableau est inséré en html pur, le résultat n'a pas un bel aspect dans l'éditeur de texte TinyMCE, mais il peut profiter des classes Bootstrap et avoir un bien meilleur rendu sur le site. Les deux méthodes sont présentées ci-dessous.

Insérer un tableau avec les outils TinyMCE

Pour commencer avec un tableau :

  • Ouvrir l'article que vous souhaitez modifier.
  • Placer le curseur sur une ligne vide à l'endroit où le tableau doit apparaître.
  • Sélectionner le bouton Tableau dans la première rangée d'outils de TinyMCE.
  • Dans le menu déroulant, sélectionner Tableau, puis déplacer le curseur pour définir le nombre de lignes et de colonnes. Les flèches du clavier fonctionnent également pour cela.
  • Sélectionner la dernière cellule de la matrice 4x4.
  • Remplir les cellules du tableau.

Paramètres de modification :

  • Vous pouvez insérer une ligne au-dessus ou en dessous d'une cellule sélectionnée.
  • Vous pouvez insérer une colonne avant ou après une cellule sélectionnée.
  • Vous pouvez supprimer une ligne ou une colonne.
  • Vous pouvez faire glisser les bordures de colonnes pour modifier leur largeur ou leur hauteur.
  • Vous pouvez fusionner des cellules - faites glisser sur les cellules pour les sélectionner, puis utilisez Tableau -> Cellule -> Fusionner les cellules.
  • Vous pouvez sélectionner les propriétés du tableau, y compris la largeur, le style et la couleur de la bordure, ainsi que la couleur de fond.

Si vous utilisez le bouton Afficher le code source, vous verrez que la mise en page est réalisée avec des déclarations de style en ligne sur chaque ligne et chaque cellule. Voici un court exemple"

<table style="border-collapse: collapse; width: 100%; height: 96px;" border="1"><colgroup><col style="width: 24.9735%;"><col style="width: 24.9735%;"><col style="width: 24.9735%;"><col style="width: 24.9735%;"></colgroup>
<tbody>
<tr style="height: 24px;">
<td style="height: 24px;">Day</td>
<td style="height: 24px;">Morning</td>
<td style="height: 24px;">Afternoon</td>
<td style="height: 24px;">Evening</td>
</tr>
<tr style="height: 24px;">
<td style="height: 24px;">Tuesday</td>
<td style="height: 24px;">Welcome</td>
<td style="height: 24px;">Presentations</td>
<td style="height: 24px;">BBQ</td>
</tr>
...
</tbody>
</table>

Insérer un tableau en HTML

Si vous préférez, vous pouvez vous passer des styles en ligne et utiliser des classes Bootstrap. Vous devrez alors modifier le tableau créé par les outils de tableau de TinyMCE ou le saisir vous-même. Cela ressemblerait à ceci :

<div class="table-responsive">
<table class="table table-striped table-bordered table-group-divider">
<thead>
<tr>
<th>Day</th>
<th>Morning</th>
<th>Afternoon</th>
<th>Evening</th>
</tr>
</thead>
<tbody class="table-group-divider">
<tr>
<th>Tuesday</th>
<td>Welcome</td>
<td>Presentations</td>
<td>BBQ</td>
</tr>
...
</tbody>
</table>
</div>

Ici, les classes Bootstrap ont les effets suivants :

  • table - applique plusieurs styles pour donner une mise en forme de tableau standard agréable.
  • table-striped - les lignes alternent entre claires et sombres.
  • table-bordered - applique des bordures aux cellules.
  • table-group-divider - applique une ligne en gras au-dessus d'un élément.
  • table-responsive - permet à un large tableau de défiler horizontalement.

La capture d'écran suivante du Site montre un tableau pour un programme de conférence avec les styles en ligne par défaut de TinyMCE et un tableau similaire avec les styles Bootstrap :

Example tables

Consultez la documentation Bootstrap sur les Tableaux pour plus de paramètres.

Réflexion complémentaire

Vous pourriez placer le code HTML d'un tableau dans un module personnalisé et inclure ce module dans l'article. Dans l'article, cela apparaît sous la forme {loadmoduleid xx} où xx est l'Id du module.