# Tableau 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é 1. Dans l’éditeur, ouvrez l’inserteur et choisissez **Tableau avancé**. [Ajouter un bloc](https://lovelyrender.com/fr/documentation/ajouter-un-bloc/) détaille les façons d’insérer un bloc. 2. Indiquez le nombre de **Rangées** et de **Colonnes**, 1 au minimum. 3. Activez si besoin **Rangée d’en-tête**, **Rangée de pied** et **Légende**. 4. Cliquez sur **Créer le tableau**. Le tableau apparaît, prêt à être rempli. ![L’écran de départ d’un Tableau avancé : Indiquez le nombre de rangées et de colonnes au départ, les champs Rangées et Colonnes à 3, les interrupteurs Rangée d’en-tête, Rangée de pied et Légende, puis le bouton Créer le tableau.](https://static.lovelyrender.com/uploads/2026/10/888-doc-blocs-tableau.png) ## 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. **Remarque :** Une cellule fusionnée vers le bas qui descend sur la rangée ajoutée n’est pas décomptée : la nouvelle rangée peut avoir une cellule de trop. Insérez la rangée au-dessus ou au-dessous de la zone fusionnée. ## 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 | **Attention :** Désactiver une section la retire avec son contenu. Le panneau affiche ce rappel : **Désactiver une section la retire avec son contenu.** Le corps du tableau ne se retire pas. ### 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. 1. Sélectionnez le tableau et ouvrez l’onglet **Styles**. 2. Choisissez l’état **Impair** dans la rangée des états. 3. 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](https://lovelyrender.com/fr/documentation/catalogue-de-design/)). | Panneau | Guide | | --- | --- | | **Couleurs** | [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/) | | **Typographie** | [Mettre en forme un texte](https://lovelyrender.com/fr/documentation/typographie/) | | **Taille et espacement**, **Bordures**, **Effets**, **Transitions** | [Régler la taille, les bordures et les effets](https://lovelyrender.com/fr/documentation/taille-bordures-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](https://lovelyrender.com/fr/documentation/bloc-conteneur/) qui l’entoure. Le **Tableau** de WordPress a un onglet **Animations** ([Animer un bloc](https://lovelyrender.com/fr/documentation/animations/)). ## 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](https://lovelyrender.com/fr/documentation/bloc-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](https://lovelyrender.com/fr/documentation/bloc-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é. ## Voir aussi - [Conteneur](https://lovelyrender.com/fr/documentation/bloc-conteneur/) - [Colorer un bloc](https://lovelyrender.com/fr/documentation/couleurs-d-un-bloc/) - [Adopter un design du catalogue](https://lovelyrender.com/fr/documentation/catalogue-de-design/)