在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而不是表的良好参数非常感兴趣。
下面是来自最近项目的一段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布局的两倍大。在我们的高速宽带上，这不是一个大问题，但在那些拨号调制解调器上。
将内容与布局分开是很好的
但这是一个错误的论点;陈词滥调的思考
这是一个错误的论点，因为HTML表格是布局!内容是表中的数据，表示是表本身。这就是为什么从HTML中分离CSS有时会非常困难。您不是将内容与表示分开，而是将表示与表示分开!一堆嵌套的div和一个表没有什么不同——它只是一组不同的标签。
把HTML和CSS分开的另一个问题是，它们需要彼此的密切了解——你真的不能把它们完全分开。无论您做什么，HTML中的标记布局都与CSS文件紧密耦合。
我认为表与div的区别取决于应用程序的需要。
在我们在工作中开发的应用程序中，我们需要一个页面布局，其中各个块将动态地调整自己的大小以适应其内容。我花了几天时间试图让它与CSS和div跨浏览器工作，这是一个完全的噩梦。我们换了桌子，一切都很顺利。
然而，我们的产品有一个非常封闭的受众(我们销售的是带有web界面的硬件)，可访问性问题不是我们关心的问题。我不知道为什么屏幕阅读器不能很好地处理表格，但我猜如果这是开发人员必须处理的方式。
下面是我的程序员在一个类似的帖子中给出的答案
语义101
首先看一下这段代码，想想哪里出了问题……
class car {
int wheels = 4;
string engine;
}
car mybike = new car();
mybike.wheels = 2;
mybike.engine = null;
当然，问题在于自行车不是汽车。car类对于bike实例是不合适的类。代码没有错误，但是语义不正确。这对程序员的形象很不利。
语义102
现在将此应用于文档标记。如果您的文档需要显示表格数据，那么适当的标记将是<table>。但是，如果将导航放在表中，则滥用了<table>元素的预期用途。在第二种情况下，您没有表示表格数据—您(mis)使用<table>元素来实现表示目标。
结论
游客会注意到吗?不。你的老板在乎吗?也许吧。作为程序员，我们有时会偷工减料吗?当然。但是我们应该吗?不。如果使用语义标记，谁会受益?你，还有你的职业声誉。现在去做正确的事吧。
我不得不用这两种方式来做网站，再加上第三种，可怕的“混合”布局，包括表格、div和样式:div /CSS轻松胜出。
为了匹配一个表格单元格的代码权重，您必须立即嵌套三个深度的div。这种效果会随着嵌套表的增加而扩大。
我也更喜欢做一个布局变化，而不是一个变化，在我的网站的每一页。
我可以完全控制divs/css的各个方面。表格以一种可怕的方式把它搞得一团糟，尤其是在IE浏览器中，我从来没有选择不支持这个浏览器。
我维护或重新设计一个div /css网站的时间只是表格的一小部分。
最后，我可以用CSS和几乎任何脚本语言创新多种可切换的布局。这对我来说是不可能的。
在你做决定的时候，祝你的投资回报率好运。
