{"id":8251,"date":"2025-04-06T22:51:14","date_gmt":"2025-04-06T22:51:14","guid":{"rendered":"https:\/\/tableberg.com\/?p=8251"},"modified":"2025-04-26T16:32:24","modified_gmt":"2025-04-26T16:32:24","slug":"comment-creer-des-tableaux-empilables-dans-wordpress","status":"publish","type":"post","link":"https:\/\/tableberg.com\/fr\/how-to-create-stackable-tables-in-wordpress\/","title":{"rendered":"Comment cr\u00e9er des tableaux empilables dans WordPress"},"content":{"rendered":"

Les tableaux standard fonctionnent g\u00e9n\u00e9ralement bien sur les ordinateurs de bureau. Vous pouvez voir que tout est bien en place et que la mise en page reste propre. Mais lorsqu'ils sont affich\u00e9s sur un t\u00e9l\u00e9phone ou une tablette, ces m\u00eames tableaux se d\u00e9gradent souvent. Ils s'\u00e9tirent trop, obligeant les utilisateurs \u00e0 faire d\u00e9filer l'\u00e9cran lat\u00e9ralement pour lire une seule ligne. <\/p>\n\n\n\n

Les tableaux empilables r\u00e9solvent ce probl\u00e8me en transformant chaque ligne en un bloc vertical d'informations. Au lieu d'afficher les donn\u00e9es sur une seule ligne, le contenu s'empile les uns sur les autres, ce qui facilite la compr\u00e9hension du tableau sur les petits \u00e9crans.<\/p>\n\n\n\n

Cette disposition n'est cependant pas utile sur un ordinateur de bureau. Si l'espace disponible est suffisant, les tableaux normaux sont plus faciles \u00e0 parcourir et plus efficaces. Les tableaux empilables sont principalement con\u00e7us pour am\u00e9liorer la lisibilit\u00e9 sur les appareils mobiles, et non pour remplacer les tableaux standard sur toutes les tailles d'\u00e9cran.<\/p>\n\n\n\n

Dans cet article, nous allons vous expliquer comment cr\u00e9er un tableau empilable \u00e0 l'aide du plugin Tableberg et l'adapter aux \u00e9crans mobiles.<\/p>\n\n\n\n

\n\n\n\n

Qu'est-ce qu'une table empilable ?<\/strong><\/h2>\n\n\n\n

Un tableau empilable est une version r\u00e9active d'un tableau normal qui adapte sa mise en page aux \u00e9crans plus petits. Sur les ordinateurs de bureau, un tableau peut se pr\u00e9senter sous la forme d'une grille standard avec des lignes et des colonnes. Mais sur les appareils mobiles, les tableaux larges sont souvent difficiles \u00e0 lire et n\u00e9cessitent un d\u00e9filement horizontal. Les tableaux empilables permettent de rem\u00e9dier \u00e0 ce probl\u00e8me en transformant chaque ligne en un bloc vertical, o\u00f9 les \u00e9tiquettes des colonnes sont affich\u00e9es au-dessus de chaque valeur. Le contenu est ainsi plus facile \u00e0 lire et \u00e0 faire d\u00e9filer sur des \u00e9crans \u00e9troits, sans perte d'informations. Dans la plupart des cas, cela se fait \u00e0 l'aide de CSS ou de plugins qui prennent en charge les mises en page de tableaux r\u00e9actifs. Les meilleurs r\u00e9sultats sont obtenus en utilisant des plugins avec des param\u00e8tres mobiles int\u00e9gr\u00e9s ou des classes utilitaires qui d\u00e9tectent la largeur de l'\u00e9cran. Mais il est pr\u00e9f\u00e9rable de garder \u00e0 l'esprit qu'avant d'appliquer l'empilement, vous devez v\u00e9rifier le nombre de colonnes dont vous disposez et si le contenu reste lisible. <\/p>\n\n\n\n

\n\n\n\n

Cr\u00e9er des tableaux empilables dans WordPress<\/strong><\/h2>\n\n\n\n

Pour montrer comment fonctionnent les tableaux empilables dans WordPress, nous utiliserons la fonction Tableberg <\/a>. Il est simple \u00e0 utiliser, prend en charge tous les types de contenu \u00e0 l'int\u00e9rieur des cellules du tableau et comprend des param\u00e8tres int\u00e9gr\u00e9s pour l'empilement des tableaux sur mobile. Passons aux \u00e9tapes suivantes. <\/p>\n\n\n\n

\u00c9tape 1 : Installer et activer Tableberg<\/strong><\/h3>\n\n\n\n

Dans votre tableau de bord WordPress, s\u00e9lectionnez Plugins<\/strong> \u2192 Ajouter un nouveau<\/strong>, puis rechercher Tableberg<\/strong>. Cliquez sur Installer maintenant<\/strong>et une fois install\u00e9, cliquez sur Activer <\/strong>pour commencer \u00e0 l'utiliser sur votre site.<\/p>\n\n\n\n

\"<\/figure>\n\n\n\n
\n\n\n\n

\u00c9tape 2 : Ins\u00e9rer un tableau<\/strong><\/h3>\n\n\n\n

Ouvrez l'article ou la page o\u00f9 vous souhaitez afficher le tableau. Utilisez le bouton Insertion de blocs (bouton +)<\/strong>, rechercher \"Tableberg\", <\/strong>et ins\u00e9rez-le. Vous serez invit\u00e9 \u00e0 choisir le nombre de lignes et de colonnes en fonction du type de tableau que vous souhaitez cr\u00e9er.<\/p>\n\n\n\n

\"Ins\u00e9rer<\/figure>\n\n\n\n
\n\n\n\n

\u00c9tape 3 : Ajouter du contenu au tableau<\/strong><\/h3>\n\n\n\n

Cliquez dans chaque cellule et commencez \u00e0 remplir votre contenu. Vous pouvez ajouter du texte, des images, des ic\u00f4nes, des \u00e9toiles, des boutons, des rubans ou des listes - Tableberg prend en charge plusieurs types de blocs dans chaque cellule.<\/p>\n\n\n\n

\"Ajouter<\/figure>\n\n\n\n
\n\n\n\n

\u00c9tape 4 : Activer le mode d'empilement r\u00e9actif<\/strong><\/h3>\n\n\n\n

Pour appliquer des param\u00e8tres r\u00e9actifs, vous devez d'abord s\u00e9lectionner l'ensemble du tableau. Cliquez sur le bord ext\u00e9rieur d'une cellule individuelle et, lorsque la barre d'outils appara\u00eet, s\u00e9lectionnez l'ic\u00f4ne de la table. Cela permet de s'assurer que l'ensemble du tableau est s\u00e9lectionn\u00e9.<\/p>\n\n\n\n

\"S\u00e9lectionner<\/figure>\n\n\n\n

Lorsque le tableau complet est s\u00e9lectionn\u00e9, consultez le panneau des param\u00e8tres du bloc de droite. Faites d\u00e9filer vers le bas jusqu'\u00e0 ce que vous trouviez la section intitul\u00e9e \"Responsive Settings\" (param\u00e8tres r\u00e9actifs). Activez l'option qui permet au tableau de s'adapter aux \u00e9crans des t\u00e9l\u00e9phones portables et des tablettes.<\/p>\n\n\n\n

\"Activer<\/figure>\n\n\n\n

\u00c9tape 5 : Choisir le mode pile et configurer le comportement<\/strong><\/h3>\n\n\n\n

Apr\u00e8s avoir activ\u00e9 le mode r\u00e9actif, vous pourrez choisir la mani\u00e8re dont le tableau s'adapte. Choisissez Pile<\/strong> au lieu de Parchemin<\/strong>. Cela transforme chaque ligne du tableau en un bloc vertical pour faciliter la visualisation sur les petits \u00e9crans.<\/p>\n\n\n\n

\"Choisir<\/figure>\n\n\n\n
\n\n\n\n

\u00c9tape 6 : Utiliser les fonctions avanc\u00e9es de la pile<\/strong><\/h3>\n\n\n\n

Sous la s\u00e9lection du mode, vous pouvez activer Transformer les lignes en colonnes<\/strong> si vous souhaitez que le tableau change de sens de pr\u00e9sentation. Vous trouverez \u00e9galement l'option Afficher la premi\u00e8re colonne de chaque rang\u00e9e de piles,<\/strong> ce qui est utile lorsque la premi\u00e8re colonne contient des \u00e9tiquettes. Enfin, vous pouvez d\u00e9finir le nombre d'\u00e9l\u00e9ments \u00e0 afficher par ligne de pile.<\/p>\n\n\n\n

\"Utiliser<\/figure>\n\n\n\n
\n\n\n\n

\u00c9tape 7 : Pr\u00e9visualisation et finalisation<\/strong><\/h3>\n\n\n\n

Cliquez sur le bouton Aper\u00e7u et v\u00e9rifiez la mise en page en vue mobile et tablette. Si tout semble correct, allez-y et publiez ou mettez \u00e0 jour votre article.<\/p>\n\n\n\n

\"Pr\u00e9visualisation<\/figure>\n\n\n\n
\n\n\n\n

Conclusion<\/strong><\/h3>\n\n\n\n

Les tableaux empilables sont une solution pratique pour faciliter la lecture du contenu sur les t\u00e9l\u00e9phones et les tablettes, en particulier lorsque vous travaillez avec des tableaux simples ou de taille mod\u00e9r\u00e9e. Toutefois, lorsqu'un tableau comporte trop de colonnes, le format empil\u00e9 peut devenir long et difficile \u00e0 parcourir. Dans ce cas, d'autres techniques telles que le filtrage ou le masquage des colonnes peuvent s'av\u00e9rer plus efficaces. N\u00e9anmoins, pour la plupart des cas d'utilisation quotidienne, l'empilement constitue un moyen propre et fiable de rendre vos tableaux compatibles avec les appareils mobiles. Dans cet article, nous vous montrons exactement comment en cr\u00e9er un avec Tableberg, de l'installation \u00e0 la pr\u00e9visualisation finale.<\/p>\n\n\n\n

<\/p>","protected":false},"excerpt":{"rendered":"

Standard tables typically work well on desktops. You can see everything fits in place, and the layout stays clean. But when viewed on a phone or a tablet, those same tables often break down. They stretch too wide, forcing users to scroll sideways just to read a single row. Stackable tables solve this problem by […]<\/p>\n","protected":false},"author":9,"featured_media":8256,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_eb_attr":"","footnotes":""},"categories":[7,130],"tags":[],"class_list":["post-8251","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-how-to","category-tableberg"],"featured_image_src":"https:\/\/tableberg.com\/wp-content\/uploads\/2025\/04\/Stacked-Table-850-x-335-px.png","author_info":{"display_name":"Moinul Islam","author_link":"https:\/\/tableberg.com\/fr\/author\/marufmoinul27\/"},"_links":{"self":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/8251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/comments?post=8251"}],"version-history":[{"count":4,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/8251\/revisions"}],"predecessor-version":[{"id":8300,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/posts\/8251\/revisions\/8300"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media\/8256"}],"wp:attachment":[{"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/media?parent=8251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/categories?post=8251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/tableberg.com\/fr\/wp-json\/wp\/v2\/tags?post=8251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}