DIVs contre TABLEs une réfutation s'il vous plaît

Il y a beaucoup de gens qui se demandent "pourquoi ne devrions-nous pas utiliser des tables pour structurer notre HTML" et alors que beaucoup de réponses arrivent, je vois rarement quelqu'un se convertir au monde de la sémantique. Cela dit, je n'ai pas encore trouvé de réfutation convaincante pour soutenir la raison pour laquelle nous devrions (ou pourrions) utiliser des tableaux.

Quelqu'un veut-il expliquer pourquoi les tableaux sont des balisages structurels valides?


7 novembre 2008

Considérant que cette question ne s'est pas dissipée comme je le pensais, je suppose que je ferais mieux de clarifier ma question et d'expliquer son existence.

Par frustration après avoir lu l'argument «tables are easy» une fois de trop après la question «DIVs vs. TABLEs» je voulais exposer la question un peu plus et ne pas laisser les amoureux de la table se défaire si facilement.

Chacun pourrait dire à ses propres amis, mais on me donne toujours une application pour mettre sur nos sites qui a été créé par des développeurs de «tables sont plus faciles» qui déversent un morceau de HTML merdique dans mes pages, et pour être honnête, je Je ne vois juste pas assez d'amateurs de table qui écoutent les arguments.

Quelqu'un utilise Mambo dans la journée? Quelqu'un a-t-il dû prendre un pied à mettre un design sur le dessus de Sharepoint de Microsoft? Avoir à se frayer un chemin à travers toute cette merde de table imbriquée était un enfer, et en considérant qu'il a été écrit par quelques codeurs sanglants bien agace le diable hors de moi. Un balisage sémantique raisonnable existe depuis assez longtemps pour que les développeurs n'aient aucune raison de continuer à défendre les «tables sont plus faciles». Les tables ne sont pas plus faciles - elles sont paresseuses!

Ma question méritait le représentant négatif pour la manière négative dans laquelle il a été présenté, mais j'attends toujours que les gens acceptent que la seule raison pour laquelle ils utilisent des tables est parce qu'ils ne connaissent pas HTML. Parce que s'ils le faisaient, ils comprendraient, comme le dit jjrv, que les tableaux sont pour les données tabulaires.

0
Veuillez poser des questions auxquelles vous pouvez répondre, pas seulement discutées (à partir de la page Poser une question)
ajouté l'auteur Peter Hilton, source
Je l'ai vu beaucoup de questions de bas niveau: votre question a inspiré de bonnes réponses (dont certaines ont atteint +13), mais a été conservée à -6. S'il vous plaît upvote cette mauvaise question!
ajouté l'auteur Dan Rosenstark, source
Je suis d'accord avec @AviewAnew - cette question est bizarre, compte tenu de votre réponse à ce même sujet hier.
ajouté l'auteur delfuego, source

9 Réponses

Les tableaux sont pour les développeurs qui ne peuvent pas être dérangés de bidouiller heures avec CSS pour obtenir deux divs columnesque adjacentes pour développer jusqu'à 100% de hauteur et de largeur indépendamment du contenu, puis obtenir le hack pour travailler dans tous les navigateurs sans ajouter de wrappers div puis finalement dans la frustration absolue ils ont recours au correctif de 5 secondes:

<table width="100%">
<tr><td valign="top">Left nav</td><td valign="top">Main content</td></tr>
</table>

La dure réalité est que la plupart des utilisateurs (à l'exception de ceux qui utilisent des lecteurs d'écran) ne se soucient vraiment pas de la façon dont la page est balisée, tant qu'elle se charge rapidement.

Les développeurs ont des contraintes de budget et de temps, et le «bon» CSS et le balisage prennent du temps.

Le fait qu'il y ait une multitude de ressources sur le web expliquant en détails laborieusement comment vous pouvez aligner deux divs pour remplacer ce tableau simple, me dit très clairement que ce design est intrinsèquement aussi imparfait que les tables. Combien de tutoriels sont nécessaires pour expliquer comment ajouter une table avec deux colonnes à une page ?

HTML5 devrait nous apporter un peu de santé mentale avec les nouvelles balises header, footer, section, nav et aside. Exemple tiré de Nettuts +:

<div id="content">
    <div id="mainContent">
        
<!-- Blog post -->
 
        
<!-- Comments -->
 
        <form>
            <!-- Comment form -->
        </form>
    </div>
    
 
</div>

et puis pour le CSS:

#content {
    display: table;
}

    #mainContent {
        display: table-cell;
        width: 620px;
        padding-right: 22px;
    }

    aside {
        display: table-cell;
        width: 300px;
    }

Ceux d'entre vous qui ont un œil vif aimeront le sens de l'ironie, quand vous remarquerez que le CSS a les propriétés: display: table; et display: table-cell; .

Les tables sont de retour bébé! Glissez-vous à travers la porte arrière de HTML5 ;-)

0
ajouté
display: table et display: la table-cell n'a rien à voir avec le HTML5, et ça fait un bon bout de temps (mais pas bien implémenté).
ajouté l'auteur Matt Sach, source

Les tables sont valides lorsque vous avez une table de données. J'ai vu des widgets de la grille interactive où ils se mettent en quatre pour utiliser un tas de divs pour éviter l'étiquette de la table redoutée. Quand il s'agit de données tabulaires, faites-en un tableau.

Une vue plus controversée de la mienne est que lorsque vous avez des problèmes avec les problèmes de mise en page verticale en CSS, vous pouvez simplement utiliser une table et souvent le résoudre immédiatement. Ce n'est pas aussi joli que ça devrait l'être, mélanger le contenu avec la présentation, mais ça fait le boulot et ça évite les bidouilles CSS pour contourner IE.

0
ajouté

Les tables sont prises en charge même dans les anciens navigateurs HTML v1.0 croustillants. Si votre marché cible inclut des personnes utilisant des navigateurs intégrés dans les téléphones mobiles à partir des années 1990, cela pourrait être une bonne raison d'aller avec des tables.

Beaucoup de HTML généré automatiquement utilise des tables. Si votre code doit interagir avec ou inclure ces tables, il serait préférable d'opter pour la cohérence.

0
ajouté
Tout le point de balisage sémantique et CSS est que votre page aura toujours un sens, même dans un navigateur HTML v1 vieux croustillant. Les tableaux vous donneront simplement des incohérences et des cauchemars. De belles rubriques, des paragraphes et autres vous donneront une belle pae structurée qui prend tout son sens.
ajouté l'auteur roryf, source
Les tables n'ont pas été ajoutées au HTML avant HTML 3.2.
ajouté l'auteur Jim, source

Je dirais que jjrv est juste dans le fait que les tableaux sont excellents pour les données tabulaires, en sortant de votre façon de faire quelque chose "travailler" comme une table au lieu de simplement utiliser une table est retardée borderline.

Si vous vous souciez des standards, et que vous vous dirigez vers une implémentation solide sur tous les navigateurs, alors la majeure partie de votre balisage devrait être dans des mises en page sans table ... et vos données tabulaires sont dans ... vous l'avez deviné!

Si vous avez besoin de faire face à des navigateurs vraiment anciens, c'est-à-dire avant le redoutable IE6, vous aurez beaucoup de problèmes avec css, et compte tenu des statistiques d'utilisation actuelles, vous pouvez supposer que tout le monde aura un navigateur "moderne".

Tout ceci dit et ils sont des moments où vous vous frappez la tête contre le mur sur une mise en page et que vous voulez le dire à travers une table et ça marche. J'espère que c'est une pratique déconseillée, mais dans un clinch cela donne des résultats prévisibles.

0
ajouté

L'utilisation d'un balisage sémantique moderne est beaucoup plus facile lorsque vous ajoutez des fonctionnalités ou que vous corrigez des bogues ou que vous modifiez l'apparence d'un site Web axé sur les données. L'ajout de fonctionnalités AJAX ou de tout type de script interactif fonctionnera beaucoup mieux avec DIVs et CSS qu'avec TABLEs.

Passer à un gestionnaire de contenu comme Drupal, Joomla, WordPress, ou autres, sera beaucoup plus facile si vous êtes déjà organisé avec un balisage sémantique.

Les éditions plus récentes du navigateur prendront également en charge le balisage moderne plus efficacement et votre site s'affichera plus rapidement. Réorganiser toutes ces tables peut entraîner des temps d'affichage lents.

D'un autre côté, les tables sont là pour rester. Certaines personnes continueront à les utiliser et les navigateurs continueront à les afficher. Il n'y a rien de fondamentalement faux avec le balisage non sémantique si c'est ce que vous voulez. Un site complètement statique qui ne sera jamais modifié peut aussi bien fonctionner avec des tables qu'avec un balisage moderne.

En ce qui concerne le balisage structurel valide, voici ce qui suit: Les tableaux sont un excellent moyen d'afficher des données tabulaires, comme des bases de données ou des tableurs. Ils ne sont pas vraiment un balisage valide pour quoi que ce soit d'autre.

0
ajouté

Utilisez des tables pour le plus petit dénominateur commun html ou pour des données tabulaires où il est judicieux de traverser les colonnes ou les lignes. Sinon, les mises en page CSS sont beaucoup moins verbeuses et beaucoup plus faciles à maintenir une fois que vous avez compris.

0
ajouté

Les mises en page basées sur la DIV souffrent de limitations. Sans tables c'est essentiellement impossible pour implémenter une disposition en deux colonnes qui se développe correctement en fonction de la hauteur du contenu.

0
ajouté

Une note intéressante est liée à des applications JavaScript très complexes. Si vous choisissez Gmail ou Google Agenda avec Firebug, vous verrez que les tables sont très utilisées, même pour la mise en page. Certes, ceux-ci sont généralement générés dynamiquement, mais cela montre que dans de rares cas, certaines interfaces utilisateur interactives visuellement complexes sont extrêmement difficiles à construire en utilisant uniquement des DIV.

0
ajouté

RE: Pourquoi les tables?

Parce que certaines personnes (toujours, après toutes ces années) ont peur du changement. Ils ont entendu dire que l'utilisation du HTML sémantique est une bonne chose (et ne comprend généralement pas complètement le concept). Donc, ils essaient de mettre en place une mise en page en utilisant CSS ne l'ayant jamais fait auparavant. Ils se heurtent à quelques problèmes (bien documentés et généralement faciles à résoudre), lèvent la main et retournent aux tables.

Ils décident alors que le CSS prend trop de temps («je ne veux pas passer le temps à l'apprendre») ou «pas pratique» («je ne comprends pas, c'est trop dur») et que les tableaux sont la seule vraie façon. Par l'entêtement et l'ignorance, ils croient leurs propres conneries et convainquent leurs clients et leurs pairs.

Et leur monde reste heureux et inchangé, disparaissant plus loin dans le passé et plus profond dans l'obsolescence *

Et c'est "pourquoi les tables". La fin.

(* sauf qu'ils sont bien adaptés au codage des emails HTML)

0
ajouté