L’éditeur propose le Tableau avancé de Lovely Render et le Tableau de WordPress. Cette page décrit la création d’un tableau avancé, ses rangées, ses colonnes, ses cellules fusionnées et ses sections, puis le zébrage des deux tableaux.
Choisir un tableau
L’éditeur propose deux tableaux. Ils se règlent dans les mêmes onglets, avec les états Impair et Pair pour colorer une rangée sur deux.
| Bloc | Usage |
|---|---|
| Tableau avancé | Un tableau à sections (légende, en-tête, corps, pied), à cellules fusionnées et à cellules qui portent d’autres blocs : tarifs, comparatifs ou horaires. Chaque rangée et chaque cellule s’habille à part. |
| Tableau | Le tableau de WordPress, gardé tel quel, avec les onglets de Lovely Render et une animation. |
Créer un tableau avancé
- Dans l’éditeur, ouvrez l’inserteur et choisissez Tableau avancé. Ajouter un bloc détaille les façons d’insérer un bloc.
- Indiquez le nombre de Rangées et de Colonnes, 1 au minimum.
- Activez si besoin Rangée d’en-tête, Rangée de pied et Légende.
- Cliquez sur Créer le tableau. Le tableau apparaît, prêt à être rempli.
Modifier les rangées
Cliquez dans une cellule. Sa barre d’outils porte les boutons des rangées.
| Bouton | Effet |
|---|---|
| Insérer une rangée au-dessus, Insérer une rangée en dessous | Ajoute une rangée qui reçoit le même nombre de cellules que sa voisine, en-têtes compris. La sélection reste sur la rangée d’origine. |
| Supprimer la rangée | Retire la rangée. Inactif sur la dernière rangée d’une section. |
Sur une rangée sélectionnée, Ctrl+Alt+T et Ctrl+Alt+Y ajoutent une rangée avant ou après elle.
Modifier les colonnes
| Bouton | Effet |
|---|---|
| Insérer une colonne avant | Ajoute une colonne vide à gauche de la cellule, dans toutes les sections. |
| Insérer une colonne après | Ajoute une colonne vide à droite de la cellule. |
| Supprimer la colonne | Retire la colonne de la cellule. Inactif sur la dernière colonne. |
Une cellule fusionnée vers le bas qui croise la colonne ajoutée s’élargit au lieu de recevoir une cellule de plus.
Fusionner des cellules
| Bouton | Effet |
|---|---|
| Fusionner avec la cellule de droite | La cellule s’élargit et absorbe sa voisine de droite. |
| Fusionner avec la cellule du dessous | La cellule s’allonge et absorbe sa voisine du dessous. |
| Séparer la cellule | Rend autant de cellules simples que la cellule fusionnée en couvrait. Inactif sur une cellule simple. |
Si la cellule absorbée porte un contenu que la fusion perdrait, l’éditeur demande L’autre cellule porte du contenu qui sera perdu. Fusionner quand même ?, avec Fusionner quand même et Annuler.
Si vous déplacez une cellule d’une rangée à l’autre, des rangées peuvent devenir plus courtes que les autres. L’avis Rangées inégales apparaît alors, avec le bouton Rééquilibrer automatiquement, qui ajoute des cellules vides au bout des rangées courtes.
Onglet Réglages
Panneau Structure du tableau
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Légende | Affiche la légende au-dessus du tableau. Elle s’écrit dans la case Légende du tableau…. | Selon l’écran de départ |
| En-tête (thead) | Affiche la section d’en-tête, dont les cellules titrent les colonnes. | Selon l’écran de départ |
| Pied (tfoot) | Affiche la section de pied, pour un total ou une note. | Selon l’écran de départ |
Panneau Cellule
| Réglage | Effet | Valeur par défaut |
|---|---|---|
| Contenu avancé (blocs) | Désactivé : un champ de texte enrichi. Activé : la cellule accepte des blocs, paragraphe, liste, titre, Bloc simple, média, bouton ou icône. | Désactivé |
| Cellule d’en-tête (th) | Fait de la cellule un en-tête. | Désactivé, activé dans l’en-tête |
| Portée | L’objet que l’en-tête titre : Colonne, Rangée, Groupe de colonnes ou Groupe de rangées. Affiché pour une cellule d’en-tête. | Colonne |
Passer une cellule en contenu avancé range son texte dans un paragraphe. Revenir au texte enrichi aplatit ses paragraphes en lignes.
Onglet Styles
Le Tableau avancé se règle dans les états Par défaut, Survol, Impair, Pair et Actif. Impair habille les rangées 1, 3, 5 du corps, Pair les rangées 2, 4, 6.
- Sélectionnez le tableau et ouvrez l’onglet Styles.
- Choisissez l’état Impair dans la rangée des états.
- Dans le panneau Couleurs, donnez un fond léger. Une rangée sur deux prend ce fond.
Sans réglage, le tableau porte le style Tableau, qui teinte les rangées impaires. Chaque cellule porte le style Cellule de tableau, une bordure fine et un espacement intérieur. La partie Tableaux du catalogue de design donne une allure à tous les tableaux avancés du site : Encadré zébré, Encadré, Lignes zébrées, Lignes, Zébré ou Sans bordure (Adopter un design du catalogue).
| Panneau | Guide |
|---|---|
| Couleurs | Colorer un bloc |
| Typographie | Mettre en forme un texte |
| Taille et espacement, Bordures, Effets, Transitions | Régler la taille, les bordures et les effets |
La légende, chaque section, chaque rangée et chaque cellule ont ces panneaux, dans les états Par défaut, Survol et Actif.
Onglet Animations
Le Tableau avancé et ses parties n’ont pas d’onglet Animations : pour faire apparaître le tableau, animez le Conteneur qui l’entoure. Le Tableau de WordPress a un onglet Animations (Animer un bloc).
Le tableau de WordPress
Le bloc Tableau garde la saisie de WordPress. Lovely Render lui ajoute les panneaux Couleurs, Typographie, Taille et espacement, Bordures, Effets et Transitions. Le bloc reçoit les états Par défaut, Survol, Impair, Pair et Actif, les styles enregistrés, l’onglet Animations et le panneau Avancé avec son Ancre HTML. Le catalogue de design ne le change pas : un tableau de WordPress garde son allure.
Sur téléphone
Le tableau n’a pas de défilement à lui. Pour qu’un tableau large défile sur le côté dans son cadre sur un téléphone, rangez-le dans un Conteneur. Dans le panneau Taille et espacement du conteneur, réglez le Débordement sur Auto.
Accessibilité
- Marquez les cellules qui titrent une colonne ou une rangée comme Cellule d’en-tête (th) et réglez leur Portée. Un lecteur d’écran annonce alors le titre de la colonne avec chaque cellule.
- Une Légende donne son nom au tableau pour les lecteurs d’écran.
- N’utilisez pas un tableau pour mettre des blocs côte à côte : un Conteneur en grille le fait sans annoncer de tableau.
Limites
- Un tableau a toujours au moins une rangée dans son corps et une colonne.
- Les sections se créent et se retirent seulement par le panneau Structure. Elles ne se dupliquent pas.
- Le + d’une cellule ne s’affiche que quand la cellule ou l’un de ses blocs est sélectionné.