665 votes

Pourquoi ne pas utiliser des tableaux pour la mise en page en HTML ?

Il semble être l' opinion générale que les tableaux ne doivent pas être utilisés pour la mise en page en HTML.

Pourquoi?

Je n'ai jamais (ou rarement pour être honnête) vu de bons arguments pour cela. L'habitude réponses sont:

  • Il est bon de séparer le contenu de la mise en page
    Mais c'est un argument fallacieux; Patron de la Pensée. Je suppose que c'est vrai que l'utilisation de l'élément de tableau pour la mise en page n'a rien à voir avec les données tabulaires. Et alors? Est-ce que mon patron soins? Faire mes utilisateurs de soins?

    Peut-être que moi ou mes collègues développeurs qui ont à maintenir une page web de soins de... Est un tableau moins maintenable? Je pense que l'utilisation d'un tableau est plus facile que d'utiliser des divs et CSS.

    Au fait... pourquoi utiliser un div ou span bonne séparation du contenu et de la mise en page et une table non? L'obtention d'une bonne mise en page avec seulement divs requiert souvent beaucoup de divs imbriqués.

  • La lisibilité du code
    Je pense que c'est l'inverse. La plupart des gens comprennent le HTML, peu de gens comprennent CSS.

  • C'est mieux pour le RÉFÉRENCEMENT de ne pas utiliser les tables
    Pourquoi? Quelqu'un peut-il démontrer qu'il est? Ou une déclaration de la part de Google que les tables sont découragés d'un point de vue SEO?

  • Les Tables sont plus lents.
    Un supplément tbody élément doit être inséré. C'est peanuts pour les navigateurs web modernes. Montrez-moi quelques repères où l'utilisation d'une table ralentit considérablement d'une page.

  • Une mise en page révision est plus facile, sans tables, voir css Zen Garden.
    La plupart des sites web qui ont besoin d'une mise à niveau nécessaire un nouveau contenu (HTML). Les scénarios où une nouvelle version d'un site web seulement besoin d'un nouveau fichier CSS ne sont pas très probable. Jardin Zen est un site web de nice, mais un peu théorique. Sans parler de la mauvaise utilisation des CSS.

Je suis vraiment intéressé par les bons arguments pour l'utilisation de la vrd + CSS au lieu de tables.

496voto

Konrad Rudolph Points 231505

Je vais parcourir vos arguments l'un après l'autre, et essayer de montrer les erreurs.

Il est bon de séparer le contenu de la mise en page Mais c'est un argument fallacieux; Cliché de la Pensée.

C'est pas faux du tout parce que le HTML a été conçu intentionnellement. La mauvaise utilisation d'un élément peut ne pas être complètement hors de question (après tout, les nouveaux idiomes ont développé dans d'autres langues, aussi), mais éventuelles conséquences négatives être compensé. En outre, même s'il n'y avait pas d'arguments contre l'utilisation abusive de l' <table> élément d'aujourd'hui, il y a peut-être demain en raison de la façon dont les fournisseurs de navigateur appliquer un traitement spécial à l'élément. Après tout, ils savent que "<table> des éléments sont pour les données tabulaires" et pourrait utiliser ce fait pour améliorer le moteur de rendu, dans le processus subtilement changer la façon dont <table>s se comportent, et de rompre ainsi les cas où il a été précédemment utilisée à mauvais escient.

Et alors? Est-ce que mon patron soins? Faire mes utilisateurs de soins?

Dépend. Est votre patron pointu à poil? Puis, il pourrait ne pas s'occuper. Si elle est compétente, elle prendra soin, parce que les utilisateurs vont.

Peut-être que moi ou mes collègues développeurs qui ont à maintenir une page web de soins de... Est un tableau moins maintenable? Je pense que l'utilisation d'un tableau est plus facile que d'utiliser des divs et css.

La majorité des professionnels du web développeurs semblent s'opposer à vous[citation nécessaire]. Que les tables sont en fait moins maintenable devrait être évident. À l'aide de tableaux de mise en page signifie que la modification de la disposition de l'entreprise sera, en fait, signifie change à chaque page. Cela peut être très coûteux. D'autre part, l'usage judicieux du point de vue sémantique significative HTML combiné avec le CSS pourrait limiter de tels changements sur le CSS et les images utilisées.

Au fait... pourquoi utiliser un div ou span bonne séparation du contenu et de la mise en page et une table non? L'obtention d'une bonne mise en page avec seulement divs requiert souvent beaucoup de divs imbriqués.

Profondément imbriqués <div>s sont un anti-modèle tout comme les tableaux. Bon sur le web les concepteurs n'ont pas besoin de beaucoup d'entre eux. D'autre part, même profondément imbriqués les divs ne dispose pas de beaucoup de les problèmes des dispositions de table. En fait, ils peuvent même contribuer à une structure sémantique par logiquement divisant le contenu dans les pièces.

La lisibilité du code Je pense que c'est l'inverse. La plupart des gens comprennent le html, peu de comprendre le css. C'est plus simple.

"La plupart des gens n'ont pas d'importance. Les professionnels de la question. Pour les professionnels, les dispositions de table créer beaucoup plus de problèmes que d'en HTML + CSS. C'est comme dire que je ne devrais pas utiliser GVim ou Emacs parce que le bloc-notes est plus simple pour la plupart des gens. Ou que je ne devrais pas utiliser LaTeX parce que MS Word est plus simple pour la plupart des gens.

C'est mieux pour le RÉFÉRENCEMENT de ne pas utiliser les tables

Je ne sais pas si cela est vrai et ne pas l'utiliser comme un argument, mais il serait logique. Les moteurs de recherche de recherche pour pertinente des données. Alors que les tableaux de données pourrait être pertinent, c'est rarement ce que l'utilisateur recherche. Utilisateurs de rechercher des termes utilisés dans le titre de la page ou de même des postes importants. Il serait donc logique d'exclure de tableaux de contenu de filtrage et donc de la coupe de la durée de traitement (et de prix!) par un grand facteur.

Les Tables sont plus lents. Un supplément tbody élément doit être inséré. C'est peanuts pour les navigateurs web modernes.

L'élément supplémentaire n'a rien à voir avec des tables est plus lent. D'autre part, l'algorithme de mise en page pour les tableaux est beaucoup plus difficile, le navigateur doit souvent attendre pour l'ensemble du tableau à la charge avant de commencer à disposition le contenu. En outre, la mise en cache de la mise en page ne fonctionne pas (CSS peuvent facilement être mis en cache). Tout cela a été mentionné auparavant.

Montrez-moi quelques repères où l'utilisation d'une table ralentit considérablement d'une page.

Malheureusement, je n'ai pas de données de référence. Je serais intéressé par moi-même, car il est vrai que cet argument manque d'une certaine rigueur scientifique.

La plupart des sites web qui ont besoin d'une mise à niveau nécessaire un nouveau contenu (html). Les scénarios où une nouvelle version d'un site web seulement besoin d'un nouveau fichier css ne sont pas très probable.

Pas du tout. J'ai travaillé sur plusieurs cas où la modification de la conception a été simplifiée par une séparation du contenu et de la conception. C'est encore souvent nécessaire pour changer un code HTML mais les changements seront toujours beaucoup plus confinés. En outre, les modifications de conception doit parfois être fait dynamiquement. Envisager de moteurs de template comme celui utilisé par le système de blogging WordPress. Des dispositions de Table serait littéralement tuer ce système. J'ai travaillé sur un cas similaire pour un logiciel commercial. Être en mesure de modifier la conception sans modifier le code HTML a été l'un des besoins de l'entreprise.

Un autre chose. La disposition de Table automatisés d'analyse de sites web (capture d'écran) beaucoup plus difficile. Cela peut sembler trivial, car, après tout, qui est-il? J'ai été surpris moi-même. Capture d'écran peut aider beaucoup si le service en question n'offre pas un Service alternatif pour accéder à ses données. Je travaille en bio-informatique, où c'est une triste réalité. Modernes techniques du web et de Services web n'ont pas atteint la plupart des développeurs et souvent, capture d'écran est le seul moyen d'automatiser le processus d'obtention des données. Pas étonnant que de nombreux biologistes toujours effectuer ces tâches manuellement. Pour les milliers de jeux de données.

290voto

Carl Camera Points 4284

Voici mon programmeur de réponse à partir d'un thread) des nouvelles

La sémantique 101

D'abord jeter un oeil à ce code et de réfléchir à ce qui est mauvais ici...

class car {
    int wheels = 4;
    string engine;
}

car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;

Le problème, bien sûr, c'est qu'un vélo n'est pas une voiture. La classe de voiture est inadapté à la classe pour le vélo instance. Le code est exempt d'erreur, mais est sémantiquement incorrect. Il reflète mal sur le programmeur.

La sémantique 102

Maintenant appliquer ce pour le balisage de document. Si votre document doit présenter des données tabulaires, puis la balise appropriée serait <table>. Si vous placez la navigation dans un tableau, cependant, alors vous êtes sur le mauvais usage de l'usage prévu de l' <table> élément. Dans le second cas, vous n'êtes pas présenter des données tabulaires -- vous êtes (mis)à l'aide de l' <table> élément de réaliser une présentation de l'objectif.

Conclusion

Seront les visiteurs s'en apercevoir? Pas de. Est-ce que votre patron de soins? Peut-être. Faisons-nous parfois de couper les coins ronds comme des programmeurs? Assurez-vous. Mais devrions-nous? Pas de. Qui bénéficie si vous utilisez le balisage sémantique? Vous, et votre réputation professionnelle. Maintenant, allez et faire la bonne chose.

104voto

erlando Points 5802

Réponse évidente: Voir le CSS Zen Garden. Si vous me dites que vous pouvez facilement faire la même chose avec un tableau de mise en page (n'oubliez pas que le HTML ne change pas), puis par tous les moyens d'utiliser des tableaux pour la mise en page.

Deux choses importantes sont l'accessibilité et de RÉFÉRENCEMENT.

Les deux se soucier de ce que les informations de commande est présenté. Vous ne pouvez pas facilement présenter votre barre de navigation en haut de la page si votre tableau de mise en page met dans la 3ème cellule de la 2e rangée de la 2ème table imbriquée sur la page.

Si vos réponses sont maintenabilité, de l'accessibilité et de RÉFÉRENCEMENT.

Ne soyez pas paresseux. Faire les choses correctement et de manière correcte, même si elles sont un peu plus difficile à apprendre.

91voto

Joel Coehoorn Points 190579

Voir cette double question.

Un point que vous êtes l'oubli il y a de l'accessibilité. Basée sur la Table dispositions ne pas traduire ainsi si vous avez besoin d'utiliser un lecteur d'écran, par exemple. Et si vous travaillez pour le gouvernement, le soutien accessible navigateurs, comme les lecteurs d'écran peuvent être nécessaires.

Je pense aussi que vous sous-estimer l'impact de certaines des choses que vous avez mentionnées dans la question. Par exemple, si vous êtes à la fois le concepteur et le programmeur, vous ne pouvez pas avoir une appréciation complète de la façon dont il se sépare de présentation de contenu. Mais une fois que vous obtenez dans un magasin où ils sont deux rôles distincts les avantages commencent à devenir plus claire.

Si vous savez ce que vous faites et ont de bons outils, le CSS a vraiment des avantages significatifs sur les tables pour la mise en page. Et tandis que chaque élément par lui-même ne peut justifier l'abandon de tables, prises ensemble, c'est généralement la peine.

54voto

James Curran Points 55356

Malheureusement, CSS Zen Garden ne peut plus être utilisé comme un exemple de bonne HTML/CSS design. Pratiquement tous leurs modèles récents utiliser des graphiques pour le titre de section. Ces fichiers graphiques sont spécifiés dans le fichier CSS.

Par conséquent, un site web dont le but est de montrer l'avantage de garder la conception de contenu, maintenant régulièrement commet l'INDICIBLE PÉCHÉ de placer le contenu dans le design. (Si la section d'en-tête dans le fichier HTML change, l'intitulé de la section affichée ne serait pas).

Ce qui prouve que même ceux qui prônent la stricte DIV ET CSS de la religion, ne peut pas suivre leurs propres règles. Vous pouvez l'utiliser comme un guide dans la façon dont vous suivez de près.

Prograide.com

Prograide est une communauté de développeurs qui cherche à élargir la connaissance de la programmation au-delà de l'anglais.
Pour cela nous avons les plus grands doutes résolus en français et vous pouvez aussi poser vos propres questions ou résoudre celles des autres.

Powered by:

X