Si nous voulons mieux comprendre les tableaux r\u00e9actifs, nous devons d’abord savoir ce que cela signifie lorsque nous disons qu’un design est r\u00e9actif.<\/p>\n
Le design r\u00e9actif est le design qui s’adapte aux \u00e9crans de diff\u00e9rentes tailles. Lorsque nous parlons d’une image ou d’un tableau HTML, tout d\u00e9pend de ce qui se passe lorsque l’\u00e9cran est plus \u00e9troit que la largeur minimale d’un tableau de donn\u00e9es.<\/p>\n
Tableaux r\u00e9actifs dans le cadre d’une conception r\u00e9active<\/strong><\/h3>\nRendre les tableaux r\u00e9actifs a \u00e9t\u00e9 tout un d\u00e9fi depuis l’introduction de la conception Web r\u00e9active<\/a>.<\/p>\nLes tables de donn\u00e9es sont souvent assez larges et une seule ligne de donn\u00e9es doit souvent \u00eatre conserv\u00e9e ensemble si nous voulons qu’elle ait un sens. Bien s\u00fbr, les tables peuvent fl\u00e9chir en largeur, mais est-ce vraiment une solution? Eh bien, cela peut \u00eatre jusqu’au moment o\u00f9 ils commencent \u00e0 envelopper le contenu des cellules d’une mani\u00e8re que nous ne voulons pas qu’ils le fassent. Il y a aussi un point o\u00f9 ils ne peuvent tout simplement pas aller plus loin.<\/p>\n
Heureusement, il existe 3 mod\u00e8les qui peuvent nous aider \u00e0 r\u00e9soudre ce probl\u00e8me :<\/p>\n
\n- \n
Le d\u00e9bordement horizontal<\/strong><\/h3>\n<\/li>\n<\/ol>\nLe tableau de d\u00e9bordement horizontal en HTML peut \u00eatre facilement vu dans son ensemble en faisant simplement d\u00e9filer vers la droite et vers la gauche. Le premier champ est g\u00e9n\u00e9ralement fixe et les autres deviennent visibles lorsque l’utilisateur fait d\u00e9filer le contenu.<\/p>\n
Il y a cependant un inconv\u00e9nient. L’utilisateur peut ne pas savoir ou remarquer que le tableau est d\u00e9filable. Si cela se produit, il y a une chance qu’ils ratent la majeure partie de la table. Pour \u00e9viter que l’utilisateur ne voie le contenu le plus important, les champs cl\u00e9s doivent se trouver dans les 3 premi\u00e8res colonnes.<\/p>\n
\n- \n
Les tables de transition<\/strong><\/h3>\n<\/li>\n<\/ol>\nUn tableau CSS de transition est une bonne solution si vous voulez \u00e9viter le d\u00e9filement qui est la partie n\u00e9cessaire de l’affichage des tableaux de d\u00e9bordement horizontaux.<\/p>\n
Ce qui se passe avec ce tableau, c’est que les titres de champ sont format\u00e9s \u00e0 des points d’arr\u00eat CSS inf\u00e9rieurs \u00e0 un format de ligne au lieu d’une structure de colonne.<\/p>\n
Malheureusement, il y a aussi un inconv\u00e9nient. Une table de transition CSS diminue la capacit\u00e9 d’analyse et la comparaison des champs.<\/p>\n
\n- \n
Les tables de priorit\u00e9<\/strong><\/h3>\n<\/li>\n<\/ol>\nLes tableaux de priorit\u00e9 masquent simplement les champs sur les tailles d’\u00e9cran inf\u00e9rieures. Les tableaux ainsi format\u00e9s sont g\u00e9n\u00e9ralement beaux, mais les probl\u00e8mes surviennent si les champs omis \u00e9taient, en fait, les plus importants.<\/p>\n
Approches de table r\u00e9actives<\/strong><\/h3>\nIl existe plusieurs fa\u00e7ons de cr\u00e9er des tableaux r\u00e9actifs.<\/p>\n
\n- Squash<\/strong> \u2013 vous pouvez \u00e9craser le tableau HTML horizontalement en d\u00e9pla\u00e7ant la bordure du tableau HTML s’il n’y a pas beaucoup de contenu dans les colonnes. En faisant cela, vous pouvez \u00e9viter de changer toute la disposition de votre tableau<\/li>\n
- D\u00e9filement vertical<\/strong> – si vous voulez \u00e9viter de modifier le contenu et\/ou la mise en page de votre tableau, les utilisateurs peuvent faire d\u00e9filer vers la gauche et la droite pour voir le tableau complet<\/li>\n
- R\u00e9duire par lignes<\/strong> – vous pouvez transformer votre tableau en plusieurs tableaux plus petits en divisant chaque ligne en sa propre colonne unique<\/li>\n
- \n
R\u00e9duire par colonnes<\/strong> – vous devez apprendre le HTML pour le faire car cette partie est un peu d\u00e9licate. Dans les tableaux de style CSS, l’ordre du code se fait par lignes de tableau et les
\nwrappers verrouill\u00e9s. Si vous souhaitez r\u00e9duire votre tableau par colonnes, vous devez soit manipuler avec JavaScript, soit modifier le balisage.<\/p>\nChoses \u00e0 \u00e9viter lors de la construction d’un tableau r\u00e9actif<\/strong><\/h3>\nLes gens ont essay\u00e9 de nombreuses m\u00e9thodes diff\u00e9rentes pour cr\u00e9er des tableaux r\u00e9actifs et en voici quelques-uns qui ne sont pas particuli\u00e8rement efficaces. Vous devriez probablement les \u00e9viter compl\u00e8tement.<\/p>\n
\n- \n
\n- Utiliser JavaScript pour g\u00e9n\u00e9rer un deuxi\u00e8me tableau plus \u00e9troit, puis masquer et afficher alternativement par point d’arr\u00eat. Cette m\u00e9thode divisera les identifiants uniques dans les tables.<\/li>\n
- Utilisation de JavaScript et du balisage de tableau normal lors d’une rupture pour r\u00e9organiser le tableau. Les tableaux horizontaux et verticaux n\u00e9cessitent des balisages diff\u00e9rents tandis que cette m\u00e9thode n\u00e9cessite \u00e9galement une manipulation DOM et de nombreux \u00e9couteurs d’\u00e9v\u00e9nements JS.<\/li>\n
- Conserver le balisage du tableau et passer \u00e0 display:flex pour le contenu du tableau align\u00e9 verticalement.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
REMARQUE\u00a0: si tout ce qui pr\u00e9c\u00e8de semble trop compliqu\u00e9 pour \u00eatre m\u00eame essay\u00e9, ne vous d\u00e9couragez pas. Il existe des moyens plus simples de cr\u00e9er des tableaux r\u00e9actifs. Vous pouvez visiter w3schools.com pour plus de conseils utiles (w3schools HTML offre une vari\u00e9t\u00e9 d’explications d’aide HTML pour les cr\u00e9ateurs de sites Web). Jetons donc un coup d’\u0153il \u00e0 certains des outils qui pourraient vous \u00eatre utiles.<\/p>\n
Comment cr\u00e9er des tableaux r\u00e9actifs<\/strong><\/h2>\nPour WordPress<\/h3>\nwpDataTables<\/a><\/h4>\n
Les tables de donn\u00e9es sont souvent assez larges et une seule ligne de donn\u00e9es doit souvent \u00eatre conserv\u00e9e ensemble si nous voulons qu’elle ait un sens. Bien s\u00fbr, les tables peuvent fl\u00e9chir en largeur, mais est-ce vraiment une solution? Eh bien, cela peut \u00eatre jusqu’au moment o\u00f9 ils commencent \u00e0 envelopper le contenu des cellules d’une mani\u00e8re que nous ne voulons pas qu’ils le fassent. Il y a aussi un point o\u00f9 ils ne peuvent tout simplement pas aller plus loin.<\/p>\n
Heureusement, il existe 3 mod\u00e8les qui peuvent nous aider \u00e0 r\u00e9soudre ce probl\u00e8me :<\/p>\n
- \n
- \n
Le d\u00e9bordement horizontal<\/strong><\/h3>\n<\/li>\n<\/ol>\n
Le tableau de d\u00e9bordement horizontal en HTML peut \u00eatre facilement vu dans son ensemble en faisant simplement d\u00e9filer vers la droite et vers la gauche. Le premier champ est g\u00e9n\u00e9ralement fixe et les autres deviennent visibles lorsque l’utilisateur fait d\u00e9filer le contenu.<\/p>\n
Il y a cependant un inconv\u00e9nient. L’utilisateur peut ne pas savoir ou remarquer que le tableau est d\u00e9filable. Si cela se produit, il y a une chance qu’ils ratent la majeure partie de la table. Pour \u00e9viter que l’utilisateur ne voie le contenu le plus important, les champs cl\u00e9s doivent se trouver dans les 3 premi\u00e8res colonnes.<\/p>\n
- \n
- \n
Les tables de transition<\/strong><\/h3>\n<\/li>\n<\/ol>\n
Un tableau CSS de transition est une bonne solution si vous voulez \u00e9viter le d\u00e9filement qui est la partie n\u00e9cessaire de l’affichage des tableaux de d\u00e9bordement horizontaux.<\/p>\n
Ce qui se passe avec ce tableau, c’est que les titres de champ sont format\u00e9s \u00e0 des points d’arr\u00eat CSS inf\u00e9rieurs \u00e0 un format de ligne au lieu d’une structure de colonne.<\/p>\n
Malheureusement, il y a aussi un inconv\u00e9nient. Une table de transition CSS diminue la capacit\u00e9 d’analyse et la comparaison des champs.<\/p>\n
- \n
- \n
Les tables de priorit\u00e9<\/strong><\/h3>\n<\/li>\n<\/ol>\n
Les tableaux de priorit\u00e9 masquent simplement les champs sur les tailles d’\u00e9cran inf\u00e9rieures. Les tableaux ainsi format\u00e9s sont g\u00e9n\u00e9ralement beaux, mais les probl\u00e8mes surviennent si les champs omis \u00e9taient, en fait, les plus importants.<\/p>\n
Approches de table r\u00e9actives<\/strong><\/h3>\n
Il existe plusieurs fa\u00e7ons de cr\u00e9er des tableaux r\u00e9actifs.<\/p>\n
- \n
- Squash<\/strong> \u2013 vous pouvez \u00e9craser le tableau HTML horizontalement en d\u00e9pla\u00e7ant la bordure du tableau HTML s’il n’y a pas beaucoup de contenu dans les colonnes. En faisant cela, vous pouvez \u00e9viter de changer toute la disposition de votre tableau<\/li>\n
- D\u00e9filement vertical<\/strong> – si vous voulez \u00e9viter de modifier le contenu et\/ou la mise en page de votre tableau, les utilisateurs peuvent faire d\u00e9filer vers la gauche et la droite pour voir le tableau complet<\/li>\n
- R\u00e9duire par lignes<\/strong> – vous pouvez transformer votre tableau en plusieurs tableaux plus petits en divisant chaque ligne en sa propre colonne unique<\/li>\n
- \n
R\u00e9duire par colonnes<\/strong> – vous devez apprendre le HTML pour le faire car cette partie est un peu d\u00e9licate. Dans les tableaux de style CSS, l’ordre du code se fait par lignes de tableau et les
\nwrappers verrouill\u00e9s. Si vous souhaitez r\u00e9duire votre tableau par colonnes, vous devez soit manipuler avec JavaScript, soit modifier le balisage.<\/p>\nChoses \u00e0 \u00e9viter lors de la construction d’un tableau r\u00e9actif<\/strong><\/h3>\n
Les gens ont essay\u00e9 de nombreuses m\u00e9thodes diff\u00e9rentes pour cr\u00e9er des tableaux r\u00e9actifs et en voici quelques-uns qui ne sont pas particuli\u00e8rement efficaces. Vous devriez probablement les \u00e9viter compl\u00e8tement.<\/p>\n
- \n
- \n
- \n
- Utiliser JavaScript pour g\u00e9n\u00e9rer un deuxi\u00e8me tableau plus \u00e9troit, puis masquer et afficher alternativement par point d’arr\u00eat. Cette m\u00e9thode divisera les identifiants uniques dans les tables.<\/li>\n
- Utilisation de JavaScript et du balisage de tableau normal lors d’une rupture pour r\u00e9organiser le tableau. Les tableaux horizontaux et verticaux n\u00e9cessitent des balisages diff\u00e9rents tandis que cette m\u00e9thode n\u00e9cessite \u00e9galement une manipulation DOM et de nombreux \u00e9couteurs d’\u00e9v\u00e9nements JS.<\/li>\n
- Conserver le balisage du tableau et passer \u00e0 display:flex pour le contenu du tableau align\u00e9 verticalement.<\/li>\n<\/ol>\n<\/li>\n<\/ol>\n
REMARQUE\u00a0: si tout ce qui pr\u00e9c\u00e8de semble trop compliqu\u00e9 pour \u00eatre m\u00eame essay\u00e9, ne vous d\u00e9couragez pas. Il existe des moyens plus simples de cr\u00e9er des tableaux r\u00e9actifs. Vous pouvez visiter w3schools.com pour plus de conseils utiles (w3schools HTML offre une vari\u00e9t\u00e9 d’explications d’aide HTML pour les cr\u00e9ateurs de sites Web). Jetons donc un coup d’\u0153il \u00e0 certains des outils qui pourraient vous \u00eatre utiles.<\/p>\n
Comment cr\u00e9er des tableaux r\u00e9actifs<\/strong><\/h2>\n
Pour WordPress<\/h3>\n
wpDataTables<\/a><\/h4>\n
- D\u00e9filement vertical<\/strong> – si vous voulez \u00e9viter de modifier le contenu et\/ou la mise en page de votre tableau, les utilisateurs peuvent faire d\u00e9filer vers la gauche et la droite pour voir le tableau complet<\/li>\n
- Squash<\/strong> \u2013 vous pouvez \u00e9craser le tableau HTML horizontalement en d\u00e9pla\u00e7ant la bordure du tableau HTML s’il n’y a pas beaucoup de contenu dans les colonnes. En faisant cela, vous pouvez \u00e9viter de changer toute la disposition de votre tableau<\/li>\n
- \n
- \n
![\"Tableaux](\"https:\/\/wordpress.mediadoma.com\/wp-content\/uploads\/2022\/01\/post-200973-61e8bd6a5ae22.jpg\")
<\/a><\/p>\n