Faut-il éviter les tableaux en HTML à tout prix?

Question

Il est conseillé d’utiliser des tableaux dans les pages HTML (maintenant que nous avons CSS)?

Quelles sont les applications des tables? Quelles sont les fonctionnalités / capacités des tables qui ne sont pas en CSS?

Questions connexes

• Tables au lieu de DIV
• DIV vs TABLE
  • DIVs contre TABLEs une réfutation s'il vous plaît

Answer 1

Non, pas du tout. Mais utilisez des tableaux pour les données tabulaires. Ne les utilisez simplement pas pour une mise en page générale.

Mais si vous affichez des données tabulaires, comme des résultats ou peut-être même un formulaire, utilisez des tableaux!

Answer 2

Je suppose que je ne suis pas la majorité ici, mais je vois toujours beaucoup d’utilisation pour les tableaux en HTML. Bien sûr, oui, pour des choses comme les formes, vous ne pouvez tout simplement pas battre une table. Il serait certainement possible d’aligner les étiquettes et les champs de formulaire correspondants en utilisant celui de DIV, mais ce que serait un PITA et le redimensionnement de la page seraient laids dans certains cas. Une table fait des merveilles ici.

Mais considérez également les problèmes plus vastes. Par exemple, avez-vous essayé de créer une mise en page standard à 3 colonnes avec en-tête et pied de page utilisant uniquement DIV et CSS? Encore une fois, c'est très possible, et il y a environ 1000 sites Web avec des exemples, mais ils ont tous tendance à souffrir des mêmes problèmes. Le premier problème est que les colonnes n’ont jamais vraiment envie de devenir toutes de la même hauteur sans assistance javascript. Le deuxième problème est que changer la mise en page est souvent une tâche délicate, car c’est un peu un acte d’équilibrage que de tout obtenir & "Tout à fait juste &"; pour commencer, alors vous ne voulez pas y toucher. Enfin, et cela remonte à ce dernier point - ce n’est pas facile. Vous devez disposer toutes vos DIV, puis revenir en arrière et créer le CSS magique qui force ces DIV dans la position appropriée, puis passer quelques heures à la peaufiner jusqu'à ce que tout soit correct. Et puis, regarder le HTML sans visionneuse ne vous donne vraiment AUCUNE idée de ce à quoi la page ressemble, car elle est TOUT réinterprétée par le CSS.

Maintenant, option B. Utilisez un tableau. Passez environ 30 secondes à taper le & Lt; tr & Gt; et < td > balises, probablement pas de CSS du tout, pas de javascript 'fixit', et savez EXACTEMENT à quoi ça ressemblera en regardant simplement le HTML.

Certes, il y a des arguments pour et contre les tables, et les puristes semblent privilégier la mise en page de DIV, mais n'utilisez pas celle-ci pour des raisons religieuses simplement parce que quelqu'un vous a dit que les tables étaient mauvaises. Utilisez ce qui fonctionne le mieux pour vous, votre page et la manière dont vos visiteurs vont interagir avec la page. Si c'est une table, utilisez-la. Sinon, ne le faites pas.

Answer 3

Jusqu'à présent, tout le monde a dit que les tableaux ne devraient être utilisés que pour les données tabulaires, et c'est vrai. Jetez un coup d’œil à la source HTML de chaque page de SO et vous verrez qu’elles ont une idée différente ...

Je pense que leur raison est que parfois utiliser un tableau est tellement plus simple. Cependant, il existe de très bonnes raisons d’utilisabilité pour les éviter.

Answer 4

Autres que pour les données tabulaires , les tableaux sont malheureusement toujours nécessaire si vous souhaitez créer des dispositions de grille flexibles telles que des formulaires complexes, de manière compatible avec plusieurs navigateurs.

CSS2 prend en charge la création de dispositions de grille flexibles sans utiliser l'élément table via display propriété , mais il s’agit de non pris en charge dans IE6 ou IE7 .

Toutefois, pour les dispositions de formulaire les plus élémentaires, CSS devrait suffire.

Answer 5

Si seul l'équivalent CSS était aussi utile pour configurer un & "tableau-like &"; mise en page, alors j'aimerais utiliser CSS. Je trouve que le temps qu'il faut pour imiter les choses que d'autres ont énumérées ici (hauteurs égales sur les cellules, rangées à croissance automatique, etc.) ne vaut tout simplement pas la peine. Je n’obtiens pas de retour sur investissement plutôt que de lancer rapidement une table ensemble dans la plupart des cas.

Tous les navigateurs peuvent s’accorder sur la manière dont un tableau doit être présenté. Bam. Fait.

Voici comment mes folies CSS vont habituellement: Essayez de configurer une mise en page de type tableau en CSS. Passez 20 minutes ou plus à tout obtenir dans Mozilla, puis ouvrez-le dans IE. Passez encore 30 minutes à peaufiner ces deux navigateurs. Imaginez qu’il n’ya que deux navigateurs dans le monde, car j’ai vraiment besoin de travailler.

Je crois en la promesse de CSS: séparation des préoccupations. Le problème est que, pour ceux qui ont besoin d'être productifs, CSS n'est pas prêt pour les heures de grande écoute. Ou peut-être que ce sont les moteurs de rendu des navigateurs, quels qu'ils soient.

Answer 6

L’avantage de CSS est qu’il sépare la conception et la présentation du contenu.

Si vous avez des données tabulaires, il est logique d'utiliser une balise <TABLE>. Si vous souhaitez mettre en forme différents blocs de contenu, utilisez <DIV> ou <SPAN> et CSS.

Answer 7

Les tableaux sont destinés à la sortie de données tabulaires. Tout ce que vous pourriez afficher dans une feuille de calcul, des colonnes de résultats, ce genre de choses.

La suggestion d'utiliser CSS plutôt que des tableaux concerne des dispositions en colonnes, qui ne sont pas vraiment des tableaux réels. Il n'a jamais été question de suggérer que les tables soient supprimées complètement.

Answer 8

Les tableaux n'ont pas d'équivalent en CSS2 et ils ne sont pas faciles à dupliquer à l'aide de CSS. La partie particulière des tableaux qui est difficile à reproduire est le dimensionnement automatique des colonnes. Bien qu'il soit facile de laisser la rangée 1 atteindre la même taille sur la page, il est difficile pour la rangée suivante de faire correspondre la taille de la colonne ou la taille de chaque cellule de manière dynamique. En fait, vous ne pouvez pas le faire sans utiliser d'autres langages de script tels que javascript, php ou autres. Vous pouvez utiliser les largeurs max et min, ainsi que les pourcentages définis pour la taille des cellules ou la largeur des cellules de code, mais les cellules à croissance dynamique fonctionnent sans problème pour une ligne. C'est la ligne suivante située en dessous qui ne correspond pas.

Answer 9

En parcourant ces réponses, je n’ai pas trouvé de raison valable pour laquelle des tableaux sont nécessaires pour la mise en page: les courriels HTML.

Je travaille pour une très grande société financière et nous suivons environ 600 emplois différents par mois ... dont beaucoup sont des campagnes par e-mail multiples.

Vous ne pouvez utiliser css pour la mise en page pour aucun lecteur de courrier. Il existe quelques spécifications CSS en ligne que vous pouvez utiliser et qui concernent la couleur, les caractères et la taille de la police. Même la hauteur de ligne est assez largement disponible, mais pour la mise en forme, vous devez utiliser des tableaux comme tous les lecteurs de courrier électronique majeurs et mineurs (Outlook 97 / 03, Entourage, MSN, etc.) lisez-les bien.

Les problèmes avec les tables entrent en jeu lorsque vous avez des td pour lesquels aucune hauteur / largeur n'est spécifiée, qu'ils contiennent ou non des données. Ainsi, les dispositions de tableau "brisées" sont généralement corrigées en prêtant attention aux attributs et à ... oui aux espaces dans le code HTML ... oui aux espaces qui ne sont pas censés avoir une importance.

Ainsi, si vous travaillez pour une grande entreprise ou si vous avez un client très important, soyez prêt à jeter toute la technologie actuelle à la porte et à avoir votre chapeau de table html!

Answer 10

Je pense que tout dépend du temps et des efforts. Alors qu'un puriste pourrait dire & "Utiliser uniquement des tableaux pour des données tabulaires, &"; J'ai déjà utilisé des tableaux pour faciliter la mise en page entre navigateurs.

Pour moi, c'est une question d'utilisation du temps. Je peux soit passer mon temps à cogner sur le CSS pour bien faire les choses, soit le jeter dans un tableau et y passer beaucoup moins de temps. J'ai tendance à aller dans cette voie jusqu'à ce que tout soit opérationnel. Une fois que la fonctionnalité est là, je retourne en arrière et je peaufine le CSS / HTML.

Answer 11

Je dois suivre l'approche des tables ici. La raison en est simplement une question de coût. Jusqu'à ce qu'une approche centrée sur CSS bien structurée soit mise au point, et que je parle au niveau macro ... pas au niveau micro dans les conteneurs, il est inefficace d'essayer de positionner CSS dans une approche généralisée de la mise en forme. Vous devez aborder ceci du point de vue de la personne qui écrit le chèque pour le développement.

Il y a quelques années, je me suis engagé à développer et à maintenir un site pour une grande chaîne d'hôtels. Nous sommes allés avec une mise en page axée sur la table; votre en-tête de base, corps, pied de page avec les colonnes gauche / droite. Nous avons également utilisé des tableaux pour certains éléments plus fins, tels que des boutons non graphiques. La société mère de la chaîne maintenait son propre site et adoptait une approche de mise en page purement CSS. Lorsque IE7 est sorti, notre site fonctionnait parfaitement, sans aucune modification. Le site de la société mère était en désordre. Au total, ils ont consacré environ 1 000 heures au total (entre réunions / développement / contrôle qualité / déploiement) à la résolution des problèmes.

Lorsque vous êtes rémunéré pour développer un site, votre responsabilité consiste à atténuer les risques futurs et à minimiser les coûts de développement, en particulier si ces coûts n’apportent aucune valeur supplémentaire au site (votre produit).

Answer 12

Mon opinion très simple et très simple à ce sujet est que les tableaux sont là pour les données tabulaires - pas pour positionner une chose au-dessus ou à côté d'un autre élément parce que cela vous plairait.

Donc, si vous voulez afficher une table de données, faites-le (avec une table). Si vous souhaitez positionner du contenu sur la page: utilisez css.

Answer 13

Je pense que vous pourriez être un peu confus. CSS est une méthode de style de documents HTML, qu’il s’agisse d’un élément de tableau ou d’un "div".

Auparavant, les tableaux étaient utilisés en HTML pour concevoir la mise en page complète. Il était courant de voir plusieurs tables imbriquées (généralement générées par des programmes WYSIWYG tels que Dreamweaver), ce qui a entraîné un cauchemar de maintenance.

Depuis l'introduction et l'adoption des feuilles de style CSS, il est désormais correct d'utiliser un tableau pour les données tabulaires. Cela signifie que si vos données sont rendues le plus naturellement possible, utilisez l’élément table. Vous pouvez toujours styler la table en utilisant CSS.

Cependant, et je désapprouve généralement cette méthode car elle duplique les fonctionnalités existantes, il est possible d’utiliser des éléments pour construire une table semblable à une structure. En fait, il existe plusieurs sites Web qui généreront un tel code pour vous, mais je n’ai aucun lien à vous proposer.

Rappelez-vous également que certains utilisateurs peuvent visionner en mode texte uniquement ou utiliser un lecteur d'écran, ce qui risquerait de casser la page (comme de lire les colonnes verticalement plutôt qu'horizontalement), d'où l'utilisation appropriée des tableaux.

HTH

Answer 14

Je crois et espère que l’ère de l’utilisation des tableaux pour la mise en page est révolue. En termes simples: une table est une table, rien d’autre .

Ce que je pense être le nouveau sujet similaire à la guerre des flammes pour les prochaines années est le suivant: dois-je utiliser la nouvelle fonctionnalité CSS afficher : tableau , tableau- cellule , rangée-tableau , etc., pour la mise en page? ? : -)

Answer 15

Je pense que la raison en est que l'utilisation de tableaux html est plus facile à comprendre lors de la création d'une structure et d'une mise en forme que CSS. L'utilisation de CSS est plus abstraite mais permet de séparer votre code.

En réponse à la & Quot; structure & Quot; argument ... par définition, n'utilise pas de tables HTML donnant une structure aux données pour que vous les identifiiez comme & "; tabular &"; Que ce soit en CSS ou en HTML, vous contrôlez le flux et la présentation des données. Que ce soit tabulaire ou autre ...

Si les tables CSS sont si importantes (et je suis sûr que ma réponse déclenchera une sorte de guerre des flammes), pourquoi Visual Studio ne dispose-t-il pas d'un mécanisme permettant de créer une mise en forme à l'aide de CSS? Oh, vous n'avez pas vérifié la fonctionnalité de mise en page dans VS? Oui, vous obtenez des tableaux, directement de Microsoft. Je ne me plains pas, soulignant que si cela signifiait autant pour le reste du monde, vous verriez MS basculer vers CSS.

A mon avis, faites ce qui correspond le mieux à votre projet. Pour les projets Web d’une ou deux pages, j’utilise toujours le langage HTML, car c’est évident. L'utilisation de CSS est plus abstraite et certains matins, je n'ai tout simplement pas pris autant de café. Les tableaux HTML peuvent devenir désordonnés, rapidement. CSS met un peu plus de temps à devenir désordonné mais le sera aussi.

Answer 16

Bien que, pour certaines mises en page, l'utilisation de tableaux puisse sembler plus simple au premier abord, lorsque le temps de maintenance arrive, css est rentable. Surtout si vous souhaitez changer la position de quelque chose ou si vous souhaitez utiliser le même modèle à plusieurs endroits.

IMHO, les tableaux ne devraient être utilisés que lors de la présentation des tableaux. Jamais à des fins de mise en page.

Answer 17

Les tableaux sont utilisés pour afficher des données tabulaires. Il n'y a pas grand chose d'autre à ajouter :-D

Answer 18

S'il y a une raison d'utiliser une table de manière sémantique (par exemple pour afficher des données tabulaires), utilisez des tables.

N'utilisez aucun tableau pour faire des trucs de mise en page. Le balisage sémantique offre de nombreux avantages en termes de moteur de recherche et d’accessibilité.

Answer 19

La réservation de tables à utiliser uniquement pour des données tabulaires fonctionne la plupart du temps. Certains problèmes d’agencement sont beaucoup plus faciles à résoudre avec des tableaux qu’autre chose. Par exemple, alignement vertical et colonnes de même hauteur. De l'autre côté de la clôture, j'ai utilisé des tables de données complexes pour lesquelles j'ai utilisé des divs flottantes, car elles ne correspondaient pas à la facture.

Comme pour toute chose, utilisez le bon outil pour le bon travail. Parfois, l’outil le plus pragmatique n’est pas ce que vous pensez. Cela dit, j’utilise rarement des tableaux pour la mise en page, même dans les exemples que j’ai donnés, car j’ai inévitablement rencontré un problème qui me force à le faire avec CSS de toute façon. Votre kilométrage peut varier.

Answer 20

Je n’aime pas non plus l’idée d’utiliser des tableaux pour organiser des éléments sur une page. Cependant, cela ne devrait pas devenir une religion - les tables sont mauvaises. J'ai rencontré un exemple où j'ai une disposition en trois colonnes et j'avais besoin de la colonne centrale pour croître avec le contenu. En fin de compte, la solution la plus simple et qui fonctionnait bien sur tous les navigateurs nécessaires consistait à utiliser une table. IMHO CSS a encore quelques défauts et parfois il vaut mieux utiliser quelque chose de simple qui fonctionne plutôt que de simplement adhérer aveuglément à une idée ("les tableaux sont mauvais ...").

Answer 21

vous pouvez même les utiliser pour la mise en page, si votre mise en page est quelque peu tabulaire. J'aime la fonctionnalité des tableaux et des cellules qui s'adapte de manière dynamique à la largeur de la fenêtre du navigateur. N'utilisez jamais des largeurs ou des hauteurs fixes, cela ne ferait que gâcher les choses.

Answer 22

C'est facile. Pensez votre page Web comme une vraie page sur papier. Utilisez des tableaux sur une page Web uniquement lorsque vous dessinez un tableau sur votre papier.

Une autre astuce consiste à utiliser un tableau uniquement avec une bordure > 0 Ainsi, vous utilisez les tableaux uniquement lorsque vous entendez vouloir un tableau (et non pour la présentation).

Answer 23

@toddhd, préconiser l'utilisation de tableaux pour la mise en page simplement pour gagner du temps est un échec. Si le temps vous pose problème, vous pouvez rapidement créer une disposition en colonnes sans tableaux à l'aide d'un cadre tel que Blueprint CSS ou grille 960 .

Answer 24

semble dépendre de ce que les navigateurs étaient capables lorsque vous avez commencé à concevoir. Si vous avez commencé à l’époque alors que seules les tables fonctionnaient, c’est ce que vous voudrez probablement toujours utiliser, car vous le savez. Ou si c’est ce que vous aimiez utiliser même après l’avancée des navigateurs pour pouvoir rendre le CSS ...

Je n'aime pas continuer à faire les mêmes choses encore et encore parce qu'elles sont faciles et que je sais comment les faire. C'est ennuyeux. Je préférerais de beaucoup apprendre de nouvelles techniques plutôt que d'écarter quelque chose parce que je ne sais pas comment l'utiliser ou que je pense ne pas avoir le temps d'apprendre.

Je n'aime pas utiliser les tableaux, je ne les comprends pas, ils paraissent étranges et offensants, mais c'est parce que j'ai commencé en 2005. Je n'utilise pas non plus les programmes de conception pour cracher des modèles parce que je préfère le codage manuel. .

Answer 25

Je vais supposer que votre question est en réalité - & "Devrais-je éviter d'utiliser des tableaux HTML à des fins de mise en page? &"; ". La réponse est non. En fait, les tableaux sont spécifiquement conçus pour contrôler la mise en page. L'inconvénient de l'utilisation de tableaux pour contrôler la mise en page d'une page entière est que le fichier source devient rapidement difficile à comprendre et à modifier manuellement. L’avantage (possible) de l’utilisation de tableaux pour contrôler l’ensemble de la mise en page est qu’il existe des problèmes spécifiques de compatibilité et de rendu entre navigateurs. Je préfère travailler directement avec le fichier source HTML, et pour moi, utiliser CSS rend cela plus facile que d'utiliser des tableaux pour la mise en page complète.

Answer 26

Les tableaux n’ont de sens que lorsque vous essayez d’afficher des données tabulaires et c’est tout. Pour les mises en page, vous devez toujours utiliser des DIV et jouer avec les positionnements CSS.

Answer 27

si vous devez utiliser une table, votre mise en page est probablement nul. Montrez-moi un seul site bien conçu qui utilise des tableaux, et je vous en montrerai des milliers d'autres.

Beaucoup de gens parlent du terme & "Puriste &"; Ceci est des ordures. Souhaitez-vous imprimer une copie de journal dans un livre? Souhaitez-vous concevoir une brochure avec Excel? Non? Alors, pourquoi utiliseriez-vous une table pour afficher des données non tabulaires?

La plupart du temps, les difficultés rencontrées par les utilisateurs pour abandonner des tableaux en vue d'une mise en page résultent de leur propre ignorance des principes HTML / CSS / Good Design. Bien que vous ayez peut-être du mal à faire en sorte que les mises en page multicolonnes s'étendent uniformément dans la direction verticale, vous pouvez penser à essayer une méthode différente. Les DIV ne sont pas des TABLE. Vous pouvez créer de fausses colonnes en utilisant des bordures larges, des arrière-plans de page, etc. Prenez le temps d'apprendre réellement à faire ce que vous êtes en train de faire ou d'être toujours considéré comme une personne sans aucune compétence utile. ( http://www.alistapart.com serait un bon début)

Honnêtement, je suis surpris que cette question se pose en 2008. Les DIV se sont manifestées lorsque j'étais au lycée. Arrêtez d'être un noob.

Et comme cela a été mentionné ci-dessus, les tables ne fonctionnent pas correctement sur les appareils mobiles et les lecteurs d'écran.