Bonne pratique : les tableaux (<table>)

J’entame aujourd’hui une série d’article sur les bonnes pratiques à acquérir dans le développement web. On passera en revu ensemble les principales balises HTML à connaitre et leur bonne utilisation, cette série d’article vous permettra de faire le point sur des éléments dont on se sert tous les jours et parfois à mauvais escient. On va donc essayer ensemble de corriger nos mauvaises habitudes, et comme à l’accoutumée si vous avez des commentaires ou besoin de plus de précision n’hésitez pas je réponds même sur des articles anciens ;)

Je me suis posé la question par où commencer cette série d’article, je me disais que le plus évident était d’attaquer tout de suite les bonnes pratiques pour une bonne mise en page. En fait non car une mise en page complète nécessite d’avoir revu l’intégralité des balises pour faire les choses correctement. Donc je me suis dit je vais commencer par une balise qui a mauvaise réputation à tort. J’ai nommé mon ami <table>.

Mais qui est <table> ?!

<table> est un vieil ami à moi et vous le connaissez forcément si vous faites de la programmation web depuis quelques temps. Pour ceux qui ont commencé le web il y a un bon moment, ce bon ami qu’est <table> vous a rendu bien des services, y compris au tout début du web pour faire des mises en page. Mais ce n’est pas le but de <table>.

<table> a un seul but et unique but dans la vie. C’est d’afficher des résultats sous forme de tableau. <table> est tout simplement le petit frère d’Excel et autres cousins de la famille Tableur. Le seul problème c’est que <table> ne sait pas faire de calcul. Et notre nouvel ami ne sait faire QUE ça. Inutile de lui demander de vous aider dans la mise en page de votre site, il ne sait pas le faire, et quand il se plie à votre volonté de faire de la mise en page, vous subirez le courroux de l’effroyable Google et de vos visiteurs qui vous maudiront à juste titre.

Pourquoi <table> ne sait il donc pas faire autre chose ? Rectifions, pourquoi notre ami ne doit il pas faire autre chose ?

La réponse est pourrait se résumer ainsi : A chacun son métier.

On pourrait argumenter longuement sur les différences de temps de rendu – c’est à dire le temps d’affichage – d’une page structuré avec <table> contre d’autres balises que nous verrons plus tard, mais la différence devient de plus en plus minime par deux factures, la qualité des moteurs de rendu HTML et surtout la vitesse de calcul des processeurs. Si bien qu’on pourrait presque faire n’importe quoi ça irait aussi vite.

Alors pourquoi ne pas faire comme bon nous semble ?

La réponse est un poil plus subtile et ce décline en trois points. La première raison c’est pour conserver une indexation correcte par les moteurs de recherches. En effet dans un tableau Google va s’attendre à trouver des données, si vous lui servez des images ça risque d’être un peu la soupe à la grimace, et encore les moteurs de recherches savent gérer cette problématique. La seconde raison c’est pour la facilité de maintenance du code source et son évolution graphique. <table> n’est pas vraiment simple à modifier même si vous penser le contraire pour l’instant. Et enfin le dernier point et plus idéaliste, mais si on respecter tous les conventions on vivrait dans un web meilleur.

De toute façon on s’en fiche <table> c’est déprécié – deprecated – comme élément …

Bah non <table> est loin d’être deprecated, il a son rôle à jouer sur le web, mais pour uniquement de l’affichage de données, par exemple un annuaire est une excellente utilisation de <table>, vous pouvez aussi vous en servir sur un site e-commerce pour un panier par exemple, c’est tout à fait le bon usage de <table>

Que doit on retenir ?

Ce qu’il faut retenir c’est que <table> n’est pas un élément déprécié loin de là, mais il a une utilisation propre à lui même qui se résume à l’affichage de données tabulées. Il ne faut en aucun cas détourner <table> du droit chemin et lui demander de faire de la mise en page.

Voila pour un premier article sur les balises. Si vous avez des questions ou des commentaires je vous en prie, je pourrais améliorer ça pour la prochaine balise ;)