Table builder : création de tableaux accessibles & search engines friendly

Table Builder est un outil en ligne gratuit qui vous assiste dans la création de tableau HTML. Malgré la domination du CSS, il nous arrive parfois de devoir afficher des informations sous forme de tableaux… Et dans ce cas, autant revenir à nos bons vieux tr, td et th.

Au préalable, l’outil vous précise que vous devez connaître le nombre de colonnes, de lignes et les intitulés de vos en-têtes (rien de bien méchant). Voici ensuite, dans l’ordre, les tâches à effectuer pour créer votre tableau (je rappelle que l’outil vous assiste pour 90% des tâches) :

  • Choisir entre un tableau simple ou complexe (à ce dernier s’ajoute la gestion d’id pour jouer avec les données de manière plus souple). Deux thèmes sont proposés (bleu ou gris) mais vous pouvez tout à fait modifier la CSS par la suite.
  • Définir le nombre de colonnes et de lignes qui composent le tableau, ainsi que la position des intitulés des en-têtes du tableau.
  • Rédiger soigneusement le titre de votre tableau, la description et les intitulés des en-têtes.

C’est fini. L’outil vous affiche alors (dans la partie 4) le code à copier sur votre site. On remarque que la déclaration du tableau est très propre dans la partie html, avec les bons attributs aux bons endroits pour une meilleur accessibilité mais surtout pour indiquer davantage d’informations aux moteurs de recherche sur le type de contenus de ce tableau. Un bon moyen pour éviter que le tableau ne pourisse le référencement de votre page ou son chargement.
A cela s’ajoute bien évidemment la feuille de style CSS que vous pouvez retoucher pour adapter le tableau à votre design.

Bref, nous avons là un outil fort pratique que je ne me cacherai pas d’utiliser les prochaines fois que je devrai afficher un tableau.

2 réflexions au sujet de « Table builder : création de tableaux accessibles & search engines friendly »

  1. Ping : Secrets2Moteurs » Blog Archive » Table builder : création de tableau accessible / search engine friendly

Les commentaires sont fermés.