使用表格进行布局是否有不好的业力?
可能的重复:
为什么不在 HTML 中使用表格进行布局?
我已经总是听说使用表格进行布局是大忌。据我了解,您应该使用 div's
和 span's
进行布局。
我最近一直在开发一个网站,该网站包含大量直接并排的信息。 Div's
占据一整行。在 CSS 中将它们设置为其他方式很烦人。如果支持起来这么困难,那么 div's
真的是为此而设计的吗?
表格似乎是这一切的整体解决方案。与 div
和 span
相比,使用表格有哪些缺点?
例如,我在这里使用表格进行布局:
Possible Duplicate:
Why not use tables for layout in HTML?
I've always heard that using tables for layout was a BIG NO NO. To my understanding, you were supposed to use div's
and span's
for layout.
I've been working on a site recently that has a lot of information that is directly side-by-side. Div's
take up an entire line. Setting them to do otherwise in the CSS is annoying. If it is this hard to support, are div's
actually made for this?
Tables just seem like the overall solution for it all. What are the downsides of using Tables vs. div's
and span's
?
For instance, I used tables to layout this here:
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
表格应用于显示表格数据。对于其他情况,请使用
div
和span
。“有很多直接并排的信息。”听起来像表格数据。在这种情况下,我不会因为你使用表格而惩罚你。编辑
您刚刚编辑了您的答案,并添加了您的布局。不要使用桌子!
为了便于阅读,您的代码应如下所示:
将该布局与以下内容进行比较:
.......
当查看第一个布局的源时,他可以从中获取有意义的信息。另一方面,当查看第二个选项的源代码时...
EDIT2 - 布局示例
创建动态网上商店时,您还应该考虑禁用 JavaScript 的用户。 参见小提琴:http://jsfiddle.net/GRgkz/1/
我创建了一个
Tables should be used to display tabulair data. For other cases, use
div
's andspan
's."has a lot of information that is directly side-by-side." sounds like tabulair data. I won't punish you for using tables in this case.EDIT
You've just edited your answer, and included your lay-out. Don't use tables!
For readability, your code should look like this:
Compare that lay-out to:
<table>...<tr><td></td>....</table>
When one views the source of the first lay-out, he can get meaningful information from it. When viewing the source of the second option, on the other hand...
EDIT2 - Layout example
When creating a dynamic webshop, you should also take users who have disabled JavaScript into account. See Fiddle: http://jsfiddle.net/GRgkz/1/
I have created one
<form>
container element, in case the user has disabled JavaScript. Inside the form, I've added the lay-out. See the fiddle for the application logic.表应该并且始终用于表格数据,因此得名表。
对于非表格布局,您应该使用
标签,偶尔使用
标签,较新的 html5 标签,例如
不,这是完全错误的。如果您不知道自己在做什么,那只是“烦人”。如果您不知道自己在做什么,请阅读 html/css 以及如何正确使用它。您不会很快学会所有内容,只有通过实践,您才能成为构建跨浏览器网站的“艺术”的“大师”。
但也不要偷懒,要适当地去做。设置 html 样式的外部 CSS 文件。
编辑
查看您添加到问题中的 HTML,您当然不应该使用表格来进行此标记。这是一个简单的布局,可以使用
标签和一些
css
标记轻松实现。Tables should and always be used for tabular data, hence the name table.
For layouts which are not tabular, you should use
<div>
tags, occasionally<span>
tags, newer html5 tags such as<header>
<article>
<nav>
, other tags like<dd>
<dt>
<dl>
<ul>
<li>
Using a combination of them, you will be able to create many different layouts.No, this is completely wrong. It is only "annoying" if you do not know what you are doing. If you do not know what you are doing, then read up on html/css and how to properly use it. You are not going to learn everything quickly, and only through practice will you become a "guru" in the "art" of building cross browser websites.
Don't be lazy though, do it properly. External CSS files which style your html.
Edit
Looking at the HTML which you have added to your question, you certainly should NOT be using tables for this markup. This is a simple layout which can easily be achieved with
<div>
tags and somecss
markup.Smashing Magazine 有一篇关于此的精彩文章:
http ://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/
Smashing Magazine has a wonderful article about this :
http://coding.smashingmagazine.com/2009/04/08/from-table-hell-to-div-hell/