今天上午学习了表格的应用以及如何用表格进行页面布局。以下面代码为例：

<!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=utf-8" />
　　　　<title>无标题文档</title>
　　</head>
　　<body>
　　　　<table width="100%" border="0" cellspacing="1" cellpadding="1">
  　　　　　　<tr height="60">
    　　　　　　　　<td colspan="3" bgcolor="#CCFFCC">
    	　　　　　　　　　　<span>首页&nbsp;&nbsp;</span>
        　　　　　　　　　　<span>产品中心&nbsp;&nbsp;</span>
        　　　　　　　　　　<span>关于我们&nbsp;&nbsp;</span>
        　　　　　　　　　　<span>联系我们&nbsp;&nbsp;</span>
    　　　　　　　　</td>
  　　　　　　</tr>
  　　　　　　<tr height="550">
    　　　　　　　　<td colspan="3" align="center">
    	　　　　　　　　　　<img src="../../动态壁纸/壁纸1/最终幻想13雷霆归来 隐藏CG/preview.jpg" height="550" width="1000"/>
    　　　　　　　　</td>
  　　　　　　</tr>
  　　　　　　<tr >
    　　　　　　　　<td align="center" width="32%">
    	　　　　　　　　　　这是一条新闻<br />
        　　　　　　　　　　这是一条新闻<br />
        　　　　　　　　　　这是一条新闻<br />
    　　　　　　　　</td>
    　　　　　　　　<td align="center" width="35%">
    	　　　　　　　　　　这是一件产品<br>
        　　　　　　　　　　这是一件产品<br>
        　　　　　　　　　　这是一件产品<br>
    　　　　　　　　</td>
    　　　　　　　　<td align="center" width="33%">
    	　　　　　　　　　　这是一个名字<br>
        　　　　　　　　　　这是一个名字<br>
        　　　　　　　　　　这是一个名字<br>
    　　　　　　　　</td>
  　　　　　　</tr>
  　　　　　　<tr>
    　　　　　　　　<td colspan="3" bgcolor="#999999" align="center">
    　　　　　　　　　　copyright　(c)　我的网　2014-2012，All 　RightsReserved　|　京CIP证04118号音像制品经营许可证　京音网８号
    　　　　　　　　</td>
  　　　　　　</tr>
　　　　</table>
　　</body>
</html>

在Dreamweaver中可以直接通过设计页面—插入来直接添加一个表格，还可以直接调整相应的行数、列数、宽高、颜色、边距、合并等各种属性。

<table>

<table>代表表格开始

</table>代表表格结束

表格里可以嵌套表格。

<table>相关属性

　　width:表格宽度，表示方法有像素和百分比

　　border:边框粗细，默认不写为0

　　cellspacing：单元格的边距，单元格之间的距离

　　cellpadding：单元格的间距，单元格和内容之间的距离

　　bordercolor:边框颜色

　　bgcolor:背景色

　　align：表格在页面中的位置 <tr>代表行

　　相关属性：

　　height:行高　　bgcolor：行的背景色

　　<tr>没有宽度，表格一行的宽度在<table>里设置

<td>代表单元格

　　相关属性：

　　width:单元格的宽度

　　height:单元格的高度

　　align:水平对齐方式 left左 right右 center中

　　valign：（vertial-align）垂直对齐方式 top上 middle中 bottom下

　　bgcolor:背景色

　　colspan：在行里面合并列（合并几个单元格）

　　rowspan:在列里面合并行（合并几个单元格） <th>

通常是在第一行里面代替<td> 用来做表头单元格的，相当于<td>中的<h1>标题，自动加粗自动居中。

<tbody>

所有数据的行写在<tbody>里面，正常用不到。特殊情况会用到。

拓展：

表格的标题

<caption align=# valign=#> ... </caption>

内容会显示在表格上方

表格可以添加背景图片，background属性，可以用在<table>和<td>中给整个表格和单个单元格添加背景图片，不能够给<tr>一行添加背景图。

表格及布局——0606上午

<table>

表格的标题

<caption align=# valign=#> ... </caption>

表格中边框的显示

显示所有 4 个边框 <table frame=box>

只显示上边框 <table frame=above>

只显示下边框 <table frame=below>

只显示上、下边框 <table frame=hsides>

只显示左、右边框 <table frame=vsides>

只显示左边框 <table frame=lhs>

只显示右边框 <table frame=rhs>

不显示任何边框 <table frame=void>

表格中分隔线(Rules)的显示

显示所有分隔线 <table rules=all>

只显示组(Groups)与组之间的分隔线 <table rules=groups>

只显示行与行之间的分隔线 <table rules=rows>

只显示列与列之间的分隔线 <table rules=cols>

不显示任何分隔线 <table rules=none>

<thead> ... </thead> - 表的题头(Header) <tbody> ... </tbody> - 表的正文(Body) <tfoot> ... </tfoot> - 表的脚注(Footer)