你将如何做到这一点：表或CSS？ [英] How would YOU do this: Tables or CSS?
问题描述
第一部分
这个布局可以用两个HTML表格完成，另一个，或者甚至用一个表。
也可以使用CSS，虽然它可能涉及多一点思考。 / p>
这可能不是一个真实的世界布局，但我已经看到类似的页面。考虑这是一个谜语;
为了让事情更有趣一点，我在一个小的2部分网页框架的问题，称为以及此图片
，因为居民可以很容易地添加到花园地块，而不触及CSS规则 - 一切都自动居中。
...鲱鱼？我第一次做这个练习有点超过2年前，当我第一次学习HTML和CSS。我的第一个解决方案就像你在这里看到的，除了没有匿名的容器DIVs。然后我得到这个想法，一个网页，并行的比较CSS与表，以证明CSS更好。因此，我参与了挑战页面的发布，然后发布了此问题。
Sam Hasler 在几分钟内发布了一个答案，看起来真的很接近。我可以看到他比我所拥有的更好的解决方案。他的所有的div都是为了，我的不是。 Jacco 发布了一条评论，询问为什么我会使用两个嵌套表。
因此我有两个荷马辛普森 Doh！ 。我读了其他关于表和CSS的问题和答案。有人提到表垂直居中。我的答案也没有垂直居中，但我认为这可能是可能的。毕竟，整个点，是做一个表可以做和更好的一切。我现在已经把自己画成一个角落，看起来像一个傻瓜，所以我找到一个答案。
最后（我很尴尬说了多久了）我想出了下面的解决方案。
然后我就能够实现我的并列比较网页的原始概念。
这里是一个解释如何一切正常，为什么您应该使用CSS
Charlie的回答...
<！DOCTYPE html PUBLIC - // W3C // DTD XHTML 1.0 Strict // EN
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd\">
< html xmlns =http://www.w3.org/1999/xhtml>
< head>
< title> Charlie的CSS布局< / title>
< meta http-equiv =Content-Typecontent =text / html; charset = utf-8/>
< style type =text / css>
#outer {
width：175px; height：175px;
text-align：center;
font：italic 100％/ 200％'Comic Sans MS'，cursive;
border：1px solid black;
}
#inner {width：105px}
＃outer> DIV，＃inner> DIV {float：left}
＃outer> DIV> DIV，＃inner> DIV& DIV
{display：table-cell; vertical-align：middle}
＃c2 {clear：right}
＃c3，＃c6 {clear：left}
＃c1> DIV，＃c4& c7> DIV，＃c8> DIV，＃c9> DIV {height：35px}
＃c2> DIV，＃c3> DIV，＃c5> DIV，＃c6> DIV，＃c7> DIV {width：35px }
＃c2> DIV，＃c3> DIV {height：140px}
＃c1> DIV，＃c9> DIV {width：140px}
＃c5> DIV，＃c6& {height：70px}
＃c4> DIV，＃c8> DIV {width：70px}
＃c2，＃c6，＃c7，＃c8，＃c9 {position： top：-35px}
＃c9 {left：35px}
＃c1 {background-color：silver}
＃c2 {background-color：maroon; color：white}
＃c3 {background-color：navy; color：white}
＃c4 {background-color：red}
＃c5 {background-color：blue; color：white}
＃c6 {background-color：yellow}
＃c7 {background-color：white}颜色：白色}
＃c9 {background-color：orange}
/ *这些规则是垂直居中在IE7 * /
＃outer> DIV& ＃inner> DIV> DIV {position：relative; }
＃c1> DIV，＃c4> DIV，＃c7> DIV，＃c8> DIV，＃c9> DIV {top：10％}
＃c5> DIV {top：0％}
＃c6> DIV {top：30％}
＃c2> DIV {top：0％}
＃c3> DIV {top：15％}
; / style>
< / head>
< body>
< div id =outer>
< div id =c1>< div> 1< / div>< / div>
< div id =c3>< div> 3< br /> 3< br /> 3< / div>< / div>
< div id =inner>
< div id =c4>< div> 4< / div>< / div>
< div id =c5>< div> 5< br /> 5< / div>< / div>
< div id =c6>< div> 6< / div>< / div>
< div id =c7>< div> 7< / div>< / div>
< div id =c8>< div> 8< / div>< / div>
< / div>
< div id =c2>< div> 2< br /> 2< br /> 2< br /> 2< / div>
< div id =c9>< div> 9 9 9< / div>< / div>
< / div>
< / body>
< / html>
Part I
This layout can be done quite simply with 2 HTML tables, one nested inside the other, or even with a single table.
It can also be done with CSS, though it might involve a little more thinking.
This may not be a real world layout, but I have seen pages that are similar. Consider this a riddle; an exercise to buff up your CSS skills.
To make things a little more interesting, I have framed the question in a little 2 part web page called The Challenge. We will examine the code and the question: Layout with tables or CSS?, side-by-side, blow-by-blow, as our two opponents battle it out for code supremacy.
Part I lays out how The Challenge came to be. I hope you enjoy.
Part II is The Decision. You might be surprised.
Part II
I was amazed at how quickly really good answers appeared mere minutes after I posted. It was a humbling experience. I have no desire to compete in time trials with you.
BUT, all that being said, upon close examination of the solutions offered, I came to realize that none of the CSS solutions (including my own at the time) worked as well as either of the table solutions offered. The Challenge was all about CSS being better than tables for any layout solution.
So I added 3 new rules (remember, one of the rules is that the rules can be changed). This annoyed some people. So then I added some colorful explanations about why the rules were changed. I think this annoyed them even more.
- Our garden is to have a fence around it; something to set it apart from whatever dreary surroundings it may find itself in; and not too expensive, but easy to keep clean. So I want a 1 pixel black border around the garden
- Inhabitants of each garden plot (the characters) must be either black or white, depending on which shows them the best in their garden. Also they are all of cursive descent. There are no italics amoung them. ;-)
- The garden is relocatable, that is, I can have this garden, anywhere on the page (no absolute positioning).
This is what the final output is to look like (background color optional):
My apologies for the capricious and last minute rule changes. I had it wrong. The inhabitants of each garden plot are artisans, hand crafted specialists. They are descendants of the cursive family, and owe their sense of style to the italics.
The garden has to be relocatable because both kinds of gardens (table and CSS) need to coexist on the same page. I may be wrong to say that position:absolute rules are not allowed. If you can get them to work in this context, then more power to you. They will certainly be accepted.
I asked for a fence around the plot because each garden type is going to be planted in a countryside with an orange background very similar to the color of the some of the flowers we grow.
I live in Holland now, and the Tulip season is fast approaching. If you fly over Holland in the next few weeks, and it's a clear day (kind of rare here) the landscape below you will look rather similar to this silly exercise.
I'm not crazy about orange but I do like and admire the Dutch, so that is why we have an orange background, a tribute to my host country. :-)
Part III
I have posted Ted's table answer from The Challenge below along with this image
because the occupants can be easily added to the garden plots without touching the CSS rules - everything is automatically centered.
Can you do this with CSS? Can you chop down the mightiest tree in the forest with... a herring?
Update: Charlie's answer is here.
I first did this exercise a little over 2 years ago when I was first learning HTML and CSS. My first solution was like the one you see here, except without the anonymous container DIVs. Then I got this idea for a web page that did a side by side comparison of CSS to a Table to prove CSS was better. So I worked on The Challenge page, published it, and then posted this question.
Sam Hasler posted an answer within minutes, it seems, that was really close. I could see he was on track for a better solution than what I had. All his divs were in order, and mine were not. Jacco posted a comment asking why I used two nested tables when one would do. He was right too, of course.
So I had two Homer Simpson "Doh!" moments right away. I read other questions and answers on tables vs. CSS. Someone mentioned that tables centered vertically. My answer did not center vertically either, but I thought it might be possible. The whole point, after all, is to do everything a table can do and better. I had painted myself into a corner by now, looking like a fool, so I had to find an answer.
Eventually (am embarrassed to say how long it was) I came up with the solution below. I was then able to fulfill my original concept of a side-by-side comparison web page.
Here is an explanation of how it all works and why you should use CSS
Charlie's answer...
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Charlie's CSS layout</title>
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<style type="text/css">
#outer {
width:175px; height:175px;
text-align:center;
font: italic 100%/200% 'Comic Sans MS', cursive;
border: 1px solid black;
}
#inner { width: 105px }
#outer>DIV, #inner>DIV { float:left }
#outer>DIV>DIV, #inner>DIV>DIV
{ display: table-cell; vertical-align: middle }
#c2 { clear: right }
#c3, #c6 { clear: left }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { height: 35px }
#c2>DIV, #c3>DIV, #c5>DIV, #c6>DIV, #c7>DIV { width: 35px }
#c2>DIV, #c3>DIV { height: 140px }
#c1>DIV, #c9>DIV { width: 140px }
#c5>DIV, #c6>DIV { height: 70px }
#c4>DIV, #c8>DIV { width: 70px }
#c2, #c6, #c7, #c8, #c9 { position:relative; top:-35px }
#c9 { left: 35px }
#c1 { background-color: silver }
#c2 { background-color: maroon; color: white }
#c3 { background-color: navy; color: white }
#c4 { background-color: red }
#c5 { background-color: blue; color: white }
#c6 { background-color: yellow }
#c7 { background-color: white }
#c8 { background-color: green; color: white }
#c9 { background-color: orange }
/* these rules are a HACK to center vertically in IE7 */
#outer>DIV>DIV, #inner>DIV>DIV { position:relative; }
#c1>DIV, #c4>DIV, #c7>DIV, #c8>DIV, #c9>DIV { top: 10% }
#c5>DIV { top: 0% }
#c6>DIV { top: 30% }
#c2>DIV { top: 0% }
#c3>DIV { top: 15% }
</style>
</head>
<body>
<div id="outer">
<div id="c1"><div> 1 </div></div>
<div id="c3"><div>3<br/>3<br/>3</div></div>
<div id="inner">
<div id="c4"><div> 4 </div></div>
<div id="c5"><div> 5<br/>5 </div></div>
<div id="c6"><div> 6 </div></div>
<div id="c7"><div> 7 </div></div>
<div id="c8"><div> 8 </div></div>
</div>
<div id="c2"><div> 2<br/>2<br/>2<br/>2 </div></div>
<div id="c9"><div> 9 9 9</div></div>
</div>
</body>
</html>
这篇关于你将如何做到这一点：表或CSS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
