基于表格的布局是下一个大问题

最新推荐文章于 2024-02-24 02:20:09 发布

dingshi7798

最新推荐文章于 2024-02-24 02:20:09 发布

阅读量81

点赞数

最近发布的SitePoint CSS参考（及其印刷版，终极CSS参考）包含了CSS的一些较晦涩领域的广泛覆盖。 CSS表格是随着今年晚些时候IE8的发布而变得非常重要的一个领域。

多年来，接受CSS布局的开明的设计师不得不向后弯腰以产生复杂的设计，而这些复杂的设计使用过去基于HTML表格的布局技术来生产是微不足道的。

设计师必须使用CSS技术制作简单的三列布局的篇幅如此之长，以至于许多Web设计师只是放弃了CSS并使用HTML表进行布局。《技术时报》第142号和第143号专门讨论了这个问题。

随着今年IE8的发布，所有这些变化都处于准备阶段。 IE8将是最后一个添加对CSS表格的支持的主要浏览器，这将使设计人员能够使用基于表格的布局技术而不会滥用 HTML表格标记。

为了说明这一点，我使用CSS表制作了以下3列页面布局示例：

这种布局并非唯一。使它与众不同的是实现它的难易程度。我不是使用绝对定位或易碎且违反直觉的浮动技术，而是使用相对易于理解的CSS表来生成它。

布局中的三列均为具有唯一ID的<div> 。从左到右分别是"navigation" ， "content"和"sidebar" 。这三个都包含在另一个<div> ，其ID为"body" 。

使用CSS的魔力在于使这三个非明显的<div>像表行中的单元格一样显示。首先，我们设置包含的<div>以显示为表格：

#body {
  border-collapse: collapse;
  display: table;
  table-layout: fixed;
}

然后我们将三个<div>的每一个设置为显示为表格单元格，其宽度为：

#navigation, #content, #sidebar {
  display: table-cell;
}
#navigation {
  width: 200px;
}
#content {
  width: 66%;
}
#sidebar {
  width: 33%;
}

加上一些边框和背景色，以及一些填充以使其达到最终的光泽，我们得到了一个完美可用的布局。

甲长期错误在Firefox使得必须添加含有第二<div>内部"body" <div>并将其设置为display: table-row 。否则，布局在最初加载时通常会中断。

此代码不仅非常简单，而且结果也比使用早期CSS布局技术实现的典型三列布局更健壮。无论哪一列内容最多，每一列都将扩展页面的整个高度，并且布局不会因字体或窗口尺寸过大而分散。布局仅能正常工作-就像基于HTML表格的布局一直都在工作一样。

IE8推出后，我们就可以开始证明将IE7抛在后面，我们就可以开始使用这些简单而强大的技术，因为所有其他主要的浏览器都已经支持CSS表。突然之间，几乎每个人都可以理解基于CSS的页面布局！

当然，我们不能只是在IE8发布当天就抛弃当前的CSS布局技术，可以吗？毕竟，IE7及其前身将会存在很多年。如果您希望自己的网站在这些浏览器中看起来不错，则仍然必须突破使用它们的更复杂，更脆弱的布局技术。

但是，如果您有理由让IE7及更早版本的用户的使用体验略有下降，则可以最大程度地减少网站中需要的复杂CSS数量。例如，如果您在IE7中查看上述示例，则会看到一个简化的两列版式，从而避免了将像素宽度列与百分比宽度列混合使用的需要，从而简化了制作IE7及更早版本中的布局工作。

CSS表格最终将使CSS的页面布局与以往的HTML表格布局技术一样容易。除非支持较旧的浏览器，否则设计师不再有任何借口滥用表格标记来快速轻松地进行布局工作。如上面的示例所示，通过一些额外的计划，您甚至应该能够在使用旧版浏览器用户布局的同时利用CSS表格为他们提供合理的体验。

关注