表格布局方式主要是利用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>
这段代码在浏览器中的效果如图所示，这是一个很简单的文字定位效果。
226
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
