为什么不在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而不是表的良好参数非常感兴趣。

当前回答

DOM操作在基于表的布局中是很困难的。

使用语义div:

$('#myawesomediv').click(function(){
    // Do awesome stuff
});

表:

$('table tr td table tr td table tr td.......').click(function(){
    // Cry self to sleep at night
});

当然，第二个例子有点愚蠢，您总是可以将id或类应用到表或td元素上，但这将增加语义值，这是表的支持者强烈反对的。

2011-03-29 14:49:00

其他回答

我曾经了解到，一个表是立即加载的，换句话说，当连接很慢的时候，表所在的空间保持空白，直到整个表被加载，另一方面，一个div加载从上到下的速度与数据到达的速度一样快，不管它是否已经完成。

2008-09-17 15:21:54

1:是的，你的用户很关心。如果他们使用屏幕阅读器，它就会丢失。如果我使用任何其他试图从页面中提取信息的工具，遇到不用于表示表格数据的表是一种误导。

div或span用于分隔内容是可以接受的，因为这正是那些元素的含义。当我，一个搜索引擎，一个屏幕阅读器或其他任何东西，遇到一个表格元素，我们期望这意味着“以下是表格数据，表示在一个表中”。当我们遇到div时，我们期望“这是一个用于将内容划分为单独部分或区域的元素。

2 .可读性:错误。如果所有的表示代码都是css，我可以阅读html，我将理解页面的内容。或者我可以阅读css和理解的表示。如果html中的所有内容都是混杂在一起的，那么在我甚至可以看到什么是内容，什么不是内容之前，我必须在脑海中剔除所有与表示相关的部分。此外，我害怕遇到一个不懂css的web开发人员，所以我真的不认为这是一个问题。

3:表比较慢:是的，它们比较慢。原因很简单:在呈现表之前，必须对表进行完整的解析，包括其内容。可以在遇到div时呈现它，甚至在它的内容被解析之前。这意味着div会在页面加载完成之前显示出来。

还有一个好处是，表格更加脆弱，在不同的浏览器中呈现的效果并不总是一样的，不同的字体和字体大小以及所有其他可能导致布局变化的因素。表格是一种很好的方法，可以确保你的网站在某些浏览器中会偏离一两个像素，当用户改变字体大小或以任何其他方式改变设置时，它不会很好地缩放。

Of course #1 is the big one. A lot of tools and applications depend on the semantic meaning of a webpage. The usual example is screen-readers for visually impaired users. If you're a web developer, you'll find that many large companies who may otherwise hire you to work on a site, require that the site is accessible even in this case. Which means you have to think about the semantic meaning of your html. With the semantic web, or more relevantly, microformats, rss readers and other tools, your page content is no longer viewed exclusively through a browser.

2008-12-05 20:17:35

下面是来自最近项目的一段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

如果你在这方面支持表格角度，找一个有表格的网站，然后给自己买一个屏幕阅读器——关掉屏幕阅读器，关掉你的显示器。

然后尝试一个不错的语义正确的div布局网站。

你会发现其中的不同。

如果表格中的数据是表格而不是为了布局页面，那么表格并不是邪恶的。

2008-09-17 15:25:42

我将一个接一个地看你的论点，并试着指出其中的错误。

将内容与布局分开是很好的但这是一个错误的论点;陈词滥调的思考。

It's not fallacious at all because HTML was designed intentionally. Misuse of an element might not be completely out of question (after all, new idioms have developed in other languages, as well) but possible negative implications have to be counterbalanced. Additionally, even if there were no arguments against misusing the <table> element today, there might be tomorrow because of the way browser vendors apply special treatment to the element. After all, they know that “<table> elements are for tabular data only” and might use this fact to improve the rendering engine, in the process subtly changing how <table>s behave, and thus breaking cases where it was previously misused.

那又怎样?我的老板在乎吗?我的用户关心吗?

视情况而定。你的老板是尖头发吗?那他可能不在乎。如果她有能力，那么她就会在乎，因为用户会在乎。

也许我或我的开发伙伴谁必须维护一个网页关心…表是否更难维护?我认为使用表格比使用div和css更容易。

大多数专业的web开发人员似乎反对你[需要引用]。事实上，表的可维护性较差，这是显而易见的。使用表格进行布局意味着更改公司布局实际上意味着更改每个页面。这可能会非常昂贵。另一方面，明智地将语义上有意义的HTML与CSS结合使用可能会将此类更改限制在CSS和所使用的图片上。

顺便说一下……为什么使用div或span可以很好地将内容与布局分开，而不是表格?只有div的良好布局通常需要大量嵌套的div。

深度嵌套<div>是反模式，就像表布局一样。优秀的网页设计师不需要太多这样的东西。另一方面，即使是这样深嵌套的div也没有很多表布局的问题。事实上，它们甚至可以通过逻辑地将内容划分为多个部分来构成语义结构。

代码的可读性我觉得正好相反。大多数人懂html，很少人懂css。这是简单的。

“大多数人”不重要。专业人士。对于专业人士来说，表格布局比HTML + CSS带来更多的问题。这就像是说我不应该使用GVim或Emacs，因为记事本对大多数人来说更简单。或者我不应该使用LaTeX，因为MS Word对大多数人来说更简单。

SEO最好不要使用表格

我不知道这是不是真的，也不会把它作为一个论点，但它是合乎逻辑的。搜索引擎搜索相关数据。虽然表格数据当然可能是相关的，但它很少是用户搜索的内容。用户搜索页面标题或类似突出位置中使用的术语。因此，将表格内容排除在过滤之外，从而大幅减少处理时间(和成本!)是合乎逻辑的。

表比较慢。必须插入一个额外的tbody元素。这对于现代网络浏览器来说是微不足道的。

额外的元素与表变慢无关。另一方面，表的布局算法要困难得多，浏览器通常必须等待整个表加载后才能开始布局内容。此外，缓存布局将不起作用(CSS可以很容易地缓存)。所有这些都在前面提到过。

向我展示一些使用表会显著降低页面速度的基准测试。

不幸的是，我没有任何基准测试数据。我自己也会感兴趣，因为这个论点确实缺乏一定的科学严谨性。

大多数需要升级的网站也需要新的内容(html)。一个新版本的网站只需要一个新的css文件的场景是不太可能的。

Not at all. I've worked on several cases where changing the design was simplified by a separation of content and design. It's often still necessary to change some HTML code but the changes will always be much more confined. Additionally, design changes must on occasion be made dynamically. Consider template engines such as the one used by the WordPress blogging system. Table layouts would literally kill this system. I've worked on a similar case for a commercial software. Being able to change the design without changing the HTML code was one of the business requirements.

Another thing. Table layout makes automated parsing of websites (screen scraping) much harder. This might sound trivial because, after all, who does it? I was surprised myself. Screen scraping can help a lot if the service in question doesn't offer a WebService alternative to access its data. I'm working in bioinformatics where this is a sad reality. Modern web techniques and WebServices have not reached most developers and often, screen scraping is the only way to automate the process of getting data. No wonder that many biologists still perform such tasks manually. For thousands of data sets.

2008-09-17 16:23:06

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

推荐文章

最新文章

标签