DIV+CSS布局和TABLE布局详解

DIV+CSS布局和TABLE布局详解

1.1 TABLE布局
1.1.1概述
      HTML table元素渲染到网页上，其单元格的边框和间距均为0。传统TABLE布局方式就是利用table元素的这个特性，将网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。
        table布局的核心在于设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及定格则通过gif占位图进行占位来实现。
        表格布最常见的编码方式是混合式的，即在HTML标签<>之间嵌入一些样式代码。
1.1.2布局劣势
        TABLE布局的最终结构是一个复杂的表格，不利于设计与修改。
        TABLE布局的混合式编码，使得最后生成的网页代码除了表格本身的代码，还有许多无意义的透明gif占位图及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。同时，大大降低了代码的可读性，增加了维护成本。
1.2 Div+CSS布局
1.2.1概述
        div标签是一种比表格简单的元素。语法简单，即<div></div>；功能单一，仅仅是用于将一段信息给标记出来用于后期的样式定义。通过div的使用，可以将网页中的各个元素划分到各个div中，成为网页中的结构体，而样式表现则由CSS来完成。
1.2.2布局优势
        实现了表现与内容分离的布局目标。充分提高了代码的利用率，效率大大提高，后期维护成本显著降低。
        Div+CSS布局不需要像表格一样通过其内部的单元格来组织版式，而是通过CSS强大的样式定义功能，这样可以比表格更简单更自由地控制页面版式及样式。