使用表格进行布局是否有不好的业力?

发布于 2024-12-08 03:51:19 字数 585 浏览 0 评论 0原文

可能的重复:
为什么不在 HTML 中使用表格进行布局?

我已经总是听说使用表格进行布局是大忌。据我了解,您应该使用 div'sspan's 进行布局。

我最近一直在开发一个网站,该网站包含大量直接并排的信息。 Div's 占据一整行。在 CSS 中将它们设置为其他方式很烦人。如果支持起来这么困难,那么 div's 真的是为此而设计的吗?

表格似乎是这一切的整体解决方案。与 divspan 相比,使用表格有哪些缺点?

例如,我在这里使用表格进行布局:

在此处输入图像描述

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:

enter image description here

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

旧故 2024-12-15 03:51:19

表格应用于显示表格数据。对于其他情况,请使用 divspan

“有很多直接并排的信息。”听起来像表格数据。在这种情况下,我不会因为你使用表格而惩罚你。
编辑
您刚刚编辑了您的答案,并添加了您的布局。不要使用桌子!

为了便于阅读,您的代码应如下所示:

<div class="cart">
    <div class="price"></div>
    <div class="quantity"></div>
    <div class="pay"></div>
</div>

将该布局与以下内容进行比较:
    .......

当查看第一个布局的源时,他可以从中获取有意义的信息。另一方面,当查看第二个选项的源代码时...

EDIT2 - 布局示例

创建动态网上商店时,您还应该考虑禁用 JavaScript 的用户。 参见小提琴:http://jsfiddle.net/GRgkz/1/

我创建了一个

容器元素,以防用户禁用 JavaScript。在表单内,我添加了布局。请参阅小提琴以了解应用程序逻辑。

Tables should be used to display tabulair data. For other cases, use div's and span'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:

<div class="cart">
    <div class="price"></div>
    <div class="quantity"></div>
    <div class="pay"></div>
</div>

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.

无可置疑 2024-12-15 03:51:19

表应该并且始终用于表格数据,因此得名表。

对于非表格布局,您应该使用

标签,偶尔使用 标签,较新的 html5 标签,例如

< /code>

在 CSS 中将它们设置为其他方式很烦人

不,这是完全错误的。如果您不知道自己在做什么,那只是“烦人”。如果您不知道自己在做什么,请阅读 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.

Setting them to do otherwise in the CSS is annoying

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 some css markup.

骑趴 2024-12-15 03:51:19

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/

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文