为什么不在HTML中使用表格布局呢?

在HTML中，表格不应该用于布局，这似乎是普遍的观点。

Why?

我从来没有(老实说，很少)看到过支持这一点的有力论据。通常的答案是:

It's good to separate content from layoutBut this is a fallacious argument; Cliche Thinking. I guess it's true that using the table element for layout has little to do with tabular data. So what? Does my boss care? Do my users care?Perhaps me or my fellow developers who have to maintain a web page care... Is a table less maintainable? I think using a table is easier than using divs and CSS.By the way... why is using a div or a span good separation of content from layout and a table not? Getting a good layout with only divs often requires a lot of nested divs. Readability of the codeI think it's the other way around. Most people understand HTML, few understand CSS. It's better for SEO not to use tablesWhy? Can anybody show some evidence that it is? Or a statement from Google that tables are discouraged from an SEO perspective? Tables are slower.An extra tbody element has to be inserted. This is peanuts for modern web browsers. Show me some benchmarks where the use of a table significantly slows down a page. A layout overhaul is easier without tables, see css Zen Garden.Most web sites that need an upgrade need new content (HTML) as well. Scenarios where a new version of a web site only needs a new CSS file are not very likely. Zen Garden is a nice web site, but a bit theoretical. Not to mention its misuse of CSS.

我对使用divs + CSS而不是表的良好参数非常感兴趣。

当前回答

我很抱歉我的英语不好，但还有一个原因:

我在一些政府机构工作，不使用TABLE的首要原因是残疾人。他们使用机器“翻译”网页。

问题是这个“翻译机器”不能阅读网站，如果它是由TABLE。为什么?因为TABLE是用于数据的。

事实上，如果你使用TABLES，你必须为每个cell指定一些信息，让残疾人知道他们在TABLE中的位置。想象一下，你有一个大表格，必须放大才能看到屏幕上的一个单元格:你必须知道你在哪一行/col。

因此，使用DIV，并且禁用可以简单地阅读文本，并且不会得到一些关于行/cols的奇怪信息，当它们不需要在那里时。

我也更喜欢TABLE来制作快速简单的模板，但我现在习惯了CSS…它很强大，但你真的必须知道你在做什么……：）

2009-02-16 16:30:50

其他回答

对我来说，一个巨大的问题是，表，特别是嵌套表，需要更长的时间来呈现比一个正确布局的css实现。(你可以让css一样慢)。

所有浏览器呈现css的速度都更快，因为每个div都是一个单独的元素，所以用户在阅读时可以加载屏幕。(对于庞大的数据集等)。我在那个实例中使用了css而不是表格，甚至没有处理布局。

嵌套的表(单元格中的表等)直到找到最后一个“/table”才会呈现到浏览器窗口。更糟糕的是，定义不清的表有时甚至无法呈现!或者当它发生的时候，事情就会不正常。(没有正确地与“TD”等共进)

我在大多数情况下使用表格，但当涉及到大数据和希望为最终用户快速呈现屏幕时，我尽最大努力利用CSS所提供的东西。

2008-09-17 15:39:08

我很惊讶地发现有些问题还没有涉及到，所以除了之前提出的所有非常有效的观点之外，以下是我的2点看法:

.1.CSS & SEO：

a) CSS used to have a very significant impact on SEO by allowing to position the content in the page wherever you want. A few years ago, Search Engines were giving a significant emphasis to "on-page" factors. Something at the top of the page was deemed more relevant to the page than something located at the bottom. "Top of the page" for a spider meant "at the beginning of the code". Using CSS, you could organize your keyword-rich content at the beginning of the code, and still position it wherever you liked in the page. This is still somewhat relevant, but on page factors are less and less important for page ranking.

b)当布局转移到CSS时，HTML页面更轻，因此对于搜索引擎蜘蛛加载更快。(蜘蛛不需要下载外部CSS文件)。快速加载页面是一个重要的排名考虑几个搜索引擎，包括谷歌

c) SEO工作通常需要测试和更改内容，这与基于CSS的布局更方便

。2。生成的内容:

用编程方式生成表要比等效的CSS布局容易得多。

foreach ($comment as $key=>$value)
{
   echo "<tr><td>$key</td><td>$value</td></tr>";
}

生成表很简单，也很安全。它是自包含的，可以很好地集成到任何模板中。用CSS做同样的事情要困难得多，而且可能根本没有任何好处:很难在飞行中编辑CSS样式表，并且内联添加样式与使用表没有什么不同(内容没有与布局分离)。

此外，在生成表时，内容(在变量中)已经与布局(在代码中)分离，使其易于修改。

这就是为什么一些设计非常好的网站(例如SO)仍然使用表格布局的原因之一。

当然，如果需要通过JavaScript对结果进行操作，那么div是值得的。

。3。快速转换测试

在找出适合特定受众的方法时，能够以各种方式更改布局以找出最佳结果是很有用的。基于CSS的布局使事情变得相当简单

。4。不同的问题有不同的解决方案

布局表通常被鄙视，因为“每个人都知道div和CSS”才是正确的方式。

然而，事实仍然是，表创建更快，更容易理解，比大多数CSS布局更健壮。(是的，CSS可以很健壮，但是在不同的浏览器和屏幕分辨率上快速浏览一下网络就会发现情况并非如此)

桌子有很多缺点，包括维护、缺乏灵活性……但是我们不要把孩子和洗澡水一起丢了。快速可靠的解决方案有很多专业用途。

前段时间，我不得不用表格重写了一个干净简单的CSS布局，因为相当一部分用户会使用对CSS支持非常差的旧版本IE

就我而言，我已经厌倦了“哦，不!”布局的表格!”

至于那些“它不是为了这个目的而设计的，因此你不应该这样使用它”的人群，这不是虚伪吗?你怎么看待所有的CSS技巧，你必须使用使该死的东西工作在大多数浏览器?他们是为了这个目的吗?

2011-04-11 11:59:25

下面是来自最近项目的一段html:

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <div id="header">
        <h1><!-- Page title --></h1>
        <ol id="navigation">
            <!-- Navigation items -->
        </ol>
        <div class="clearfix"></div>
    </div>
    <div id="sidebar">
        <!-- Sidebar content -->
    </div>
    <!-- Page content -->
    <p id="footer"><!-- Footer content --></p>
</body>
</html>

这是与基于表格的布局相同的代码。

<?xml version="1.0" encoding="utf-8"?>
<!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" xml:lang="en" lang="en">
<head>
    <title>{DYNAMIC(TITLE)}</title>
    <meta http-equiv="content-type" content="text/html;charset=utf-8" />
    <meta http-equiv="Content-Style-Type" content="text/css" />
    <link rel="stylesheet" type="text/css" href="./styles/base.css" />
</head>
<body>
    <table cellspacing="0">
        <tr>
            <td><!-- Page Title --></td>
            <td>
                <table>
                    <tr>
                        <td>Navitem</td>
                        <td>Navitem</td>
                    </tr>
                </table>
            </td>
        </tr>
    </table>

    <table>
        <tr>
            <td><!-- Page content --></td>
            <td><!-- Sidebar content --></td>
        </tr>
        <tr>
            <td colspan="2">Footer</td>
        </tr>
    </table>
</body>
</html>

我在基于表格的布局中看到的唯一干净的地方是我对缩进的过度热情。我确信内容部分将有另外两个嵌入式表。

另一件需要考虑的事情是:文件大小。我发现基于表格的布局通常是CSS布局的两倍大。在我们的高速宽带上，这不是一个大问题，但在那些拨号调制解调器上。

2008-09-18 10:10:56

我认为没有人会在意一个网站是如何设计/实现的，当它运行得很好并且运行得很快的时候。

我在HTML标记中同时使用“table”和“div”/“span”标记。

让我给你一些我为什么选择跳水的理由:

for a table you have to write at least 3 tags (table, tr, td, thead, tbody), for a nice design, sometimes you have a lot of nested tables I like to have components on the page. I don't know how to explain exactly but will try. Suppose you need a logo and this have to be placed, just a small piece of it, over the next page content. Using tables you have to cut 2 images and put this into 2 different TDs. Using DIVs you can have a simple CSS to arange it as you want. Which solution do you like best? when more then 3 nested tables for doing something I am thinking to redesign it using DIVs

但是我仍然在使用表格:

表格数据扩展自我的内容快速解决方案(原型)，因为DIVs盒子模型在每个浏览器上是不同的，因为许多生成器使用表格等

2008-09-18 08:45:16

CSS/DIV - it's just jobs for the design boys, isn't it. The hundreds of hours I've spent debugging DIV/CSS issues, searching the Internet to get some part of markup working with an obscure browser - it drives me mad. You make one little change and the whole layout goes horrendously wrong - where on eath is the logic in that. Spending hours moving something 3 pixels this way then something else 2 pixels the other to get them all to line up. This just seems plain wrong to me somehow. Just because you're a purist and something is "not the right thing to do" doesn't mean you should make use of it to the nth degree and under all circumstances, especially if it makes your life 1000 times easier.

So I've finally decided, purely on commercial grounds, although I keep use to minimum, if I anticipate 20 hours work to get a DIV placed correctly, I'll stick in a table. It's wrong, it upsets the purists, but in most cases it costs less time and is cheaper to manage. I can then concentrate on getting the application working as the customer wants, rather than pleasing the purists. They do pay the bills after all and my argument to a manager enforcing the use of CSS/DIV - I would merely point out the customers pay his salary as well!

所有这些CSS/DIV争论出现的唯一原因是因为CSS的缺点，首先是因为浏览器之间不兼容，如果它们相互兼容，世界上一半的网页设计师将失业。

When you design a windows form you don't try moving controls around after you have laid them out so I kind of think it's strange to me why you would you want to do this with a web form. I simply can't understand this logic. Get the layout right to start with and what's the problem. I think it's because designers like to flirt with creativity, whilst application developers are more concerned with actually getting the application working, creating business objects, implementing business rules, working out how bits of customer data relates to each other, ensuring the thing meets the customers requirements - you know - like the real world stuff.

不要误解我的意思，这两种观点都是正确的，但是请不要因为开发人员选择了一种更简单、更合乎逻辑的方式来设计表单而批评他们。我们常常有比正确使用表而不是div的语义更重要的事情要担心。

在这个讨论的基础上，我将一些现有的tds和trs转换为div。花了45分钟把它弄得乱七八糟想把所有东西都排列整齐然后我就放弃了。td在10秒后回来-工作-立即-在所有浏览器上，没有更多的事情要做。请试着让我明白——你有什么理由让我用其他方式做这件事!

2010-11-25 14:25:39

为什么不在HTML中使用表格布局呢?

推荐文章

最新文章

标签