前面的课程中，我们学习了表格元素，上节课中，我们通过一本表格来对表单内的组件进行位置的控制，这其实就是一种简单的表格布局。这节课，我们详细来讨论一下使用表格的布局方法。
看如下代码：
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
</head>
<body>
<table border="0" height="100%" width="100%" align="center">
<tr>
<td colspan="3" align="center" height="100" bgcolor="green">表格顶端元素</td>
</tr>
<tr>
<td align="center" height="480" bgcolor="blue" width="15%">表格左边栏元素</td>
<td align="center" height="480" bgcolor="red">表格主题内容元素</td>
<td align="center" height="480" bgcolor="yellow" width="20%">表格右边栏元素</td>
</tr>
<tr>
<td colspan="3" align="center" height="100" bgcolor="purple">表格底部元素</td>
</tr>
</table>
</body>
</html>
运行结果如下：
我们可以看到，通过表格，整个页面被分割成了5各部分，上下左右中。这是最常见的表格布局方法。一般最上方放置一个logo或功能条（工具栏，菜单，导航等）、底部放置一些诸如版权信息，企业声明等、左边放置页面子栏目导航树、右边放置广告或展示性信息，中间是当前页面的主题信息。当然，根据页面不同，这5各部分也可以做削减，只需要操作表格即可。现在我们增加一些内容进去：
index.html
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="content-type" content="text/html; charset=gb2312" />
</head>
<body>
<table border="0" height="100%" width="100%" align="center" cellpadding="3">
<tr> <!-- 顶部元素 -->
<td colspan="3" align
