DIV+CSS布局和TABLE布局详解

1.1TABLE布局

1.1.1概述

HTMLtable元素渲染到网页上，其单元格的边框和间距均为0。传统TABLE布局方式就是利用table元素的这个特性，将网页中的各个元素按版式划分放入表格的各个单元格中，从而实现复杂的排版组合。

table布局的核心在于设计一个能满足版式要求的表格结构，将内容装入每个单元格中，间距及定格则通过gif占位图进行占位来实现。

表格布最常见的编码方式是混合式的，即在HTML标签<>之间嵌入一些样式代码。

1.1.2布局劣势

TABLE布局的最终结构是一个复杂的表格，不利于设计与修改。

TABLE布局的混合式编码，使得最后生成的网页代码除了表格本身的代码，还有许多无意义的透明gif占位图及其他元素，文件量庞大，最终导致浏览器下载及解析速度变慢。同时，大大降低了代码的可读性，增加了维护成本。

1.2Div+CSS布局

1.2.1概述

div标签是一种比表格简单的元素。语法简单，即<div></div>；功能单一，仅仅是用于将一段信息给标记出来用于后期的样式定义。通过div的使用，可以将网页中的各个元素划分到各个div中，成为网页中的结构体，而样式表现则由CSS来完成。

1.2.2布局优势

实现了表现与内容分离的布局目标。充分提高了代码的利用率，效率大大提高，后期维护成本显著降低。

Div+CSS布局不需要像表格一样通过其内部的单元格来组织版式，而是通过CSS强大的样式定义功能，这样可以比表格更简单更自由地控制页面版式及样式。