Apprendre à écrire CSS les mises en page peuvent être délicates, surtout si vous êtes habitué à utiliser des tableaux pour créer des mises en page de page Web sophistiquées. Mais en même temps HTML5 permet des tableaux pour la mise en page, ce n'est pas une bonne idée.
Les tableaux ne sont pas accessibles
Semblable à moteurs de recherche, la plupart des lecteurs d'écran lisent les pages Web dans l'ordre dans lequel elles s'affichent dans le code HTML, et les tableaux peuvent être très difficiles à analyser pour les lecteurs d'écran. Le contenu d'un 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, les tableaux imbriqués et les différentes étendues sur les cellules du tableau peuvent rendre la page difficile à comprendre.
C'est la raison pour laquelle le Spécification HTML5 déconseille tableaux pour la mise en page et pourquoi HTML 4.01 l'interdit. Les pages Web accessibles permettent à un plus grand nombre de personnes de les utiliser et sont la marque d'un concepteur professionnel.
Avec CSS, vous pouvez définir une section comme appartenant au côté gauche de la page mais la placer en dernier dans le code HTML. Ensuite, les lecteurs d'écran et les moteurs de recherche liront d'abord les parties importantes (le contenu) et les parties moins importantes (la navigation) en dernier.
Les tableaux sont difficiles
Même si vous créez une table avec un éditeur Web, vos pages Web resteront compliquées et difficiles à maintenir. À l'exception des conceptions de pages Web les plus simples, la plupart des tableaux de disposition nécessitent l'utilisation de nombreux attributs et 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 l'entretenir. Six mois plus tard, il n'est peut-être pas aussi facile de se rappeler pourquoi vous avez imbriqué les tableaux ou combien de cellules se trouvaient dans une rangée, etc. Sans oublier que si vous gérez des pages Web en tant que membre de l'équipe, vous devez expliquer à toutes les personnes impliquées comment fonctionnent les tables ou vous attendre à ce qu'elles prennent plus de temps lorsqu'elles doivent apporter des modifications.
Le CSS peut également être compliqué, mais il sépare la présentation du contenu et le rend beaucoup plus facile à maintenir à long terme. De plus, avec la mise en page CSS, vous pouvez écrire un fichier CSS et styliser toutes vos pages pour qu'elles soient ainsi. Ensuite, lorsque vous souhaitez modifier la mise en page de votre site, vous modifiez simplement un fichier CSS, et l'ensemble changements de site - plus besoin de parcourir chaque page une à la fois pour mettre à jour les tableaux pour mettre à jour le disposition.
Les tableaux sont rigides
Bien qu'il soit possible de créer des mises en page de tableau avec des largeurs en pourcentage, elles sont souvent plus lentes à charger et peuvent considérablement changer l'apparence de votre mise en page. Mais si vous utilisez des largeurs spécifiées pour vos tables, vous vous retrouvez avec une disposition très rigide qui n'aura pas fière allure sur des moniteurs de taille différente du 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 multimédia CSS, vous pouvez créer des conceptions distinctes pour des écrans de différentes tailles.
Les tableaux nuisent à l'optimisation des moteurs de recherche
La disposition de tableau la plus courante utilise une barre de navigation sur le côté gauche de la page et le contenu principal sur la droite. Lors de l'utilisation de tableaux, cette approche nécessite (généralement) que le premier contenu qui s'affiche dans le code HTML soit la barre de navigation de gauche. Les moteurs de recherche classent 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 contenus. Ainsi, une page avec une navigation à gauche en premier semblera avoir un contenu moins important que la navigation.
En utilisant CSS, vous pouvez mettre le contenu important en premier dans votre HTML, puis utiliser CSS pour déterminer où il doit être placé dans la conception. Cela signifie que les moteurs de recherche verront le contenu important en premier, même si la conception le place plus bas sur la page.
Les tableaux ne s'impriment pas toujours bien
De nombreux modèles de table ne s'impriment pas bien parce qu'ils sont tout simplement trop larges pour l'imprimante. Ainsi, pour les faire tenir, les navigateurs coupent les tableaux et impriment les sections ci-dessous, ce qui entraîne des pages disjointes. Parfois, vous vous retrouvez avec des pages qui semblent correctes, mais il manque tout le côté droit. D'autres pages imprimeront des sections sur différentes feuilles.
Avec CSS, vous pouvez créer une feuille de style distincte juste pour imprimer la page.
Les tableaux de mise en page ne sont pas valides en HTML 4.01
le États de la spécification HTML 4: "Les tableaux ne doivent pas être utilisés uniquement comme un moyen de mettre en page le contenu d'un document car cela peut poser des problèmes lors du rendu sur des supports non visuels."
Donc, si vous voulez écrire du HTML 4.01, vous ne pouvez pas utiliser de tableaux pour la mise en page. Vous ne devez utiliser des tableaux que pour les données tabulaires, et les données tabulaires ressemblent généralement à quelque chose que vous pourriez afficher dans une feuille de calcul ou éventuellement une base de données.
Cependant, HTML5 a changé les règles et maintenant les tableaux de mise en page, bien que non recommandés, sont considérés comme du HTML valide. La spécification HTML5 stipule: "Les tableaux ne doivent pas être utilisés comme aides à la mise en page." En effet, les tableaux de mise en page sont difficiles à différencier pour les lecteurs d'écran, comme mentionné précédemment.
L'utilisation de CSS pour positionner et mettre en page vos pages est le seul moyen HTML 4.01 valide d'obtenir les conceptions que vous avez utilisées pour créer des tableaux, et HTML5 recommande également fortement cette méthode.