Comment feriez-vous ceci: Tables ou CSS?

Puzzle http://sontag.ca/TheChallenge/tiles.gif Grinch http://soffr.miximages.com/css/grinch.gif

Partie I

Cette mise en page peut se faire simplement avec 2 tables HTML, l’une nestede dans l’autre, ou même avec une seule table.

Cela peut aussi être fait avec CSS, bien que cela puisse impliquer un peu plus de reflection .

Ce n’est peut-être pas une mise en page du monde réel, mais j’ai vu des pages similaires. Considérez ceci comme une énigme; un exercice pour améliorer vos compétences CSS.

Pour rendre les choses un peu plus intéressantes, j’ai encadré la question dans une petite page Web en deux parties intitulée The Challenge . Nous allons examiner le code et la question: Layout with tables ou CSS? , côte à côte, coup sur coup, alors que nos deux adversaires se disputent la suprématie du code.

La première partie explique comment le défi est apparu. J’espère que tu apprécies.

La deuxième partie est la décision . Vous pourriez être surpris .


Partie II

J’ai été étonné de la rapidité avec laquelle les bonnes réponses sont apparues quelques minutes après mon affectation. C’était une expérience humiliante. Je n’ai aucun désir de participer à des épreuves contre la montre avec vous.

MAIS, tout cela étant dit, après avoir examiné attentivement les solutions proposées, j’ai réalisé qu’aucune des solutions CSS (y compris la mienne à l’époque) ne fonctionnait aussi bien que les solutions de table proposées. Le défi était tout au sujet de CSS étant meilleur que des tables pour n’importe quelle solution de disposition.

J’ai donc ajouté 3 nouvelles règles (rappelez-vous, l’une des règles est que les règles peuvent être modifiées). Cela a ennuyé certaines personnes. Alors, j’ai ajouté des explications colorées sur la raison pour laquelle les règles ont été modifiées. Je pense que cela les énervait encore plus.

  1. Notre jardin doit avoir une clôture autour de lui; quelque chose qui le distingue de ce qui peut se trouver dans son environnement sortingste; et pas trop cher, mais facile à garder propre. Je veux donc une bordure noire de 1 pixel autour du jardin
  2. Les habitants de chaque plot (les caractères) doivent être noirs ou blancs, en fonction de ce qui leur convient le mieux dans leur jardin. En outre, ils sont tous de descendance cursive. Il n’y a pas d’italique parmi eux. 😉
  3. Le jardin est relogeable, c’est-à-dire que je peux avoir ce jardin, n’importe où sur la page (pas de positionnement absolu).

Voici à quoi la sortie finale doit ressembler (couleur de fond facultative):

alt text http://sontag.ca/gif/garden.gif

Toutes mes excuses pour les changements de règle et capricieux. Je me suis trompé. Les habitants de chaque plot sont des artisans, des spécialistes artisanaux. Ils sont les descendants de la famille cursive et doivent leur style aux italiques .

Le jardin doit être relocalisable car les deux types de jardins (table et CSS) doivent coexister sur la même page. J’ai peut-être tort de dire cette position:absolute règles position:absolute ne sont pas autorisées. Si vous pouvez les amener à travailler dans ce contexte, alors vous avez plus de pouvoir. Ils seront certainement acceptés.

J’ai demandé une clôture autour de la plot car chaque type de jardin va être planté dans une campagne avec un fond orange très similaire à la couleur de certaines des fleurs que nous cultivons.

Je vis en Hollande maintenant et la saison des tulipes approche à grands pas. Si vous survolez la Hollande dans les prochaines semaines et que le temps est clair (un peu rare ici), le paysage ci-dessous ressemblera à cet exercice stupide.

Je ne suis pas folle d’orange mais j’aime et admire les Néerlandais, c’est pourquoi nous avons un fond orange, un hommage à mon pays hôte. 🙂


Partie III

J’ai posté la réponse de Ted au Défi ci-dessous avec cette image

alt text http://sontag.ca/gif/garden2.gif

Comme les occupants peuvent être facilement ajoutés aux plots de jardin sans toucher aux règles CSS, tout est automatiquement centré.

Pouvez-vous le faire avec CSS? Pouvez-vous abattre l’arbre le plus puissant de la forêt avec … un hareng?


Mise à jour : la réponse de Charlie est ici.

Mise à jour: édition finale. Passé à DTD STRICT, suppression de l’italique pour correspondre à l’image dans la question et retour aux noms de couleur complets pour les identifiants afin de montrer l’intention selon les commentaires OP sur la question, et sortingé la colonne principale des noms d’ID dans l’ordre. dans le HTML.

J’ai également choisi de ne pas réutiliser le div externe comme un carré blanc (il ne possédait pas de div dans les éditions précédentes ), car cela n’aurait pas été pratique si vous vouliez utiliser la mise en page et que vous aviez l’impression de sortingcher. (bien que d’un sharepoint vue de la brièveté / du pixel, j’aimais bien sa finesse).

Voir ici: http://jsbin.com/efidi
Modifier ici: http://jsbin.com/efidi/edit
Valide comme XHTML ssortingct

   The Challenge    
1
2
4
5
6
7
8
9

Mis à part: je pourrais peut-être mettre un peu plus d’espace, mais c’est à la limite avant que les blocs de code sur SO commencent à recevoir des barres de défilement et j’ai opté pour que tout apparaisse à l’écran.

Note: J’ai emprunté la correction de line-height de ligne à Tyson (qui a été le premier à obtenir une réponse de rendu correcte).

Voici trois solutions.

Le balisage:

 
1
2
3
4
5
6
7
8
9

La feuille de style de base (dimensions et couleur):

 #outer { width: 20em; height: 20em; } #a1 { background-color: #C0C0C0; width: 80%; height: 20%; } #a2 { background-color: #800000; width: 20%; height: 80%; } #a3 { background-color: #000080; width: 20%; height: 80%; } #a4 { background-color: #FF0000; width: 40%; height: 20%; } #a5 { background-color: #0000FF; width: 20%; height: 40%; } #a6 { background-color: #FFFF00; width: 20%; height: 40%; } #a7 { background-color: #FFFFFF; width: 20%; height: 20%; } #a8 { background-color: #008000; width: 40%; height: 20%; } #a9 { background-color: #FFA500; height: 20%; width: 80%; } 

Et maintenant le positionnement:

  • En utilisant float :

     #a1 { float: left; } #a2 { float: right; } #a3 { float: left; } #a4 { float: left; } #a5 { float: right; } #a6 { float: left; } #a7 { float: left; } #a8 { float: right; } #a9 { float: right; } 
  • Utilisation de la position :

     #outer { position: relative; } #outer div { position: absolute; } #a1 { top: 0; left: 0; } #a2 { top: 0; right: 0; } #a3 { top: 20%; left: 0; } #a4 { top: 20%; left: 20%; } #a5 { top: 20%; right: 20%; } #a6 { top: 40%; left: 20%; } #a7 { top: 40%; left: 40%; } #a8 { bottom: 20%; right: 20%; } #a9 { bottom: 0; right: 0; } 
  • En utilisant la margin :

     #a1 { } #a2 { margin: -20% -80% 0 80%; } #a3 { margin: -60% 0 0 0; } #a4 { margin: -80% -20% 0 20%; } #a5 { margin: -20% -60% 0 60%; } #a6 { margin: -20% -20% 0 20%; } #a7 { margin: -40% -40% 0 40%; } #a8 { margin: 0 -40% 0 40%; } #a9 { margin: 0 -20% 0 20%; } 

Ici vous allez – moins de lignes que tout abus de balises de table peut fournir:

 nine assorted coloured rectangles 

: P

Cela correspond exactement à votre exemple de tableau, y compris le texte centré verticalement et horizontalement (ce que personne d’autre n’a fait jusqu’ici).

     Boxy Boxes in a Box    
1
2
3
4
5
6
7
8
9

Tant que les largeurs et les hauteurs sont constantes, on peut toujours utiliser le positionnement absolu pour obtenir le même effet. Cela devrait être assez évident, pour que je n’ai pas à le taper (il est tard ici et je suis paresseux: P)

J’ai adopté une approche légèrement différente de celle que j’ai vue jusqu’à présent. Cela représente moins de 100 caractères de plus que la solution basée sur la table.

    The Challenge    
1
2
3
4
5
6
7
8
9

Edit: En fonction de vos modifications, je publie une solution légèrement plus détaillée, mais plus claire, qui ajoute une bordure noire, définit du texte en blanc et ne positionne absolument pas le “jardin”.

    The Challenge    
1
2
3
4
5
6
7
8
9

Personne ici n’a encore fourni de solution de table, et The Challenge consiste à comparer les mises en forme CSS aux mises en page basées sur des tables dans un scénario contrôlé (et fortement biaisé).

Donc, voici la solution de mise en page de la table de Ted et son défi …

“Avec ma solution basée sur des tables, il est très facile d’append de nouveaux habitants aux tracés de jardin par des ajouts très simples au balisage HTML uniquement! Tous les habitants sont automatiquement centrés et espacés dans un style agréable. Par exemple:”

alt text http://sontag.ca/gif/bluefish.gif alt text http://sontag.ca/gif/garden2.gif

“Autant que je sache, aucune solution basée sur le CSS ne peut accueillir de nouveaux habitants sans devoir procéder à des rénovations approfondies des règles CSS.”

“Mieux vaut amener beaucoup de garçons d’argent, je me sens vraiment affamé et assoiffé maintenant.”

    Terrible Ted's Table Layout    
1 2
4 5
6 7
8
9

Solution de table unique.

Maintenant ne me vote pas.

Je sais que ce n’est pas une réponse à la question initiale.
J’ai posté cette réponse car l’ OP l’avait demandé dans un commentaire à la question initiale.

       The Challenge   
1 2 Dr. Suess's Grinch
3 4 5
6 7
8
9

Il est valide XHTML 1.0 Transitional et j’ai inclus le personnage de Dr. Suess 🙂

En supprimant Dr. Suess character , la déclaration , les meta-tags et l'atsortingbut summary vous pouvez le réduire à 929 caractères et être toujours valide XHTML 1.0 Transitional.

modifier

Comme demandé, XHTML 1.0 Ssortingct

    The Challenge    
1 2
3 4 5
6 7
8
9

970 caractères non blancs, fond orange, le Grinch du Dr. Suess enlevé.

Concision de balisage ….

    The Challenge    
1
2
3
4
5
6
7
8
9

lien

alt text http://sontag.ca/gif/catInHat.gif J’ai fait cet exercice pour la première fois il y a un peu plus de 2 ans alors que j’apprenais d’abord le HTML et le CSS. Ma première solution était comme celle que vous voyez ici, sauf sans les DIV de conteneurs anonymes. Ensuite, j’ai eu cette idée pour une page Web qui effectuait une comparaison côte à côte de CSS à une table pour prouver que CSS était mieux. J’ai donc travaillé sur la page The Challenge , l’ai publiée, puis j’ai posté cette question.

Sam Hasler a publié une réponse en quelques minutes, semble-t-il, qui était vraiment proche. Je pouvais voir qu’il était sur la bonne voie pour trouver une meilleure solution que ce que j’avais. Toutes ses divs étaient en ordre, et les miennes non. Jacco a posté un commentaire demandant pourquoi j’utilisais deux tableaux nesteds. Il avait raison aussi, bien sûr.

J’ai donc eu deux Homer Simpson “Doh!” moments tout de suite. Je lis d’autres questions et réponses sur les tableaux vs. CSS. Quelqu’un a mentionné que les tables étaient centrées verticalement. Ma réponse ne s’est pas centrée verticalement non plus, mais j’ai pensé que cela pourrait être possible. Après tout, le but est de faire tout ce qu’une table peut faire et de mieux. Je m’étais peint dans un coin maintenant, ressemblant à un imbécile, alors je devais trouver une réponse.

Finalement (je suis gêné de dire combien de temps cela a duré), je suis arrivé avec la solution ci-dessous. J’ai ensuite été en mesure de réaliser mon concept original de page Web de comparaison côte à côte.

Voici une explication de tout cela et pourquoi vous devriez utiliser CSS

La réponse de Charlie …


    Charlie's CSS layout     
1
3
3
3
4
5
5
6
7
8
2
2
2
2
9 9 9

Je pense que nous avons prouvé qu’il y a plus d’une façon de faire cela. La balise de table et CSS sont deux options viables.

Plutôt que d’append une autre manière de relever le défi, je voudrais juste dire que, que ce soit plus simple ou plus difficile, plus simple ou plus complexe: les tableaux en HTML doivent être utilisés pour afficher des données tabulaires.

  • Des tableaux sont créés pour les données tabulaires.
  • Le CSS est fait pour le style / la présentation.

Voici un exemple qui n’utilise pas de positionnement absolu, n’utilise pas de table-cell et est valide dans IE6-8, FF, etc.

     Terrible Ted's Table Layout    
1
2
3
4
5
6
7
8
9