116 votes

Tables au lieu de DIVs

<blockquote> <p><strong>Doublon possible :</strong><br> <a href="http://stackoverflow.com/questions/83073/why-not-use-tables-for-layout-in-html">Pourquoi ne pas utiliser des tableaux pour la mise en page en HTML ?</a> </p> </blockquote> <p>Dans quelles conditions si vous choisissez les tables au lieu de balises div dans le codage HTML ?</p>

198voto

Joel Coehoorn Points 190579

L'ensemble "des Tables vs Divs" chose vient à peine de justesse la marque. Ce n'est pas de la "table" ou "div". C'est sur l'utilisation de la sémantique html.

Même la balise div ne joue qu'un petit rôle dans un bien mis en page. N'en abusez pas. Vous ne devriez pas avoir besoin d'autant si vous mettez votre code html à l'ensemble correctement. Des choses comme des listes, des jeux, des légendes, des étiquettes, des paragraphes, etc peut remplacer une grande partie de ce qu'est un div ou span est souvent utilisé pour accomplir. Div doit être utilisé principalement lorsque cela a du sens pour indiquer une logique *div*ision, et seulement approprié pour plus de mise en page lorsque cela est absolument nécessaire. La même chose est vraie pour la table; l'utiliser lorsque vous avez des données tabulaires, mais pas autrement.

Ensuite, vous avez une plus sémantique de la page et vous n'avez pas besoin d'autant de classes définies dans votre CSS; vous pouvez cibler les balises directement à la place. Peut-être le plus important, vous avez une page qui va marquer beaucoup mieux avec Google (pour l'anecdote) que l'équivalent de la table ou de la div-lourds de la page. La plupart de tous, il vous aidera à mieux communiquer avec une partie de votre public.

Donc, si nous le retourner et de le regarder en termes de table vs div, c'est mon opinion que nous avons fait venir au point où la div est de plus en plus utilisé et le tableau est sous-utilisé. Pourquoi? Parce que quand vous pensez vraiment cela, il y a beaucoup de choses qui entrent dans la catégorie des "tableaux de données" qui ont tendance à être négligés. Réponses et commentaires sur cette page web, par exemple. Ils se composent de plusieurs enregistrements, chacun avec le même ensemble de champs. Ils sont stockés dans une table sql server, pour pleurer à haute voix. C'est la définition exacte des données tabulaires. Cela signifie un tableau html balise serait absolument être un bon choix sémantique à la disposition de quelque chose comme les posts ici sur StackOverflow. Le même principe s'applique à bien d'autres choses encore. Il peut ne pas être une bonne idée d'utiliser une balise de la table pour définir une des trois colonnes de mise en page, mais c'est certainement bien l'utiliser pour les grilles et les listes... sauf, bien sûr, quand vous pouvez réellement utiliser l'ol ou ul (liste) des balises.

52voto

Jon Limjap Points 46429

Lorsque les données que je vous présente soient, en effet, sous forme de tableau.

Je trouve ridicule que certains concepteurs de sites web utilisés divs sur données tabulaires sur certains sites.

Un autre usage, j’aurais pour elle serait de formes, en particulier l’étiquette : paires de textbox. C’était techniquement possible dans des boîtes de div, mais c’est beaucoup plus facile de faire cela dans les tableaux, et l'on peut affirmer que les paires d’étiquette : zone de texte sont en fait sous forme de tableau dans la nature.

25voto

netrox Points 357

J'ai utilisé pour faire pur CSS, mais j'ai abandonné cette quête en faveur de l'hybride de table/css approche que l'approche la plus pragmatique. Ironiquement, c'est aussi à cause de l'accessibilité. Jamais essayer de faire des CSS sur Sidekick? Ce qu'est un cauchemar! Jamais vu comment CSS de sites web sont rendus sur les nouveaux navigateurs? Les éléments se chevauchent ou ne pas s'afficher correctement, que j'ai dû désactiver le CSS. Jamais essayer de redimensionnement en fonction de CSS des sites web? Ils ont l'air terrible et souvent nuisible pour les aveugles s'ils utilisent le zoom dans le navigateur! Si vous le faites avec des tables, elles échelle beaucoup mieux. Quand les gens parlent de l'accessibilité, je trouve que beaucoup n'ont pas la moindre idée et ça m'énerve parce que je suis handicapé et qu'ils ne le sont pas. Ont-ils vraiment travaillé avec les aveugles? Les sourds? Si l'accessibilité est une préoccupation principale, pourquoi diable sont à 99% des vidéos non sous-titré? De nombreuses CSS puristes utiliser AJAX, mais ne parviennent pas à réaliser que AJAX souvent rend le contenu inaccessible.

De façon pragmatique, c'est ok pour utiliser une seule table comme l'un des principaux disposition aussi LONGTEMPS que vous fournissez les informations dans une logique de flux, si les cellules sont empilés (quelque chose que vous verriez sur les mobiles). Le CSS théorie sonne bien, mais partiellement réalisable dans la vraie vie avec trop de bidouilles, de quelque chose qui est contre l'idéal de "pureté".

Depuis l'utilisation du CSS avec des tables approche, j'ai économisé beaucoup de temps à la conception d'un site web et de l'entretien est beaucoup plus facile. Moins de hacks, plus intuitive. Je reçois moins d'appels de gens qui disent "j'ai inséré un DIV et maintenant il semble tout foiré!" Et plus important encore, absolument PAS de problèmes d'accessibilité.

21voto

Jorge Córdoba Points 18919

Généralement lorsque vous n’utilisez pas la table pour fournir une mise en page.

Tableaux-> des données

Divs-> mise en page

(principalement)

20voto

JacquesB Points 19878

Idéalement tableaux HTML doit être utilisé uniquement pour des données tabulaires. Cependant, les tables sont aussi le moyen le plus simple pour créer certains types particuliers d'basé sur une grille de mises en page, qui sont difficiles à imiter en cross-browser compatible CSS. Cet article décrit le problème plus en détail.

Le CSS prend en charge basé sur une grille de dispositions équivalentes à la table de balisage à l'aide de l'écran:table|table-cell de la propriété. Cependant cette partie de la spécification n'est pas pris en charge dans Internet Explorer (bien que tous les autres navigateurs modernes supportent.)

Cela vous laisse avec un dilemme: Soit utiliser des tableaux HTML pour la disposition - lequel est mauvais style, car il est des marques pour la présentation. Ou essayer d'imiter une grille avec des flotteurs et des abolute positionnement en CSS. Cela se révèle souvent compliqué et difficile à maintenir CSS.

Si l'accessibilité ou de la sémantique, la pureté est important pour vous, choisissez-en pur CSS. Si vous voulez que votre mise en page-grille de travaux sans trop de tracas, vous devriez probablement utiliser un tableau.

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