Si CSS s'améliore, pourquoi les sites Web de grandes marques utilisent-ils encore des tableaux pour la mise en page?
Tout le monde se réfère à la façon dont le contenu doit être séparé de la mise en page et je suis un fervent défenseur de cette architecture. Je trouve également facile d’utiliser CSS pour la mise en page, bien plus facile que les tableaux,
Mais pourquoi oh pourquoi les grands noms utilisent-ils encore des tableaux pour la mise en page? (Google Shopping est le plus gros contrevenant), eBay, Amazon, BaseCamp ... d'excellents sites Web, n'êtes-vous pas d'accord? J'ai juste besoin de comprendre leurs motivations, afin de savoir avec certitude: est-ce que je manque quelque chose? est-ce vraiment plus facile, plus rapide ou moins cher d'utiliser des tables?
Extrait de code de magasinage Google:
Raisons possibles:
Ils utilisent le navigateur Web du plus petit dénominateur commun. En d'autres termes, ils essaient de rendre raisonnablement bien dans les navigateurs plus anciens. Étant donné que ces sites génèrent beaucoup de trafic, même un navigateur disposant de 0,1% du marché des navigateurs Web peut s’ajouter à un nombre considérable d’utilisateurs. Ainsi, dans le but de prendre en charge ces utilisateurs, ils évitent les balises plus modernes et utilisent des balises toujours prises en charge par ces navigateurs.
Le code est ancien et n'a pas été mis à jour. Cela peut être dû à des problèmes de coûts ou à des problèmes de logistique.
Ils ne veulent pas. Il est évident que leurs sites font l'objet d'un trafic important avec leur code actuel, de sorte qu'ils ne voient aucune raison de le modifier.
Peut-être aussi parce qu'ils savent que le prochain standard, HTML5, accepte (mais ne l'encourage pas) l'utilisation de tableaux pour la mise en forme, q.v:
Si un tableau doit être utilisé pour la mise en page, il doit être marqué avec l'attribut role = "presentation" pour qu'un agent utilisateur puisse représenter correctement le tableau dans une technologie d'assistance et pour transmettre correctement l'intention de l'auteur aux outils désirant extraire des tabulaires. données du document. Il existe diverses alternatives à l'utilisation de tableaux HTML pour la mise en forme, principalement à l'aide du positionnement CSS et du modèle de table CSS. L'attribut border peut être spécifié sur un élément de table pour indiquer explicitement que l'élément de table n'est pas utilisé à des fins de mise en page. Si spécifié, la valeur de l'attribut doit être la chaîne vide ou la valeur "1". Cet attribut est utilisé par certains agents utilisateurs pour indiquer que des bordures doivent être dessinées autour des cellules du tableau.
http://www.w3.org/TR/html5/tabular-data.html#the-table-element
Dans certaines conceptions, il est très difficile d’aligner correctement le contenu entre eux dans css, en particulier la configuration de 3 colonnes mélangée avec l’alignement vertical (comme dans votre exemple).
Les tableaux offrent une compatibilité sans faille entre les navigateurs, les ordinateurs de bureau, les téléphones portables, etc.
Une autre raison est ... les clients de messagerie. Un copier/coller à partir d'un navigateur Web peut générer un très mauvais rendu dans un client de messagerie, un client officiel, etc.
tables ne sont pas aussi flexibles que CSS si vous avez besoin de changer la disposition ultérieurement, mais souvent, ils demandent moins d'effort que d'essayer de rendre les mêmes choses en CSS en utilisant des tonnes de hacks CSS pour rendre tous les navigateurs rendre la même chose ou presque la même chose (par exemple IE).
Construire des sites Web en utilisant HTML et CSS n'est pas une tâche facile. Des problèmes tels que la compatibilité entre navigateurs, les dispositions fixes/fluides, la nature flottante des éléments, etc. sont des problèmes généraux que le concepteur de sites Web rencontre souvent. Les concepteurs Web utilisent souvent des tableaux pour conserver les dispositions intactes et restituer les éléments à un emplacement idéal. De plus, vous pouvez utiliser 100% de la largeur pour le contenu de votre site Web, un placement parfait pour vos éléments, qui n'aura aucune résolution, alors qu'en CSS, les concepteurs Web respectent souvent les dispositions fixes ou utilisent JavaScripts.
Pour des informations plus détaillées: Cliquez ici
J'ai commencé à coder en 1996. Évidemment, je suis rapidement devenu expert en codage de tables. Les tableaux sont simples et rapides, et vraiment cohérents lorsqu'ils sont combinés avec CSS.
Créer une mise en page en utilisant uniquement du CSS ou des tableaux, parce que vous pensez que c'est la bonne chose à faire, est stupide.
La "bonne chose à faire" est généralement une combinaison de facteurs, y compris votre niveau de compétence en codage, la durée de vie potentielle du site, les autres codeurs et la technologie de vos utilisateurs.
Si vous avez 8 heures à consacrer à un projet et qu'il vous faudra 7 heures pour le développer en utilisant uniquement CSS (pour la mise en page) ou 2 heures en utilisant uniquement le temps des tableaux (pour la mise en page), vous n'auriez qu'un temps limité pour autre chose, comme contenu ou référencement.
Essayez simplement de développer quelque chose qui soit assez facile à maintenir, assez facile à apprendre et qui fonctionne exactement comme vous le souhaitez la plupart du temps. Toute autre chose que cela est une perte de temps totale.
Si on m'interdisait d'utiliser des tables, je les imiterais probablement avec CSS. Ils sont tellement naturels. Il y a quelques années, j'acceptais aveuglément toute cette prédication sur le mal de la mise en page. Maintenant, je choisis ce qui est plus pratique. De plus, dans ASP.NET, nous avons la classe de contrôle de table Nice. BTW J'utilise également la disposition des tables dans les applications de bureau (XAML WPF). Je n'ai entendu aucune suggestion pour y déprécier les tables.
Cela a été sur SO: https://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html
Parfois, utiliser une disposition de tableau peut réduire la complexité du code, car la contrepartie CSS est moins intuitive.
Trop souvent, j'ajoute une règle CSS pour atteindre un objectif, mais cette règle aura souvent des effets secondaires que vous devez ensuite corriger. C'est parce que la règle n'a pas été conçue pour résoudre mon problème et que c'est moi qui utilise ses effets secondaires pour le résoudre.
Et souvent, j’ai ajouté de nombreuses règles de marges/paddings/floats/overflows pour réaliser ma mise en page, mais après un mois, je ne pouvais vraiment pas déterminer le jeu de règles correspondant à cet objectif de mise en page . Il n'y a pas de méthode standard pour réaliser une mise en page. Par conséquent, si je passe mon code à la personne suivante, elle ne peut que la modifier, mais ne comprend jamais complètement tous les effets secondaires.
Prenons l'exemple de la disposition la plus courante de "colonne à hauteur égale": il existe plusieurs façons de procéder. On a besoin de 2 couches de wrappers , et ne meilleure solution n'est pas moins contre-intuitive . Qu'en est-il besoin d'un pied collant ? Juste envelopper l'en-tête et le contenu à nouveau! Bientôt, vous constaterez que votre conception est rigide et non modifiable.
Ne vous méprenez pas, je déteste voir la table comme le conteneur le plus haut. Je veux juste souligner que CSS peut être aussi moche que des tables de temps en temps. Il appartient donc au développeur de décider lequel sera le plus efficace en fin de journée.