表格布局方式主要是利用HTML语言中table元素所具有的零边框特性。由于table元素在显示的时候,使得单元格的边框和间距被设置为0,既不显示边框,所以可以将网页中的各个元素按照版式划分后,分别放入表格的单元格中,从而实现了复杂的排版组合效果。
下面是一段典型的表格布局的HTML源代码:
<table width="741" height="136" border="0" cellpadding="0" cellspacing="0">
<tr>
<td><img src="images/banner_01.jpg" width="257" height="136"></td>
<td><img src="images/banner_02.jpg" width="250" height="136"></td>
<td><img src="images/banner_03.jpg" width="234" height="136"></td>
</tr>
</table>
利用这段代码在网页中插入了一个1行3列的表格,并定义了表格的宽度为741像素、高度为136像素、表格的边框为0像素、单元格填充(单元格与其内填充的元素(如文字,图片)之间的距离)为0像素、单元格间距为0像素,然后分别在3个单元格中插入图片,这样在浏览器中浏览网页时,会发现3张图片显示为一整张图片,从而达到页面布局的目的,如图所示。
但是,由于布局的需要,会在一个页面中插入多个嵌套表格,这样就使得大量样式设计代码混杂在表格单元格之中,可读性降低,很难进行修改,另外,加上大量的图片以及其他元素会导致网页文件变得十分庞大,最终导致浏览器下载及解析速度很慢。
利用CSS进行页面布局,可以有效避免表格布局所带来的种种问题。
下面是一段典型的CSS布局的HTML源代码:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<style type="text/css">
.example{
float:left; /*表示div在页面中浮动在当前位置的左侧*/
margin-top:10px;; /*表示div距上方有10像素的外边距*/
margin-right:10px; /*表示div距右侧有10像素的外边距*/
margin-bottom:10px; /*表示div距下侧有10像素的外边距*/
margin-left:10px; /*表示div距左侧有10像素的外边距*/
background-color: #CCCCCC; /*表示div背景为浅灰色*/
text-align:center; /*表示div里的文字居中显示*/
}
</style>
<title>CSS布局示例</title></head>
<body>
<div class="example">网站首页|产品介绍|组织结构|招聘信息|地理位置|联系我们 </div>
</body>
</html>
这段代码在浏览器中的效果如图所示,这是一个很简单的文字定位效果。