11
votes

Quelles sont les tables que le positionnement CSS ne peut-il pas?

Je sais qu'il existe différents bons arguments préférant le positionnement du CSS sur des mises en page à base de table. Ce que je me demande, c'est si le modèle CSS est complet (en supposant un navigateur relativement moderne) en ce qui concerne toutes les capacités des tables. Y a-t-il des mises en page que les tables peuvent atteindre des tables impossibles ou peu pratiques avec CSS?


0 commentaires

9 Réponses :


4
votes

Les tables sont signifiées et doivent être utilisées pour les données tabulaires et non pour la structure. Personnellement, je vois des tables utilisées comme une solution facile et je n'ai jamais couru dans une situation qui ne pouvait pas être résolue avec CSS.

Les tables sont définitivement plus faciles pour le positionnement vertical et les colonnes à haute hauteur, mais à nouveau, cela peut être surmonté avec CSS.


3 commentaires

Je ne suis pas celui qui préconise des coins de coupe dans la programmation, mais il y a des cas où un "hack" est juste meilleur que de faire quelque chose de "idéal". Les tables HTML fonctionnent. Dans chaque navigateur. Toujours. Ils sont simples à comprendre et à maintenir. CSS est le contraire de cela quand il s'agit de mettre en place des divs.


@Nemi - BOO! Ensuite, quelles sont les normes?


+ -0 Je suis respectueusement en désaccord. Là sont des situations qui ne peuvent pas être traitées sans tables ni javascript. Les concepteurs de la norme CSS ont fait un travail médiocre dans la fourniture de solutions de remplacement à la table pour une utilisation dans la mise en page - pourquoi je ne sais pas. En ce qui concerne "la voie facile à sortir", je vous ai mis à vous que lorsque le choix se situe entre un

CONSTRUCT, ou 80 lignes de CSS Plus trois hacks spécifiques au navigateur pour IE6 et 7 Et peut-être 8 ans, plus un bloc de JavaScript parce que (Safari | Opera | XYZ) ne supporte pas cela et que la pseudo-classe, la "voie facile à sortir" est la bonne façon.



0
votes

Des terribles recherches?

Sérieusement, cependant. Non.

Un bon exemple de personnes utilisant des tables est qu'ils le rendent beaucoup plus facile à présenter des champs de formulaire de manière agréable, mais il gâche complètement l'accessibilité et la signification sémantique des pages. Vous pouvez obtenir la même chose et mieux avec un peu plus d'effort dans CSS.


0 commentaires

0
votes

Vous pouvez faire la même chose avec CSS, mais ce n'est généralement pas aussi élégant.

Les tables sont importantes pour afficher Données tabulaires (c'est-à-dire non des mises en page). Ce sont des constructions logiques et sémantiques et doivent être utilisées comme telles. Ils contiennent des concepts comme des colonnes et des lignes, que CSS seul ne le fait pas.


2 commentaires

Je ne suis pas sûr d'acheter l'argument "Ils sont pour les données tabulaires". Vous réalisez que http / html est destiné au contenu statique, non? Et que les applications Web et l'état d'épargne dans des sessions sont une perversion de cela, non? En utilisant un outil pour quelque chose parce que cela fonctionne bien, même quand il n'a pas été fait à l'origine pour cette utilisation n'est pas fausse. C'est juste intelligent.


Avec votre logique Nemi, nous devrions toujours utiliser des relevés de police en ligne et des gifs spacer. Non seulement la technologie a évolué, mais la réflexion sur la manière d'utiliser cette technologie. Bien sûr, vous pouvez utiliser des tables pour la mise en page et vous pouvez également gagner des ongles avec un rocher.



-1
votes

enregistre votre temps


1 commentaires

heureux de voir que vous êtes d'accord avec ma réponse



1
votes

J'en ai un! Il y a quelque chose qui me semble impossible avec CSS, mais est possible avec des tables. Je viens de poser une question à une question hier et j'ai reçu une réponse.

Si vous avez deux éléments distincts que vous souhaitez sur une ligne, quelle que soit la largeur, vous devez utiliser une table. C'est-à-dire que si les deux éléments sont en ligne ou flottés, s'ils sont dimensionnés de manière dynamique et deviennent plus larges que le conteneur, ils se briseront vers la ligne suivante plutôt que sur le débordement. Si vous avez absolument besoin de rester sur la même ligne, même si la seconde déborderait la largeur du conteneur, ils doivent être des cellules dans une rangée de table.

Edit: Un peu de test montre que cela n'est vrai que avec des flotteurs. Si vos éléments sont affichés en ligne ou en ligne-quelque chose, vous pouvez définir blanc-espace: Nowrap sur le conteneur. Cependant, dans ce cas, il semble (à la FF de toute façon), il y a un espace mystérieux entre les éléments, qui à mes fins hier, aurait été un problème.


3 commentaires

Je ne suis pas sûr que cela soit vrai. Il existe des moyens de contrôler le comportement d'emballage dans CSS.


Puis quelqu'un m'a menti dans ma question hier. Supprimera si je peux le trouver.


Peut-être qu'ils sont corrects dans une sorte de scénario limité. En tant que déclaration générale, je ne pense pas que ce soit précis.



6
votes

CSS n'a pas de bon moyen de manipuler des données qui sont véritablement tabulaires. Si vos données sont elles-mêmes structurées dans des lignes et des colonnes, la balise Table est toujours la meilleure façon de la présenter. Bien que vous puissiez "simuler la simulation" dans CSS, il en résulte un code complexe, difficile à maintenir le code sans raison réelle.

Notez que les données tabulaires ne signifient pas nécessairement toujours des tables de nombres. Des formes parfois et d'autres types de teneur interactive peuvent également être tabulaires, si leurs champs se regroupent logiquement dans des colonnes et des lignes. Le point clé est de vous demander: "Je penserais-je de mes données en tant que lignes et colonnes si je l'ai écrite sur une page et que l'ordinateur n'avait rien à voir avec ça?"


3 commentaires

@sr pt - je suis en désaccord. Le résultat final est ce que l'utilisateur voit. Si vous utilisez une conception de tous les CSS, vous vous sentirez bien à l'intérieur, mais vous prend trois fois plus de temps, vous n'acceptez rien d'autre que de coûter de votre temps et de votre argent.


Dan est correct - une bonne définition de 'tabulaire' est "des choses qui s'inscrivent parfaitement dans des rangées et des colonnes". Comme la plupart des formulaires de saisie de données. Comme des colonnes de style journal. Comme la structure principale de la plupart des sites Web.


Notez que je ne préconise toujours pas faire, disons, votre disposition de site principal à l'aide de tables. CSS offre de nombreuses améliorations sur le modèle de table. Mais de nombreux éléments internes vers des sites - tels que des formulaires avec plusieurs colonnes dans lesquelles les champs doivent aligner la colonne à colonne - sont Tables structurellement. Ce n'est pas juste une commodité de la mise en page.



5
votes

Je basculerais sur des mises en page basées sur CSS si je pouvais. Les arguments semestre sont corrects, mais il existe des considérations pratiques. Les tables vont:

  • empêche absolument «enveloppement flottant» où une div tombera à la ligne suivante car il n'y a pas assez d'espace pour celui-ci
  • vous donner des colonnes de même hauteur
  • Autoriser des dispositions dynamiques où les largeurs et les hauteurs ne sont pas connus tant que le temps d'exécution
  • Fournissez des cols et des rowspans
  • Réduisez le nombre de questions pour demander comment faire des choses sans tables :)

    Il existe des propriétés d'affichage CSS (cellule de table, etc.) qui imite une partie de cela, mais je ne crois pas que le support est suffisamment répandu pour les utiliser encore (sauf si vous ne pouvez contrôler la sélection du navigateur de votre utilisateur).

    Le site que je travaille nécessite des largeurs de colonne dynamiques sur les mises en page. Plusieurs clients utilisent les mêmes modèles de sites et je n'ai aucune idée de ce qu'ils mettront dans le menu ou l'en-tête de la page ou les cellules de contenu. (Et aucune idée de ce qu'ils trouveront attrayant, qui est un autre problème ...) L'utilisation d'une seule table extérieure pour poser les sections principales du site permet de la flexibilité dont j'ai besoin sans vous soucier qu'un menu légèrement trop étendu poussera le La boîte de contenu principale jusqu'à la ligne suivante, ou que les couleurs de fond ne rempliront pas la hauteur requise.

    dans un monde parfait (pour moi), nous aurions

s pour les données tabulaires et un autre ensemble presque identique de balises pour les présentations - appelez-le < / Code> (avec la ligne correspondante et les étiquettes de cellule). Ou, ajoutez un attribut «mode» à la balise
TAG - Les valeurs constitueraient des «données» et «mise en page» afin que les lecteurs d'écran et les moteurs de recherche savent quoi faire. Peut-être dans HTML 6 ...

EDIT: Je devrai ajouter, en ce qui concerne la chose "Float Wrap" - il y a une question actuelle sur la réponse qui fonctionne assez bien ICI . Ce n'est pas parfait et aussi moi, c'est trop compliqué, mais cela résoudrait le problème dans de nombreux cas.


2 commentaires

+0 pour le premier, -1 pour les 2e et 3ème, +1 pour les 4ème et cinquième. :RÉ


@sr PT: Je suis content que vous me donniez +0 pour le premier, au lieu de -0 ... Sérieusement, j'ai vu des solutions partielles pour la plupart de ces choses, mais jamais pour des largeurs vraiment dynamiques (mon 3ème). Avez-vous quelque chose pour moi?



0
votes

que les tables peuvent faire ce positionnement CSS ne peut pas?

En théorie, rien, puisque vous pouvez utiliser affichage: table; , Affichage: cellule de table; ou d'autres valeurs de ce type pour Affiche .


2 commentaires

Hé bien oui. Mais cela en fait dans une table, donc je considère qu'à l'extérieur de l'esprit de la question.


Mais autre que garantira [float'ed, etc.] Les éléments ne renversent pas et Col ​​/ rangs de lignes liquides Je ne vois rien qu'ils puissent faire ce que vous ne pouvez pas réaliser avec CSS. La seule carte jouable de ce jeu pour la plupart des situations est Gagnez du temps .



-2
votes

Utilisez-les (tables) dans le balisage et vous ne pas avoir à te casser la tête positionnement ou sur le navigateur croisé compatibilité. Les tables travaillent presque la de la même manière sur les navigateurs


0 commentaires