< div > élément au lieu de < table > ;?

Question

Duplicate of:

• Pourquoi ne pas utiliser de tableaux pour la mise en forme au format HTML?
• Tables vs DIV ou CSS vs Stupid

Ces derniers temps, on a beaucoup parlé d'utiliser plutôt les balises div que table pour rendre vos pages plus ardues pour les navigateurs. Pourquoi div est-il meilleur?

Answer 1

quelques raisons:

1) div est plus sémantiquement correct dans la plupart des cas. Les personnes qui codent leurs sites dans la structure de tables n'utilisent pas de tables pour ce qu'elles sont faites, à savoir des données tabulaires. Les divs représentent une " division " ou une section de la page, donc mettre des éléments dans div est plus correct.

2) Les divs sont plus flexibles et plus faciles à coiffer et à entretenir. vous n'avez pas besoin d'écrire < table > < tr > < td > Texte ici < / td > < / tr > < à chaque fois que vous voulez dire quelque chose quand vous pouvez simplement écrire < div > texte ici < / div > à la place. vous pouvez ajouter des hooks css (classes ou éléments) aux tables et aux divs, mais avec divs, la flexibilité est infiniment plus flexible.

3) Les sites structurés sous forme de tables sont simplement laids:)

Answer 2

Le point clé ici est de les utiliser pour la mise en page. Les tableaux pour les données tabulaires ne présentent aucun inconvénient. C’est pour cela qu’ils sont.

Mais lorsque vous utilisez des tableaux pour la mise en page, vous créez une structure de page très rigide qui ne fonctionne généralement pas bien avec des tailles d'écran différentes, des agents utilisateurs (pensez aux navigateurs mobiles ou aux lecteurs d'écran pour aveugles. Surtout dans ce dernier cas détruire tout ordre dans lequel le contenu doit être lu à l'utilisateur). Malheureusement, les tableaux restent l’un des mécanismes les plus robustes pour la mise en page, car les implémentations ne diffèrent guère et fonctionnent pendant plus de 10 ans sans faille. La CSS est une toute autre affaire.

Mais fondamentalement, cela se résume à ceci:

Tableaux

• enfreindre la distinction entre contenu et présentation
• sont difficiles et difficiles à maintenir à long terme, en particulier lorsque vous essayez de modifier la disposition de plusieurs pages de la même manière
• n’ont pas une signification sémantique forte, ce qui est important pour les personnes ayant une déficience qui peuvent compter uniquement sur un texte lu à voix haute. Les tableaux sont lus ici ligne par ligne, colonne par colonne, ce qui n’est presque toujours pas très utile dans les présentations basées sur des tableaux

Mise en forme CSS

• est plus difficile à comprendre (au moins pour la présentation)
• permet une séparation (parfois) nette du contenu et de la présentation. Notez que, parfois, vous devez souvent utiliser plusieurs éléments de conteneur en HTML pour permettre à certaines mises en page et certains styles de fonctionner correctement, car CSS présente certaines limites
• permet une meilleure signification sémantique du balisage sous-jacent si vous n'utilisez pas aveuglément < div > et < span > . Il existe de nombreuses balises qui ont une signification et doivent être utilisées comme telles. Par exemple, n'utilisez pas < div class = "1 " > pour utiliser < h1 > .

Answer 3

Parce qu’une table transmet une signification sémantique - étant donné que vous affichez actuellement des données tabulaires, tout comme h1 signifie que vous avez un en-tête. Donc, si vous utilisez des tableaux pour mettre en forme votre sortie, vous induisez en erreur l'interprétation de la sémantique de votre code.

Cela peut par exemple entraîner des problèmes d'accessibilité pour les personnes utilisant un lecteur d'écran.

Answer 4

Voici le pros & amp; inconvénients de div-& amp; conception basée sur des tables .

Answer 5

L'utilisation de div est préférable à celle de table car elle permet de contrôler facilement les éléments de la conception. Il peut s'agir à la fois de conteneur pour les contrôles et de table. La table est utilisée pour grouper les données avec une structure simillar. Elle est donc conçue pour cette tâche, mais div est considéré comme conteneur principalement que la table. J'ai trouvé la différence entre la collecte de nombreux contrôles et la possibilité de contrôler le conteneur dans le conteneur, mais dans le tableau, j'ai été dérouté car je dois insérer l'intérieur et sa boucle l'un dans l'autre.

Answer 6

la plupart des gens expliquent comment la table est censée être utilisée uniquement pour les données et pose un problème de performances lorsque vous l'utilisez à des fins de mise en page. En outre, il est supposé être plus flexible car vous pouvez créer < div > flux à gauche, flux à droite et flux partout ailleurs.

Cependant, à mon humble avis, cela ne vaut pas la peine. En particulier lorsque vous avez des colonnes de contrôles censées s'aligner correctement avec les étiquettes correspondantes, cela prend trop de temps pour que les éléments s'alignent correctement.

Answer 7

L’utilisation de tableaux pour la mise en page était révolutionnaire pour la conception Web, mais c’était il ya quinze ans et il n’y avait pas d’autre alternative. C’est à cause de cette histoire que les tableaux sont même considérés pour la mise en page de nos jours.

La disposition basée sur CSS est beaucoup plus souple que celle basée sur un tableau. Il reste encore quelques choses plus faciles à réaliser avec les tableaux, mais d’autre part, beaucoup de choses très faciles à faire avec CSS sont très compliquées ou impossibles à faire avec les tableaux.

Answer 8

Je vous explique mes principales raisons personnelles d'utiliser des divs:

• Les tables ont juste une grille statique alors que les div sont dynamiques: La première ligne d'un tableau définit toutes les colonnes (comme dans MS Excel). Dans les lignes suivantes, vous pouvez simplement combiner ces colonnes, mais vous ne pouvez pas modifier la disposition de base que vous avez définie dans votre première ligne. Les divs sont dynamiques: vous pouvez créer un patchwork en laissant les divs se chevaucher ou laisser de l’espace entre eux. Tout ce que vous voulez. Vous n'êtes pas obligé de penser en ligne. Tu es libre. Beaucoup plus de flexibilité.

• Les tableaux posent des problèmes d'incompatibilité entre navigateurs: Les tableaux ne semblent pas toujours identiques. Chaque navigateur vous donne sa propre interprétation de la table et de son contenu. Ainsi, beaucoup de surprises inconfortables. Un navigateur vous montre votre texte habituel en caractères gras. Un autre navigateur donne à votre table plus ou moins de marge par rapport aux autres éléments HTML. Par conséquent, les tables ne sont pas bien positionnées. Ce sont des heures de travail pour résoudre ces problèmes avec des solutions de contournement compliquées. Les divs ont toujours le même aspect dans tous les navigateurs. Même Internet Explorer (connu comme un fauteur de troubles auprès des programmeurs Web) pose moins de problèmes si vous utilisez des divs.

• Les divs rendent plus rapidement: Les charges se chargent plus rapidement que les tables. Navigation plus rapide entre les pages. Mieux regarder et sentir.

J'espère que ça aide. Cheers.

Answer 9

J'utilise des CSS et des tableaux et parfois des DIV, mais les tableaux sont si complets! Et ils ont l'air si beaux dans Dreamweaver, Frontpage ... Il est si difficile de donner des tableaux, mais il semble que je le ferai, car il faut que mes pages se chargent plus rapidement!