在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布局的两倍大。在我们的高速宽带上，这不是一个大问题，但在那些拨号调制解调器上。
一般来说，表并不比CSS更容易或更易于维护。然而，在一些特定的布局问题中，表确实是最简单和最灵活的解决方案。
在表示标记和CSS支持相同类型的设计的情况下，CSS显然是更可取的，没有人会认为字体标记比在CSS中指定排版更好，因为CSS提供了与字体标记相同的功能，但以一种更干净的方式。
The issue with tables, however, is basically that the table-layout model in CSS is not supported in Microsoft Internet Explorer. Tables and CSS are therefore not equivalent in power. The missing part is the grid-like behavior of tables, where the edges of cells align both vertically and horizontally, while cells still expand to contain their content. This behavior is not easy to achieve in pure CSS without hardcoding some dimensions, which makes the design rigid and brittle (as long as we have to support Internet Explorer - in other browsers this is easliy achieved by using display:table-cell).
因此，这并不是一个表或CSS更可取的问题，而是一个认识到使用表可以使布局更灵活的具体情况的问题。
不使用表的最重要原因是可访问性。Web内容可访问性指南http://www.w3.org/TR/WCAG10/建议不要使用表格进行布局。如果您担心可访问性(在某些情况下，您可能有法律义务这样做)，即使表更简单，也应该使用CSS。请注意，您总是可以用CSS创建与表相同的布局，这可能只是需要更多的工作。
Layout should be easy. The fact that there are articles written on how to achieve a dynamic three column layout with header and footer in CSS shows that it is a poor layout system. Of course you can get it to work, but there are literally hundreds of articles online about how to do it. There are pretty much no such articles for a similar layout with tables because it's patently obvious. No matter what you say against tables and in favor of CSS, this one fact undoes it all: a basic three column layout in CSS is often called "The Holy Grail".
如果这不能让你说“WTF”，那么你现在真的需要放下酷爱饮料了。
我喜欢CSS。它提供了惊人的样式选项和一些很酷的定位工具，但作为一个布局引擎，它是有缺陷的。需要某种类型的动态网格定位系统。一个直接的方法来对齐多个轴上的盒子，而不知道他们的大小。我不在乎你叫它<table>或<gridlayout>或其他什么，但这是CSS中缺少的一个基本布局特性。
更大的问题是，由于不承认有缺失的特性，CSS狂热者一直在阻碍CSS的发展。如果CSS能像世界上其他布局引擎一样提供像样的多轴网格定位，我很乐意停止使用表格。(你应该意识到这个问题已经被除了W3C之外的所有人用多种语言解决过很多次了，对吧?没有人否认这样一个功能是有用的。)
叹息。足够的通风。去吧，把头埋进沙子里。
