浅谈网页布局TABLE和DIV+CSS
2017-10-24崔晓
崔 晓
(武汉工程职业技术学院 湖北 武汉：430080)
浅谈网页布局TABLE和DIV+CSS
崔 晓
(武汉工程职业技术学院 湖北 武汉：430080)
TABLE和DIV+CSS是市场上常用的两种网页布局方式，本文采用一个网页实例分别对两种布局方式进行了比较分析，并给出了具体实现的HTML源代码。
表格；DIV+CSS；TABLE；网页布局；对比
网页的布局指的是用户在网页设计的过程中，安排网页中的文本、图像、动画、视频等元素在页面中显示的位置以及具体数量。目前市场上常用的网页布局是TABLE布局和DIV+CSS布局。下面分别对这两种布局方式的特点进行比较分析。
1 TABLE布局
表格是网页元素之一，可以用来进行页面布局。在HTML语言中，代表表格，代表行，代表单元格。表格布局主要通过嵌套表格实现，即大表格中嵌套小表格。对于如图1所示的网页效果图，使用表格布局设计整个版面如图2所示。
图1 网页效果图
图2 使用TABLE布局的具体设计图
首先在网页中插入一个三行一列的大表格进行网页的整体页面设置，然后在大表格的第一行插入一个三行一列的小表格，用来显示网页的标题部分。接着在大表格的第二行插入一个一行二列的表格，显示网页的主体内容(即图片、诗歌和语句注释)。最后在大表格的最后一行写入版权信息。
使用TABLE进行页面布局的关键源代码如下：
| ||
2 DIV+CSS布局
CSS(Cascading Style Sheet)即层叠样式表，它是一种用来表现HTML或XML等文件样式的计算机语言。DIV+CSS布局包括两部分：一系列的CSS样式，用来定义页面元素的外观；以及与其相对应的一系列XHTML标签，主要是DIV标签，构成页面的基础。
2.1 盒子模型原理
DIV+CSS布局的核心是盒子模型，将每个DIV标签看成一个空盒子，网页元素的内容(content)放在盒子中，如图3所示。盒子具有宽度(width)和高度(height)，盒子里面的内容到盒子的边框之间的距离称为填充(padding)，盒子本身有边框(border)，盒子边框外和其他盒子之间的距离称为边界(margin)。
图3 盒子模型
2.2 使用DIV+CSS的具体实现
同样，以图1所示的网页效果图为例，采用DIV+CSS布局设计页面，可以将页面分为顶部、中部和底部三个区域。顶部区域可划分为上、中、下三个部分，显示标题信息；中部区域可分为左侧和右侧两个部分，显示网页的主要内容，即诗歌；底部区域显示网页的版权信息。
使用DIV+CSS进行页面布局的关键源代码如下：