表格除了显示数据外，还常常被用来排版。虽然如今比较流行用DIV布局页面，但是由于表格在网页设计时容易上手、快捷、兼容性好，所以表格布局仍然受到不少网页设计者的青睐。
【操作步骤】
第1步，新建文档，保存为index.html。构建网页结构。本例中在网站建设中应用了表格嵌套，设置了外层表格outer和内层表格inner进行布局，从图中可以看到，外层表格是一个3行1列的表格，在外层表格的第2行中，又嵌套了一个1行2列的表格。
<table class="outer">
<tr>
<td>
<img src="images/bg.jpg"></td>
</tr>
<tr>
<td><table class="inner">
<tr>
<td class="left"><ul>
<li><a href="#">
首页</a></li>
<li><a href="#">古典音乐</a></li>
<li><a href="#">现代流行</a></li>
<li><a href="#">爵士音乐</a></li>
<li><a href="#">70后音乐</a></li>
<li><a href="#">80后音乐</a></li>
<li><a href="#">90后音乐</a></li>
</ul></td>
<td class="right"><img src="images/1.jpg" /></td>
</tr>
</table></td>
</tr>
<tr>
<td class="footer">
<p>|联系我们 |关于我们 |</p>
<p>感谢您的支持，希望明天会更好！！</p></td>
</tr>
</table>
以上代码定义了表格的结构，外层表格的3行分别是：
第1行设置了banner图片，第2行是网页正文部分，嵌套了另一个表格，第3行定义了网页的footer部分；内层表格是一个1行2列的表格，左侧单元格设置了<ul>列表，定义网页的导航栏，右侧单元格是网页的内容部分。
第2步，定义网页基本属性和外层表格样式。在<head>标签内添加<style type="text/css">标签，定义一个内部样式表，然后输入下面样式：
body { /*网页基本属性*/ background: #e9e8dd; /*网页背景颜色*/
text-align: center;
}.outer {/*外层表格样式*/
width: 800px; /*表格宽度*/
border: 1px #999999 solid; /*表格边框*/
margin: 0 auto;/*与父标签中的text-align:center配合实现水平居中*/}
.footer {/*外层表格第3行单元格样式*/
background-color: #BEC4D0; /*单元格背景颜色*/
text-align: center; /*水平居中*/
font-size: 12px; /*字体大小*/
color: #0033FF; /*字体颜色*/}
在以上代码中，首先定义了网页基本属性；在outer中首先定义了表格宽度，并定义了表格的外边框，margin:0 auto与body中的text-align:cen-ter两条语句可实现IE与FF浏览器中的水平居中。在footer中，定义了外层表格中第3行单元格的样式。此时，外层表格的所有样式设置完毕。
第3步，设置内层表格inner样式。
.left { /*内层表格左侧单元格样式*/
width: 150px; /*左侧单元格宽度*/
background-color: #FF3300; /*背景颜色*/
border: 1px red solid; /*单元格边框*/
text-align: center; /*水平居中*/}
.right {/*内层表格右侧单元格样式*/
width: 650px; /*右侧单元格宽度*/
background-color: #BEC4D0; /*背景颜色*/
border: 1px red solid; /*单元格边框*/
text-align: center; /*水平居中*/}
以上代码完成了内层表格中两个单元格样式的设置。
第4步，设置内层表格中的左侧导航条样式。
ul {/*列表样式*/
list-style-type: none; /*不显示列表项目符号*/
font-weight: bold; /*字体加粗*/
font-size: 16px; /*字体大小*/}
li { height: 40px; /*列表项的高宽*/ }
上面代码实现了导航栏的样式。