Layouts

优质

小牛编辑

128浏览

2023-12-01

希望您对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>

同样，您可以在页面顶部添加顶部导航栏或广告栏。