在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而不是表的良好参数非常感兴趣。
根据我对表的了解，如果嵌套了太多的表，在呈现页面时浏览器会有很大的开销。
1 -浏览器必须等待呈现最终视图，直到整个表被加载。
2 - The algorithm to render the table is expensive and is not in a single go. The browser, as and when, gets the contents, will try to render calculating the content width and height. So, if you are having nested tables, say, the browser has received the first row and the 1st cell is having large amount of content and width and height not defined, it will calculate the width and will render the first row,
In the mean while it gets the 2nd row will cell#2 having loads of content! It will now calculate the width for 2nd row cells.. What about the first ? It will calculate widths recursively. That's bad at client side.
(To site an example) As a programmer, you'll optimize stuffs such as time to fetch data, optimized data structures and etc. You optimize things to complete on server side, say in2 secs, but end user in getting the final view in 8 secs. What is wrong here ?
1. May be network is slow! What if network is fine ? What is network is delivering the contents in next 1 sec ? Where is this extra 5 secs getting consumed ? Thing to worry about-- The browser might be taking lot of time in estimating and rendering the tables!
如何优化表?
如果你使用表格，我建议，总是定义单元格的宽度。这并不能保证浏览器会盲目地只取这个宽度，但会对浏览器决定初始宽度有很大的帮助。
但是，最后，div是CSS可以被浏览器缓存的好方法;而表没有缓存!
当我使用CSS设计我的布局时，我通常给每个主要部分都有自己的根(主体级别)div，并使用相对/绝对定位将其置于适当的位置。这比表更灵活一些，因为我不局限于可以用行和列表示的排列。
此外，如果我决定我想要重新安排布局(说我想要导航栏现在在右边)，我可以简单地去改变一个地方(CSS文件)的元素位置，HTML不需要改变。如果我对表执行此操作，我将不得不进入并找到信息，并进行大量属性修改和复制粘贴以获得相同的效果。
事实上，使用CSS，我甚至可以让我的用户选择他们想要的布局如何工作。只要内容区域的一般大小不改变，我完全可以使用一些PHP脚本来根据用户的偏好输出CSS，并允许他们根据自己的喜好重新排列站点。同样，对于表也是可以的，但是维护起来要困难得多。
最后，CSS提供了一个表永远无法提供的主要好处:基于显示设备重新格式化内容的能力。CSS允许我在打印机上使用与显示器上完全不同的样式集(包括位置、格式等)。这也可以扩展到其他媒体，一个很好的例子是Opera Show，它允许一个设计巧妙(非常标准)的CSS增强页面被视为幻灯片显示。
因此，最终，灵活性和管理才是真正的赢家。一般来说，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布局的两倍大。在我们的高速宽带上，这不是一个大问题，但在那些拨号调制解调器上。
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之外的所有人用多种语言解决过很多次了，对吧?没有人否认这样一个功能是有用的。)
叹息。足够的通风。去吧，把头埋进沙子里。
一个例子:你想要居中
一个页面的主要内容区域，但在
为了把浮体装在里面，
它需要浮动。没有
CSS中的float: center。
这并不是在居中元素中“包含浮点数”的唯一方法。所以，这根本不是一个好的论点!
在某种程度上，“divs vs table”是一个错误的前提。
把一页快速地分成三列?说实话，表格更简单。但是没有专业人士将它们用于布局，因为它们将页面元素的位置锁定在页面中。
真正的争论是“由CSS完成的定位(最好是在远程文件中)”，而不是“在页面中由HTML完成的定位”。相对于后者，每个人都能看到前者的好处吗?
Size -- if your page layout is in the HTML, in the pages, it can't be cached, and it has to be repeated on every page. You will save enormous amounts of bandwidth if your layout is in a cached CSS file, not in the page.
Multiple developers can work on the same page at the same time -- I work on the HTML, other guy works on the CSS. No repository needed, no problems with over-writing, file locking etc.
Making changes is easier -- there will be problems with layout in different browsers, but you only have to fix one file, the CSS file, to sort them out.
Accessibility, as mentioned a lot previously. Tables assume a two-dimensional layout works for everyone. That's not how some users view your content and it's not how Google views your content.
考虑一下:
[ picture ] [ picture ] [ picture ]
[ caption ] [ caption ] [ caption ]
表示包含6个单元格的表中的两行。能看到二维表格布局的人会在每张图片下看到标题。但是使用语音合成，或者PDA，以及搜索引擎蜘蛛，那是
picture picture picture caption caption caption
有了表格，这种关系就明显消失了。
div和CSS是否更适合在HTML页面上简单地布局矩形以在最短的时间内实现给定的设计?不，他们可能不是。但我不是在快速布局矩形来实现给定的设计。我想的是更大的前景。
我认为没有人会在意一个网站是如何设计/实现的，当它运行得很好并且运行得很快的时候。
我在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盒子模型在每个浏览器上是不同的，因为许多生成器使用表格等
