Tableau responsive design sur Joomla! avec l'extension Responsive Tables

Tableau responsive design sur Joomla! avec l'extension Responsive Tables

Aujourd'hui, lors de la création d'un site web, il est important de s'assurer que ce site web sera accessible sur tous les supports utilisés par vos visiteurs.

Nous pourrions évoquer les différents tests à effectuer sur les différents navigateurs présents sur le marché. Mais ce n'est pas le sujet de ce billet, ici nous allons nous concentrer sur l'aspect responsive design de notre site web, c'est-à-dire la façon dont il va s'afficher sur les ordinateurs de bureau, les ordinateurs portables, les tablettes et les smartphones, et plus particulièrement sur l'affichage des tableaux qui viennent illustrer les contenus.

Les utilisateurs de smartphones et tablettes sont de plus en plus nombreux (autour de 25% des connexions selon les sources), vous ne pouvez donc pas ignorer ces utilisateurs.

 

Tableau et Joomla!

Grâce à votre éditeur de texte (par exemple TinyMCE ou JCE) vous pouvez facilement créer des tableaux. Mais si vous affichez votre article sur une tablette ou un smartphone, votre tableau ne sera pas affiché correctement :

Tableau Joomla!

Tableau de l'article Installer Joomla!

Ce que nous allons voir dans ce tutoriel, est une façon pour rendre ce tableau responsive design.

 

Responsive Tables

Responsives Tables est une extension qui permet donc de rendre responsive les tableaux présents dans les contenus Joomla!, et cela très simplement. Cette extension est référencée sur le JED et est accessible pour 5€ sur le site de l'auteur.

 

Installation

Une fois l'extension achetée et téléchargée, vous obtenez un fichier de type "responsive-tables.zip". Comme pour toute installation d'une extension Joomla!, rendez-vous dans Extensions (1) → Gestion des extensions (2), choisissez l'onglet "Archive à envoyer" (3), sélectionnez l'archive que vous venez de télécharger (4) puis cliquez sur le bouton "Envoyer & Installer" (5) :

Installation extension Joomla!

Une fois l'installation terminée, vous devez obtenir une page comme celle-ci :

Installation terminée

Activer le plugin Responsive Tables

Le plugin est désormais installé sur notre site, pour l'activer, rendez-vous dans Extensions → Gestion des plugins, puis filtrez pour trouver le plugin. Cliquez ensuite sur l'icône pour l'activer :

Activer plugin Joomla! 

Modification du tableau

Pour que le plugin puisse afficher le tableau correctement, nous allons devoir apporter 3 modifications simples :

  • Ajouter une classe à notre tableau
  • Ajouter une balise <thead> </thead>
  • Déplacer la balise ouvrante <tbody>;

Pour cela, éditer un article comportant un tableau, puis, dans un mode sans éditeur, recherchez le code de votre article.  Pour l'article sur l'installation de Joomla!, ce code ressemble à cela :

 

<table border="1">
<tbody>
<tr>
<td>Logiciel</td>
<td>Recommandé</td>
<td>Minimum</td>
<td>Plus d'information</td>
</tr>
<tr>
<td>PHP (Magic Quotes GPC off)</td>
<td>5.4 +</td>
<td>5.3.10 +</td>
<td><a href="http://www.php.net" target="_blank" title="php.net"></a><a href="http://www.php.net">http://www.php.net</a></td>
</tr>
<tr>
<td>Bases de Données Supportées</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>MySQL (support InnoDB nécessaire)</td>
<td>5.1 +</td>
<td>5.1 +</td>
<td><a href="http://www.mysql.com" target="_blank" title="http://www.mysql.com"></a><a href="http://www.mysql.com">http://www.mysql.com</a></td>
</tr>
<tr>
<td>MSSQL</td>
<td>10.50.1600.1+</td>
<td>10.50.1600.1+</td>
<td><a href="http://www.microsoft.com/sql" target="_blank" title="http://www.microsoft.com/sql"></a><a href="http://www.microsoft.com/sql">http://www.microsoft.com/sql</a></td>
</tr>
<tr>
<td>PostgreSQL</td>
<td>8.3.18 +</td>
<td>8.3.18 +</td>
<td><a href="http://www.postgresql.org" target="_blank" title="http://www.postgresql.org"></a><a href="http://www.postgresql.org">http://www.postgresql.org</a></td>
</tr>
<tr>
<td>Serveurs Web Supportés</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Apache (avec mod_mysql, mod_xml,and mod_zlib)</td>
<td>2.x +</td>
<td>2.x +</td>
<td><a href="http://www.apache.org" target="_blank" title="http://www.apache.org"></a><a href="http://www.apache.org">http://www.apache.org</a></td>
</tr>
<tr>
<td>Nginx</td>
<td>1.1</td>
<td>1.0</td>
<td><a href="http://wiki.nginx.org" target="_blank" title="http://wiki.nginx.org"></a><a href="http://wiki.nginx.org">http://wiki.nginx.org</a></td>
</tr>
<tr>
<td>Microsoft IIS</td>
<td>7</td>
<td>7</td>
<td><a href="http://www.iis.net" target="_blank" title="http://www.iis.net">ttp://www.iis.net</a></td>
</tr>
</tbody>
</table>

Je vais donc ajouter la classe sur le tableau, ajouter une balise ouvrante <thead>, et la balise fermante </thead>, puis déplacer la balise <tbody>.

<table class="responsive rt"; border="1";>
<thead>
<tr>
<td>Logiciel</td>
<td>Recommandé</td>
<td>Minimum</td>
<td>Plus d'information</td>
</tr>
</thead>
<tbody>
<tr>
<td>PHP (Magic Quotes GPC off)</td>
<td>5.4 +</td>
<td>5.3.10 +</td>
<td><a href="http://www.php.net" target="_blank" title="php.net"></a><a href="http://www.php.net">http://www.php.net</a></td>
</tr>
<tr>
<td>Bases de Données Supportées</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>MySQL (support InnoDB nécessaire)</td>
<td>5.1 +</td>
<td>5.1 +</td>
<td><a href="http://www.mysql.com" target="_blank" title="http://www.mysql.com"></a><a href="http://www.mysql.com">http://www.mysql.com</a></td>
</tr>
<tr>
<td>MSSQL</td>
<td>10.50.1600.1+</td>
<td>10.50.1600.1+</td>
<td><a href="http://www.microsoft.com/sql" target="_blank" title="http://www.microsoft.com/sql"></a><a href="http://www.microsoft.com/sql">http://www.microsoft.com/sql</a></td>
</tr>
<tr>
<td>PostgreSQL</td>
<td>8.3.18 +</td>
<td>8.3.18 +</td>
<td><a href="http://www.postgresql.org" target="_blank" title="http://www.postgresql.org"></a><a href="http://www.postgresql.org">http://www.postgresql.org</a></td>
</tr>
<tr>
<td>Serveurs Web Supportés</td>
<td> </td>
<td> </td>
<td> </td>
</tr>
<tr>
<td>Apache (avec mod_mysql, mod_xml,and mod_zlib)</td>
<td>2.x +</td>
<td>2.x +</td>
<td><a href="http://www.apache.org" target="_blank" title="http://www.apache.org"></a><a href="http://www.apache.org">http://www.apache.org</a></td>
</tr>
<tr>
<td>Nginx</td>
<td>1.1</td>
<td>1.0</td>
<td><a href="http://wiki.nginx.org" target="_blank" title="http://wiki.nginx.org"></a><a href="http://wiki.nginx.org">http://wiki.nginx.org</a></td>
</tr>
<tr>
<td>Microsoft IIS</td>
<td>7</td>
<td>7</td>
<td><a href="http://www.iis.net" target="_blank" title="http://www.iis.net">ttp://www.iis.net</a></td>
</tr>
</tbody>
</table>

Une fois le plugin activé et le code modifié, le tableau est donc parfaitement affiché sur n'importe quel support. Vous pouvez voir cela sur l'article Installer Joomla! : 

Tableau Joomla responsive design

La boutique

Trucs @ Astuces Joomla! 3Le livre 100 Trucs & Astuces pour Joomla! 3
vous permet de faire les bons choix parmi ceux qui s'offrent à vous lors de la création de votre site web ou lors de l'ajout de fonctionnalités ou d'extension grâce à de simple conseils, de vous simplifier la tâche grâce à des astuces et des mini-tutoriels pour gagner du temps dans la gestion de votre site Joomla!, ainsi que dans l'organisation de sa sécurité, son référencement, ses performances, et bien plus encore.

Notez cet article:
2
Cache Joomla! | Explication des paramètres de mise...
Joomla! | Hébergement gratuit et nouveau site de d...

Commentaires

 
Pas encore de commentaire
Déjà inscrit ? Connectez-vous ici
Guest
mardi 23 juillet 2019
Si vous souhaitez vous inscrire, veuillez saisir un nom d'utilisateur, mot de passe et nom.

Image Captcha

Sur ce site, nous utilisons des cookies.