扔掉Table使用XHTML+CSS的布局

XHTML+CSS能够实现的是一种流布局，也就是随着内容的长度自动增长区域，并且最终导致整个页面增长，这时候浏览器就必须显示滚动条。table强迫症的一个征兆就是极力避免流布局，希望以浏览器的可视区域为布局目标，要求在可视区域中划分内容区域而不是在页面上划分内容区域。本文就讲解了使用XHTML+CSS布局页面的原因。

在CSDN社区上，时不时能够看到一些页面整体布局的问题，要求用div做一些table才能做到的，否则就以此为把柄说XHTML+CSS布局方法不好。其实，首先要做的是改变思维，以适应XHTML+CSS的布局。

面向页面设计而非面向浏览器设计

XHTML+CSS能够实现的是一种流布局，也就是随着内容的长度自动增长区域，并且最终导致整个页面增长，这时候浏览器就必须显示滚动条。table强迫症的一个征兆就是极力避免流布局，希望以浏览器的可视区域为布局目标，要求在可视区域中划分内容区域而不是在页面上划分内容区域。实际上XHTML是无法针对浏览器设计的，因为它仅仅包含语义，或者说是内容，而浏览器如何去表现这些内容是我们无法确定的。CSS提供了我们控制表现方式的一种途径，但这仅仅是针对主流浏览器的，而且浏览器支持的“指令集”还有稍为的差别（说到这，我真希望能够为一个浏览器写CSS然后编译为全平台兼容代码），最后这些指令暂时还仅仅支持针对页面的流式布局控制。因此，如果你决定要开始写符合语义的XHTML并且仅仅用CSS控制布局，首先就要把思路转变为面向页面（或者说是文档）的布局控制，而非面向浏览器可视区域的布局控制。

接下来肯定有人要说，“那你就是承认了有些布局老方法很容易做到，但新方法很难做到啦”。这是当然的，然而这不成为我们继续使用table的理由。这时候要反过来探讨原始目标了，我们是为什么要控制布局？低层次的需求是为了美观，谁都希望同样的内容能够以更好的视觉效果展示在用户眼前；高层次的需求是为了控制受众的浏览方式，让他们能够按我们预先设计好的方式来区分页面内容的轻重点，按我们的期望优先浏览某些内容，同时也帮助他们更快的找到他们想要的内容，而不会在我们的网站内感到沮丧。既然我们确定了这时控制布局的目标，那么我们再来看看CSS是不是“没办法把事情做好”。首先，CSS也能做出美观的页面，虽然某些布局做不到，但是在CSS的限制下做到同等美观程度的页面是肯定没问题的。其次，CSS也能让设计变得友善，不会说CSS的设计就肯定是“干净”到用户无法一眼找到他想要的功能。因此，虽然CSS无法实现某些特定的布局效果，但对于设计师来说它能够达到老方法所能达到的同等效果，这就足够了。

从XHTML中去掉内容无关的视觉元素

另一个table强迫症的征兆就是，习惯为每一个视觉上的元素对应一个XHTML元素。在table中，无论视觉效果有多复杂，我们总能不停的切割table，甚至table套table，直到准确定位每一个特定的元素。然而应用了CSS之后，这就是不必要的，甚至会给设计师带来麻烦，因为XHTML+CSS就是为了内容和布局分离，所以如果一个视觉元素与内容无关，那么它就不应当出现在XHTML中，自然也就不会对应一个XHTML元素。

例如有一个网站当前栏目的徽标，这个徽标没有任何的语义，而XHTML中也有文字内容描述当前栏目了，那么这个徽标就并不一定要对应一个<img />元素。如何让徽标显示出来呢？它可以是当前栏目文字描述区域的background-image，同时通过一些定位技巧让它显示出来。如果你认为有这个徽标就不需要文字描述时，你还可以通过定位技巧将文字隐藏掉，这样单纯看XHTML或者在不支持CSS的浏览器上就只见文字描述，而在支持CSS的浏览器中则看见会标。从这个例子，我们可以看得到一个视觉元素不一定要对应XHTML中一个实实在在的内容元素，或者对应一个文本元素而非图形元素。XHTML包含的是内容，那就不应该包含与内容无关的视觉元素描述，而通过CSS你可以事后增加有关的视觉元素。

又例如:before和:after这两个伪选择器，允许你创建插入在匹配元素前后的元素，这样就能够实现非内容视觉效果仅在CSS中插入。常见的用法包括，插入clear到浮动元素之后以确保父元素的完整包含，又或者是引用语句的前后自动加上引号。事实表明，CSS是很适合于将非内容的元素从XHTML中分离出来的，因此我们在设计XHTML时就不能够总想着要有什么效果，而应该单纯想着信息的组织形式。

最后，如果要我为table强迫症开处方的话，我还是会选择《CSS Mastery/精通CSS》。看完之后，你自然能够解除上述的烦恼，理解到CSS布局带来的便利，从而选择开始用纯CSS的思维来进行设计。