Layouts
希望您对HTML表格非常熟悉,并且使用HTML表格设计页面布局非常有效。 但是你知道CSS还为文档中的定位元素提供了大量的控件。 既然CSS是the wave of the future,为什么不学习和使用CSS代替表格进行页面布局呢?
以下列表收集了这两种技术的一些优缺点 -
大多数浏览器都支持表格,而CSS支持正在慢慢采用。
当浏览器窗口大小发生变化时,表格更加宽容 - 变形其内容并进行换行以相应地适应更改。 CSS定位往往是精确且相当不灵活的。
表比CSS规则更容易学习和操作。
但这些论点中的每一个都可以颠倒过来 -
CSS对Web文档的未来至关重要,大多数浏览器都支持CSS。
CSS比表格更精确,无论浏览器窗口如何,都可以按照您的意图查看文档。
跟踪嵌套表可能是一个真正的痛苦。 CSS规则往往组织良好,易于阅读和易于更改。
最后,我们建议您使用对您有意义的技术,并以最佳方式使用您所知道的或以何种方式呈现您的文档。
CSS还提供了table-layout属性,使您的表格加载速度更快。 以下是一个例子 -
<table style = "<b>table-layout:fixed</b>;width:600px;">
<tr height = "30">
<td width = "150">CSS table layout cell 1</td>
<td width = "200">CSS table layout cell 2</td>
<td width = "250">CSS table layout cell 3</td>
</tr>
</table>
您会注意到大型桌面的好处。 使用传统的HTML,浏览器必须在最终渲染表之前计算每个单元格。 但是,当您将表格布局算法设置为fixed时,它只需要在渲染整个表格之前查看第一行。 这意味着您的表需要具有固定的列宽和行高。
样本列布局
以下是使用CSS创建简单列布局的步骤 -
设置完整文档的边距和填充如下 -
<style style = "text/css">
<!--
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
-->
</style>
现在,我们将定义一个黄色的列,稍后,我们将此规则附加到
-<style style = "text/css">
<!--
#level0 {
background:#FC0;
}
-->
</style>
到目前为止,我们将有一个带有黄色主体的文档,所以现在让我们在level0中定义另一个分区 -
<style style = "text/css">
<!--
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
-->
</style>
现在,我们将在level1中再嵌套一个分区,我们将改变背景颜色 -
<style style = "text/css">
<!--
#level2 {
background:#FFF3AC;
}
-->
</style>
最后,我们将使用相同的技术,在level2中嵌套level3分区以获得右列的可视布局 -
<style style = "text/css">
<!--
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {
background:#CCC;
}
-->
</style>
完成源代码如下 -
<style style = "text/css">
body {
margin:9px 9px 0 9px;
padding:0;
background:#FFF;
}
#level0 {background:#FC0;}
#level1 {
margin-left:143px;
padding-left:9px;
background:#FFF;
}
#level2 {background:#FFF3AC;}
#level3 {
margin-right:143px;
padding-right:9px;
background:#FFF;
}
#main {background:#CCC;}
</style>
<body>
<div id = "level0">
<div id = "level1">
<div id = "level2">
<div id = "level3">
<div id = "main">
Final Content goes here...
</div>
</div>
</div>
</div>
</div>
</body>
同样,您可以在页面顶部添加顶部导航栏或广告栏。