Code
2023-06-14 05:00:03

为什么不在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

其他回答

我很惊讶地发现有些问题还没有涉及到，所以除了之前提出的所有非常有效的观点之外，以下是我的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

我不得不用这两种方式来做网站，再加上第三种，可怕的“混合”布局，包括表格、div和样式:div /CSS轻松胜出。

为了匹配一个表格单元格的代码权重，您必须立即嵌套三个深度的div。这种效果会随着嵌套表的增加而扩大。

我也更喜欢做一个布局变化，而不是一个变化，在我的网站的每一页。

我可以完全控制divs/css的各个方面。表格以一种可怕的方式把它搞得一团糟，尤其是在IE浏览器中，我从来没有选择不支持这个浏览器。

我维护或重新设计一个div /css网站的时间只是表格的一小部分。

最后，我可以用CSS和几乎任何脚本语言创新多种可切换的布局。这对我来说是不可能的。

在你做决定的时候，祝你的投资回报率好运。

2008-10-17 16:37:38

This isn't really about whether 'divs are better than tables for layout'. Someone who understands CSS can duplicate any design using 'layout tables' pretty straightforwardly. The real win is using HTML elements for what they are there for. The reason you would not use tables for non-tablular data is the same reason you don't store integers as character strings - technology works much more easily when you use it for the purpose for which it is desgined. If it was ever necessary to use tables for layout (because of browser shortcomings in the early 1990s) it certainly isn't now.

2008-09-17 23:03:20

我想补充的是，基于div的布局更容易维护、发展和重构。只是在CSS中做了一些改变来重新排序元素，这就完成了。根据我的经验，重新设计使用表的布局是一场噩梦(如果有嵌套的表，则会更糟)。

从语义的角度来看，代码也有意义。

2008-09-17 13:28:37

推荐文章

aliyun

最新文章

标签

2025 code 京ICP备15047053号-1