Tableaux au lieu de DIV [duplicata]
https://stackoverflow.com/questions/30251
italiano
english
français
española
中国
日本の
العربية
Deutsch
한국어
Português
RussianQuestion
Doublon possible :
Pourquoi ne pas utiliser des tableaux pour la mise en page en HTML ?
Dans quelles conditions choisir des tableaux plutôt que des DIV dans le codage HTML ?
La solution
L'ensemble du truc "Tables vs Divs" manque de peu la cible.Ce n'est pas "table" ou "div".Il s'agit d'utiliser du HTML sémantique.
Même la balise div ne joue qu'un petit rôle dans une page bien présentée.N'en abusez pas.Vous ne devriez pas en avoir besoin d’autant si vous assemblez correctement votre code HTML.Des éléments tels que des listes, des ensembles de champs, des légendes, des étiquettes, des paragraphes, etc. peuvent remplacer une grande partie de ce pour quoi un div ou un span est souvent utilisé.Div doit être utilisé principalement lorsqu'il est logique d'indiquer une logique division, et approprié uniquement pour une mise en page supplémentaire lorsque cela est absolument nécessaire.Il en va de même pour la table ;utilisez-le lorsque vous disposez de données tabulaires, mais pas autrement.
Ensuite, vous avez une page plus sémantique 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 plus important encore, vous disposez d'une page qui obtiendra de bien meilleurs résultats avec Google (de manière anecdotique) que le tableau équivalent ou la page lourde en div.Surtout, cela vous aidera à mieux vous connecter avec une partie de votre public.
Donc, si nous revenons en arrière et regardons les choses en termes de table par rapport à div, j'estime que nous sommes en fait arrivés au point où div est surutilisé et table est sous-utilisée.Pourquoi?Parce que quand on y réfléchit vraiment, il y a beaucoup de choses qui entrent dans la catégorie des « données tabulaires » et qui ont tendance à être négligées.Réponses et commentaires sur cette même page Web, par exemple.Ils sont constitués de plusieurs enregistrements, chacun comportant le même ensemble de champs.Ils sont même stockés dans une table de serveur SQL, pour crier à haute voix.C'est la définition exacte des données tabulaires.Cela signifie qu'une balise de table HTML serait absolument un bon choix sémantique pour mettre en page quelque chose comme les articles ici sur Stack Overflow.Le même principe s’applique également à bien d’autres choses.Ce n'est peut-être pas une bonne idée d'utiliser une balise table pour configurer une disposition à trois colonnes, mais c'est certainement très bien de l'utiliser pour des grilles et des listes...sauf, bien sûr, lorsque vous pouvez réellement utiliser les balises ol ou ul (list).
Autres conseils
Alors que les données que je présente sont bel et bien tabulaires.
Je trouve ridicule que certains concepteurs de sites Web utilisent des divs sur des données tabulaires sur certains sites.
Une autre utilisation que j'en aurais serait les formulaires, en particulier label :paires de zones de texte.Cela pourrait techniquement être fait dans des boîtes div, mais il est beaucoup plus facile de le faire dans des tableaux, et on peut affirmer que les paires label:textbox sont en fait de nature tabulaire.
J'avais l'habitude de faire du CSS pur mais j'ai abandonné cette poursuite en faveur de l'approche hybride table/css comme approche la plus pragmatique.Ironiquement, c'est aussi à cause de l'accessibilité.Avez-vous déjà essayé de faire du CSS sur Sidekick ?Quel cauchemard!Avez-vous déjà vu comment les sites Web basés sur CSS sont affichés sur les nouveaux navigateurs ?Les éléments se chevauchaient ou ne s'affichaient tout simplement pas correctement et j'ai dû désactiver le CSS.Avez-vous déjà essayé de redimensionner des sites Web basés sur CSS ?Ils ont l’air horribles et souvent préjudiciables aux aveugles s’ils utilisent les fonctionnalités de zoom du navigateur !Si vous faites cela avec des tableaux, ils évoluent beaucoup mieux.Quand les gens parlent d'accessibilité, je constate que beaucoup n'en ont aucune idée et cela m'énerve parce que je suis handicapé et eux non.Ont-ils vraiment travaillé avec les aveugles ?Le sourd?Si l’accessibilité est une préoccupation majeure, pourquoi diable 99 % des vidéos ne sont-elles pas sous-titrées ?De nombreux puristes CSS utilisent AJAX mais ne réalisent pas qu'AJAX rend souvent le contenu inaccessible.
De manière pragmatique, vous pouvez utiliser un seul tableau comme mise en page principale aussi LONGTEMPS que vous fournissez les informations dans un flux logique si les cellules sont empilées (ce que vous verriez sur les mobiles).La théorie CSS semble géniale mais partiellement réalisable dans la vraie vie avec trop de hacks, ce qui est contraire aux idéaux de « pureté ».
Depuis que j'utilise l'approche CSS avec tableaux, j'ai gagné beaucoup de temps dans la conception d'un site Web et sa maintenance est beaucoup plus facile.Moins de hacks, plus intuitifs.Je reçois moins d'appels de gens disant "J'ai inséré une div et maintenant tout cela a l'air foutu!" Et plus important encore, absolument aucun problème d'accessibilité.
Habituellement, lorsque vous n'utilisez pas le tableau pour fournir une mise en page.
Tableaux -> données
Divs -> mise en page
(principalement)
Note:Au moment où la question a été posée, il existait des raisons pratiques d’utiliser des tableaux à des fins de mise en page.Cela n'est plus nécessaire en raison des améliorations du navigateur, j'ai donc mis à jour la réponse.
HTML <table>-les éléments doivent être utilisés lorsque les données ont logiquement une structure bidimensionnelle.Si les données peuvent être structurées en lignes et en colonnes et que vous pouvez appliquer de manière significative des en-têtes aux lignes et aux colonnes, vous disposez probablement de données tabulaires.
Si vous n'avez qu'une seule ligne ou une seule colonne de données, alors ce ne sont pas des données tabulaires - c'est juste un contenu linéaire.Vous avez besoin d'au moins deux lignes et deux colonnes avant de pouvoir être considéré comme des données tabulaires.
Quelques exemples:
Utiliser des tableaux pour placer les barres latérales et les en-têtes/pieds de page.Il ne s’agit pas de données tabulaires mais d’une mise en page.Quelque chose comme une grille CSS ou une flexbox est plus approprié.
Utiliser des tables pour des colonnes de style journal.Il ne s’agit pas de données tabulaires : vous les liriez toujours de manière linéaire.Quelque chose comme les colonnes CSS est plus approprié.
Je ferais une distinction entre le HTML pour les sites Web publics (tableaux non-non-non, divs oui-oui-oui) et le HTML pour les applications Web semi-publiques ou privées, où j'ai tendance à préférer les tableaux même pour la mise en page.
La plupart des raisons respectables pour lesquelles « Les tables sont mauvaises » ne concernent généralement que les sites Web publics, mais ne posent pas vraiment de problème aux applications Web.Si je peux obtenir la même mise en page et avoir une apparence plus cohérente dans tous les navigateurs en utilisant une TABLE plutôt qu'un CSS + DIV compliqué, alors j'approuve généralement la TABLE.
Comme de nombreuses affiches l'ont déjà mentionné, vous devez utiliser des tableaux pour afficher les données tabulaires.
Des tableaux ont été introduits dans HTML3.2 voici le paragraphe pertinent de la spécification sur leur utilisation :
[tableaux] peuvent être utilisés pour baliser du matériel tabulaire ou à des fins de mise en page...
D'accord avec Thomas : la règle générale est que si cela a du sens sur une feuille de calcul, vous pouvez utiliser un tableau.Sinon non.
N'utilisez simplement pas de tableaux comme mise en page de la page, c'est le principal problème que les gens rencontrent avec eux.
Je peux voir l'argument en faveur des tableaux pour les formulaires, mais il existe une alternative plus intéressante...il vous suffit de retrousser vos manches et d'apprendre le CSS.
Par exemple:
<fieldset>
<legend>New Blog Post</legend>
<label for="title">Title:</label>
<input type="text" name="title" />
<label for="body">Body:</label>
<textarea name="body" rows="6" cols="40">
</textarea>
</fieldset>
Vous pouvez prendre ce code HTML et disposer le formulaire soit avec des étiquettes côte à côte, soit avec des étiquettes au-dessus des zones de texte (ce qui est plus simple).Avoir de la flexibilité aide vraiment.C'est également moins de HTML que l'équivalent en tableau de l'un ou l'autre.
Pour quelques excellents exemples de formulaires CSS, consultez ces excellents exemples :
http://jeffhowden.com/code/css/forms/
http://www.sitepoint.com/article/fancy-form-design-css/
http://www.smashingmagazine.com/2006/11/11/css-based-forms-modern-solutions/
J'opterai généralement pour des tableaux pour afficher des informations de type formulaire (prénom, nom, adresse, etc.) où il est important de superposer les étiquettes et les champs sur plusieurs lignes.DIV que j'utilise pour la mise en page.
Bien sûr, la table est enveloppée dans un DIV :)
Les tableaux ont été conçus pour un contenu tabulaire et non pour une mise en page.
Alors, ne vous sentez jamais mal si vous les utilisez pour afficher des données.
J'utilise des tableaux dans deux cas :
1) Données tabulaires
2) Chaque fois que je souhaite que ma mise en page se dimensionne dynamiquement en fonction de son contenu
Si vos données peuvent être disposées dans une grille bidimensionnelle, utilisez <table>.Si ce n’est pas possible, ne le faites pas.En utilisant <table> car tout le reste est un hack (même s'il ne propose souvent pas d'alternatives appropriées, en particulier en ce qui concerne la compatibilité avec les navigateurs plus anciens). Pas en utilisant <table> pour quelque chose qui devrait clairement en être un est tout aussi mauvais. <div> et <span> ne sont pas pour tout ;en fait, étant totalement dénués de sens sur le plan sémantique, ils sont à éviter à tout prix au profit d’alternatives plus sémantiques.
A ce sujet, je pensais ce le site était plutôt drôle.
1) Pour afficher des données tabulaires.Un calendrier est un exemple de données tabulaires qui ne sont pas toujours évidentes au premier abord.
2) Je travaille pour une société de facturation médicale et presque toute la mise en page de notre travail interne est réalisée à l'aide de CSS.Cependant, de temps en temps, nous recevons des compagnies d'assurance des formulaires papier que nos émetteurs de factures doivent utiliser, et un programme les convertit au format HTML qu'ils peuvent remplir et imprimer via l'intranet.Pour garantir que les formulaires sont acceptés, ils doivent correspondre très étroitement à la version papier originale.Pour ceux-ci, il est simple de recourir aux tables.
Les tableaux sont utilisés pour les données tabulaires.S'il est judicieux de le mettre dans une feuille de calcul, utilisez un tableau.Sinon, vous pouvez utiliser une meilleure balise, telle que div, span, ul, etc.
Je crois juste un contenu tabulaire.Par exemple, si vous avez imprimé un tableau de base de données ou des données de type feuille de calcul au format HTML.
Si vous souhaitez avoir un code HTML sémantiquement correct, vous devez utiliser des tableaux uniquement pour les données tabulaires.
Sinon, vous utilisez des tableaux pour tout ce que vous voulez, mais il existe probablement un moyen de faire la même chose en utilisant divs et CSS.
@Marius :
Les données de mise en page sont-elles tabulaires ?Non, alors que c'était la norme il y a quelques années ça ne l'est plus maintenant :-)
Une autre utilisation que j'en aurais serait les formulaires, en particulier label :paires de zones de texte.Cela pourrait techniquement être fait dans des boîtes div, mais il est beaucoup plus facile de le faire dans des tableaux, et on peut affirmer que les paires label:textbox sont en fait de nature tabulaire.
J'ai tendance à donner à l'étiquette une largeur fixe ou à l'afficher sur la ligne ci-dessus.
@Jon Limjap
Pour étiquette :zone de texte, ni les divs ni les tableaux ne sont appropriés : <dl>les s sont
Une autre utilisation que j'aurais pour ce serait des formulaires, en particulier l'étiquette:paires de zones de texte.Cela pourrait techniquement être fait dans Div Boxes, mais c'est beaucoup, beaucoup plus facile de le faire dans les tables, et on peut affirmer que les paires d'étiquettes: TextBox sont en fait de nature tabulaire.
Je constate cela assez souvent, en particulier parmi les développeurs MS.Et je l'ai fait pas mal dans le passé.Cela fonctionne, mais cela ignore certains facteurs d’accessibilité et de bonnes pratiques.Vous devez utiliser des étiquettes, des entrées, des jeux de champs, des légendes et du CSS pour mettre en page vos formulaires.Pourquoi?Parce que c'est à cela qu'ils servent, c'est plus efficace et je pense que l'accessibilité est importante.Mais ce n'est que ma préférence personnelle.Je pense que tout le monde devrait essayer de cette façon avant de le condamner.C'est rapide, facile et propre.
Chaque fois qu'une page contenant des tableaux est chargée par un navigateur, le navigateur met plus de temps à restituer correctement la balise.Alors que si le div était utilisé, le navigateur prend moins de temps car il est plus léger.Et de plus, nous pouvons appliquer le CSS pour faire apparaître les divs sous forme de tableau,
Les tables sont normalement lourdes et les div sont légères.
Il est clair que les DIV sont utilisés pour la mise en page mais il m'est arrivé d'être "obligé" d'utiliser des feuilles de calcul pour faire une mise en page en grille au sein d'une structure div pour ces raisons :
l'ajout de valeurs en pourcentage ne permettait pas un bon alignement avec le div, alors que les mêmes valeurs exprimées sur les cellules des tableaux donnaient le résultat attendu.
Je pense donc que les tableaux sont toujours utiles non seulement pour les données, mais aussi pour la situation ci-dessus, en plus de cela, les tableaux sont toujours des navigateurs conformes au W3C et les navigateurs alternatifs (pour les personnes handicapées par exemple) interprètent les leurs correctement.
Les divisions sont simples divisions, ils ne sont pas destinés à être utilisés pour regrouper des sections de la page qui sont liées au sens sémantique.Ils n’ont aucune autre signification implicite que celle-là.
Les tableaux étaient à l'origine destinés à afficher des données scientifiques, telles que des résultats de laboratoire, à l'écran.Dave Raggett n'avait certainement pas l'intention de les utiliser pour implémenter la mise en page.
Je trouve que cela reste assez clair dans votre esprit si vous vous souvenez de ce qui précède, si c'est quelque chose que vous vous attendez normalement à lire dans un tableau, alors c'est la balise appropriée, s'il s'agit d'une mise en page pure, alors utilisez autre chose pour répondre à vos besoins.
