叶子网络bbs论坛

标题: CSS与table比较 [打印本页]

作者: rain 时间: 2013-12-19 17:58
标题: CSS与table比较
  传统table布局方式实际上是利用了HTML table表格元素具有无边框特性，由于table元素可以在显示时使得单元格的边框和间距设置为0，即不显示边框，因此可以将网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。
      table布局的核心在于设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及定格则通过gif进行占位来实现，最终的结构是一个复杂的表格，不利于设计与修改。
      表格布局代码最常见的是在HTML标签<>之间嵌入一些设计代码，如width=“100%”，border=“0”等，表格布局的混合式代码就是这样编写的，大量样式设计代码混合在表格，单元格之间，使得可读性大大降低，维护起来成本也相当高，尽管现在有像Dreamweaver这样优秀的软件能帮我们可视化的进行这些代码的编写，而又经验的网页设计师都知道，Dreamweaver永远不会智能地帮你缩减代码或是重用代码，只有你需要什么，它帮你写入什么样式，最终结果是表格中到处留下设计的足迹，混合代码也由此而成。
      复杂表格设计使得设计极为不易，修改更为复杂，最后生成的网页代码除了表格本身的代码，还有许多无意义的透明gif占位图及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。
      而使用CSS 布局则可以从根本上改变这种情况。CSS布局的重点不再放在table元素的设计中，取而代之的是HTML中的另一个元素div，div可以理解为图层或是一个“块”，div是一种比表格简单的元素，从语法上只有<div>开始以及</div>结束这样一个简单的定义，div的功能仅仅是用于将一段信息给标记出来用于后期的样式定义，这里将信息标记，就是我们前面所提到的网页的“结构”部分，通过div的使用，我们可以将网页中的各个元素划分到各个div中，成为网页中的结构体，而样式表现则由CSS来完成。

欢迎光临叶子网络bbs论坛 (https://fob0.com/)