“表格已死...”

已经有几位设计师在Jeffrey Zeldman的?引领?下发表了一些指南，这些指南曾经帮助我们度过无表格设计的困难时期。最初的努力主要是集中在通过CSS定位（CSS positioning）来代替表格创建两个或者更多的列。因此需要考虑一个（完全）不同的显示结构。这些边框技术已经被编辑为文档，你可以在Eric Costello 的网站?glish?以及Rob Chandanais 的网站?Blue Robot?上找到。

其它一些站点也有参与，包括Owen Briggs 的?方盒课程（Box lesson） 以及?由Eric Costello 撰写，Tantek ?elik 解释?的?方盒模型工作区?(box model hack/workaround)。Dotfile?列出了上百个使用CSS布局的站点。

“...表格长存”

当这些卓越的资源都在致力于仅用CSS定位来创建总体布局这一重点时,作为设计师的我们也发现了另一些很实际的问题。这些在表格中能轻易解决的问题，对CSS来说却不那么明显。这样的问题在?Webdesign-L?列表中以主题“表格已死 ... 表格长存”发表。

问题所在

假设你有一大堆的缩略图，每一张都链接着这幅图片的原始大小版本?—?这是一种相当普遍的网页。进一步假设，每一张图片都有一个简短的标题，你希望它们居中于图片下方。并且，考虑到浏览器窗口的大小问题，你希望将这些图片和标题成对出现，按行排列在屏幕上。但是，还必须能够随着浏览器宽度的改变而自动换行（流动式设计）。由于这最后一条要求，我们必须放弃使用表格，而运用CSS。

步步为营

让我们一步一步地来看。首先是要求缩略图的下方有居中的标题。这一步相对简单：找到HTML代码中放置图片的部分，添加换行，然后将标题放在居中对齐（用CSS实现）的段落里。

接下来要将这些图片和标题成对地排列在浏览器的窗口中。如果使用表格，每一对图片和标题将进入一个独立的单元格，而使用CSS我们需要把它们放进独立的层中。为了使它们在窗口中水平排列，只需在样式表中将层的浮动属性设置为向左浮动。

这段CSS代码应该是这样的：

div.float {
  float: left;
  }
  
div.float p {
   text-align: center;
   }

HTML代码如下：

<div class="float">
  <img src="/image1.gif" width="100" height="100"
  alt="image 1" /><br />
  <p>caption 1</p>
</div>

<div class="float">
  <img src="/image2.gif" width="100" height="100"
  alt="image 2" /><br />
  <p>caption 2</p>
</div>

<div class="float">
  <img src="/image3.gif" width="100" height="100"
  alt="image 3" /><br />
  <p>caption 3</p>
</div>