Apprendre à écrire des mises en forme CSS peut être délicat, surtout si vous savez utiliser des tableaux pour créer de superbes mises en page Web. Mais bien que HTML5 permette la mise en forme de tableaux, ce n’est pas une bonne idée.
Les tables ne sont pas accessibles
Tout comme les moteurs de recherche, la plupart des lecteurs d'écran lisent les pages Web dans l'ordre d'affichage dans le code HTML, et les tableaux peuvent être très difficiles à analyser pour les lecteurs d'écran. En effet, le contenu d'une disposition de tableau, bien que linéaire, n'a pas toujours de sens lorsqu'il est lu de gauche à droite et de haut en bas. De plus, avec des tableaux imbriqués et des étendues variées sur les cellules du tableau, il peut être très difficile de comprendre la page.
C'est la raison pour laquelle la spécification HTML5 recommande de ne pas utiliser de tableaux pour la mise en page et que HTML 4.01 ne le permet pas. Les pages Web accessibles permettent à plus de personnes de les utiliser et sont la marque d'un designer professionnel.
Avec CSS, vous pouvez définir une section comme appartenant au côté gauche de la page mais en la plaçant en dernier dans le code HTML. Ensuite, les lecteurs d'écran et les moteurs de recherche liront les parties importantes (le contenu) en premier et les parties moins importantes (navigation) en dernier.
Les tables sont délicates
Même si vous créez une table avec un éditeur Web, vos pages Web seront toujours très compliquées et difficiles à gérer. À l'exception des conceptions de pages Web les plus simples, la plupart des tableaux de disposition nécessitent l'utilisation de nombreux attributs et de tableaux imbriqués.
Construire la table peut sembler facile pendant que vous le faites, mais une fois que c'est fait, vous devez le maintenir. Six mois plus tard, il ne sera peut-être pas aussi facile de se rappeler pourquoi vous avez imbriqué les tableaux ou combien de cellules étaient dans une rangée et ainsi de suite. De plus, si vous conservez des pages Web en tant que membre de l'équipe, vous devez expliquer à toutes les personnes concernées comment les tables fonctionnent ou vous attendre à ce qu'elles prennent plus de temps lorsqu'elles doivent apporter des modifications.
CSS peut aussi être compliqué, mais il maintient la présentation séparée du HTML et le rend beaucoup plus facile à maintenir sur le long terme. De plus, avec la disposition CSS, vous pouvez écrire un seul fichier CSS et donner à toutes vos pages un style similaire. Ensuite, lorsque vous souhaitez modifier la présentation de votre site, il vous suffit de modifier un fichier CSS, et l'ensemble du site change: vous ne devez plus parcourir toutes les pages, une à la fois, pour mettre à jour les tableaux et mettre à jour la présentation.
Les tables sont inflexibles
Bien qu'il soit possible de créer des présentations de tableau avec des largeurs en pourcentage, leur chargement est plus lent et peut modifier considérablement l'apparence de votre présentation. Toutefois, si vous utilisez des largeurs spécifiées pour vos tables, vous obtenez une disposition très rigide qui ne convient pas aux moniteurs dont la taille est différente de la vôtre.
Il est relativement facile de créer des mises en page flexibles qui ont fière allure sur de nombreux moniteurs, navigateurs et résolutions. En fait, avec les requêtes de média CSS, vous pouvez créer des conceptions distinctes pour des écrans de différentes tailles.
Les tables imbriquées chargent plus lentement que CSS pour la même conception
Le moyen le plus courant de créer des mises en page sophistiquées avec des tableaux consiste à «imbriquer» des tableaux. Cela signifie qu'une (ou plusieurs) table est placée dans une autre. Plus le nombre de tables imbriquées est important, plus le navigateur Web aura besoin de temps pour afficher la page.
Dans la plupart des cas, une disposition de tableau utilise plus de caractères à créer qu'une conception CSS. Et moins de caractères signifie moins à télécharger.
Les tables peuvent nuire à l'optimisation des moteurs de recherche
La mise en page la plus courante de la table comporte une barre de navigation à gauche de la page et le contenu principal à droite. Lorsque vous utilisez des tableaux, cela (généralement) nécessite que le premier contenu affiché dans le code HTML soit la barre de navigation de gauche. Les moteurs de recherche catégorisent les pages en fonction du contenu, et de nombreux moteurs déterminent que le contenu affiché en haut de la page est plus important que les autres. Ainsi, une page avec une navigation à gauche apparaîtra en premier lieu avec un contenu moins important que la navigation.
En utilisant CSS, vous pouvez mettre le contenu important en premier dans votre code HTML, puis utiliser CSS pour déterminer où il doit être placé dans la conception. Cela signifie que les moteurs de recherche verront d’abord le contenu important, même si sa conception le place plus bas sur la page.
Les tableaux n'impriment pas toujours bien
De nombreux modèles de tables n'impriment pas correctement car ils sont tout simplement trop larges pour l'imprimante. Donc, pour les adapter, les navigateurs découperont les tableaux et imprimeront les sections ci-dessous, ce qui donnera des pages très disjointes. Parfois, vous vous retrouvez avec des pages qui semblent correctes, mais il manque tout le côté droit. Les autres pages imprimeront des sections sur différentes feuilles.
Avec CSS, vous pouvez créer une feuille de style distincte uniquement pour imprimer la page.
Les tables de mise en forme sont non valides en HTML 4.01
La spécification HTML 4 stipule: "Les tableaux ne doivent pas être utilisés uniquement pour mettre en page le contenu d'un document, car cela peut poser des problèmes lors du rendu sur un support non visuel."
Donc, si vous voulez écrire du HTML 4.01 valide, vous ne pouvez pas utiliser de tableaux pour la mise en page. Vous ne devez utiliser des tableaux que pour des données tabulaires, et les données tabulaires ressemblent généralement à quelque chose que vous pourriez afficher dans un tableur ou éventuellement une base de données.
Cependant, HTML5 a modifié les règles et les tableaux de présentation, bien que non recommandés, sont désormais considérés comme du code HTML valide. La spécification HTML5 indique: "Les tableaux ne doivent pas être utilisés comme aides à la présentation." En effet, comme indiqué précédemment, les lecteurs d’écran ont du mal à différencier les tableaux de présentation.
Utiliser CSS pour positionner et mettre en forme vos pages est le seul moyen valide HTML 4.01 pour obtenir les conceptions que vous utilisiez auparavant pour créer des tableaux. HTML5 recommande vivement cette méthode également.
Les tables de mise en page peuvent avoir un impact sur vos perspectives d'emploi
Au fur et à mesure que de nouveaux concepteurs apprennent le HTML et le CSS, vos compétences en matière de création de dispositions de table seront de moins en moins demandées. Oui, il est vrai que les clients ne vous indiquent généralement pas la technologie exacte à utiliser pour créer leurs pages Web, mais ils demandent notamment:
- Pages Web accessibles: les concepteurs pouvant être visualisés par les lecteurs d'écran sont prescrits par de nombreux pays et les entreprises accordent de plus en plus d'importance à l'accessibilité.
- Pages Web maintenables: dessins qu'ils peuvent prendre avec eux même si vous n'allez pas les maintenir dans le futur.
- Dessins flexibles: conceptions fonctionnant sur de nombreux navigateurs, résolutions et périphériques.
- Pages de téléchargement rapide: la rapidité devient de plus en plus importante, même pour le référencement.
- Dessins imprimables: pages imprimées sans scripts spéciaux ni pages supplémentaires.
Si vous ne pouvez pas livrer ce que les clients demandent, ils ne viendront plus vous voir pour des motifs. Pouvez-vous vraiment vous permettre de laisser votre entreprise souffrir parce que vous n'êtes pas disposé à apprendre et à incorporer une technique utilisée depuis la fin des années 1990?
La morale: apprendre à utiliser les CSS
CSS peut être difficile à apprendre, mais tout ce qui vaut la peine vaut l'effort. Ne laissez pas vos compétences stagner. Apprenez le CSS et construisez vos pages Web comme elles étaient censées être construites - avec CSS pour la mise en page.
