使用表格与 CSS 渲染网页的速度
4.68/5 (10投票s)
有些人提倡使用 CSS 来布局网页，也有人提倡使用表格来布局网页。本文可能会对这两类人都有所裨益。
引言
有些人提倡使用 CSS 来布局网页，也有人提倡使用 <table> 来布局网页。本文可能会对这两类人都有所裨益。
背景
我一直想确定，用户代理渲染网页所需的时间，在用 <table> 布局的网页和用 CSS 布局的网页之间是否存在显著差异。关于渲染时间，似乎仍然有很多争论，但客观数据却不多。同时，我也想确定最少的 CSS，能够创建一个三栏的“液体”网页。液体设计允许网页在给定的空间内显示。通常，这种网页的宽度是以百分比指定的。
我决定构建一个三栏网页。使用 <table> 定义的布局相对简单。然而，在 CSS 定义的布局中，这种简单性被复杂性的增加所取代。主要原因是：除非采取特殊措施，否则每一列都是独立的。反过来，这意味着页面的背景可能不会在整个页面上延伸到同一个“底部”。在下面的插图中，主体背景是薰衣草色，每一列都有不同的颜色，从而说明了这种困难。
避免此问题的一种方法在 Matthew James Taylor 撰写的《跨浏览器 CSS 实现等高列（无 hack）》中得到了很好的描述：Equal Height Columns with Cross-Browser CSS 。将其应用于之前的网页，效果如下：
这就是我想要的，所以我使用了 Taylor 的方法为实验生成了 CSS 网页。
一位读者指出，我没有提到 CSS 布局不仅旨在提供液体流，还旨在改善搜索引擎优化。前者通过使用百分比宽度实现。后者则通过相当复杂的 CSS 实现，该 CSS 将中间列的内容首先放置在 HTML 中（显然，搜索引擎更重视它遇到的第一个文本）。
实验
为了进行实验，我采取了以下步骤：
- 根据使用 Taylor 方法导出的 CSS 网页，我导出了使用
<table>的网页。我非常小心地确保两者包含相同的视觉元素。
- 每个网页由一对文件组成：HTML 文件和 CSS 文件。每个文件都使用相应的 W3C 验证服务进行了验证（即 Markup 和 CSS）。
- 在网页验证后，我使用 HTML Compressor（具体版本为 1.0）压缩了 HTML 和 CSS 文件。压缩后，将两对 HTML 和 CSS 文件放在我尚未发布的网站上。
- 我使用了 NetRenderer 网站来测量页面渲染时间。该工具被提供了我网站上 HTML 文件的网页地址。该工具运行了十二次，并将渲染时间（以秒为单位）记录在 Excel 电子表格中。
结果
原始数据和去除异常值后的数据如下：
| 原始数据 | 去除异常值后 | ||
| 表格 | Div | 表格 | Div |
| 1.856 | 1.977 | 1.668 | 1.686 |
| 3.445 | 1.844 | 1.712 | 1.705 |
| 4.646 | 1.833 | 1.759 | 1.725 |
| 9.420 | 2.726 | 1.772 | 1.740 |
| 1.668 | 1.686 | 1.796 | 1.801 |
| 1.772 | 1.725 | 1.856 | 1.826 |
| 1.759 | 2.352 | 1.857 | 1.833 |
| 6.831 | 1.801 | 1.996 | 1.844 |
| 1.712 | 1.705 | ||
| 1.796 | 1.826 | ||
| 1.857 | 4.262 | ||
| 1.996 | 1.740 | ||
| 3.230 | 2.123 | 1.802 | 1.770 |
尝试通过互联网进行计时可能会由于加载而随机增加值。为了消除这种偏差，我删除了四个最大值（异常值）。
结论
从“去除异常值后”列的平均值（粗体值）来看，使用 <table> 布局的页面和使用 CSS 布局的页面所需的渲染时间差别不大。
一个观察
在开发本文的网页时，我最终得到了以下源代码长度：
| 来源 | 字符 |
| 3ColumnCSS.htm | 1776 |
| 3ColumnCSS.css | 1007 |
| 2783 | |
| 3ColumnTable.htm | 1867 |
| 3ColumnTable.css | 588 |
| 2455 |
这些源代码长度并不重要。但是 3ColumnCSS.css 文件的内容很重要。考虑 3ColumnCSSWithComments.css 文件（包含在可下载的项目文件中）的内容。
*
{
margin:0;
padding:0;
border:0; /* This removes the border around */
/* the viewport in old versions of IE */
}
body
{
width:100%;
background-color:#FFFFF0; /* Ivory */
min-width:600px; /* Minimum width of layout - remove */
/* line if not required The min-width */
/* property does not work in old */
/* versions of Internet Explorer */
font-size:90%;
}
h1
{
width:100%;
float:left;
margin:0.8em 0 0.2em 0;
}
p
{
margin:0.4em 0 0.8em 0;
padding:0;
}
/* Header styles */
.header
{
clear:both;
float:left;
width:100%;
height:100px;
border-bottom:#c00 solid 3px;
}
.header h1,
.header h2,
.header h3
{
padding:0.4em 15px 0 15px;
}
/* page content container */
.content
{
position:relative; /* This fixes the IE7 overflow hidden bug */
clear:both;
float:left;
width:100%; /* width of whole page */
overflow:hidden; /* This chops off any overhanging divs */
}
/* common column settings */
.left_column,
.center_column,
.right_column
{
float:left;
width:100%; /* width of page */
position:relative;
}
.load_first,
.load_second,
.load_third
{
float:left;
position:relative;
padding:0 0 1em 0; /* no left and right padding on columns, */
/* we just make them narrower instead */
/* only padding top and bottom is */
/* included here, make it whatever */
/* value you need */
overflow:hidden; /* This chops off any overhanging content */
}
/* 3 Column settings */
.three_column
{
background:#FFB6C1 /* LightPink */
}
.three_column .center_column
{
right:25%; /* width of the right column */
background:#FFDAB9; /* PeachPuff */
}
.three_column .left_column
{
right:50%; /* width of the middle column */
background:#AFEEEE; /* PaleTurquoise */
}
.three_column .load_first
{
width:46%; /* width of center column content (column */
/* width minus padding (2%) on either */
/* side) */
left:102%; /* 100% plus left padding (2%) of center */
/* column */
}
.three_column .load_second
{
width:21%; /* Width of left column content (column */
/* width minus padding (2%) on either */
/* side) */
left:31%; /* width of (right column) plus (center */
/* column left and right padding (2%) ) */
/* plus (left column left padding (2%) ) */
}
.three_column .load_third
{
width:21%; /* Width of right column content (column */
/* width minus padding (2%) on either */
/* side) */
left:85%; /* Please make note of the brackets here:*/
/* (100% - left column width) plus */
/* (center column left and right padding */
/* (2%) ) plus (left column left and */
/* right padding (2%) ) plus (right */
/* column left padding (2%) ) */
}
/* Footer styles */
.footer
{
clear:both;
float:left;
width:100%;
border-top:#c00 solid 3px;
}
.footer p
{
padding:10px;
margin:0;
}
.footer .W3C_image
{
padding-left:25px;
height:31px;
width:88px;
}
在这里，注释被保留，我发现，虽然 Taylor 的方法是合理的，但它带来了显著的复杂性。然而，那些考虑使用 CSS 进行网页布局的人应该被警告。
参考文献
测试的浏览器
所有浏览器都为表格和 CSS 布局产生了预期的结果。
历史
- 2011/05/19 - 原始文档
- 2011/06/11 - 回应读者评论，添加了一个段落