本节我们来学习表格标签。
表格标签<table>
HTML 表格由行与列组成，下面这个课程表就是一种常见的表格，就可以使用表格标签来写。
HTML 表格使用<table></table> 标签定义，表格中的行用<tr></tr> 标签定义，表格中的列由<td></td> 标签表示。需要注意的是<table> 标签中一般只存放<tr> 标签，<tr> 标签中一般只放<td> 标签，而<td> 标签中可以放其它的盒子。语法格式如下：
<table>
<!-- 这是第一行 -->
<tr>
<td>这是第一行的第一列</td>
<td>这是第一行的第二列</td>
...
</tr>
<!-- 这是第二行-->
<tr>
<td>这是第二行的第一列</td>
<td>这是第二行的第二列</td>
</tr>
...
</table>表格标签<table> 常用属性
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<h3>下面是一个3 行3 列的表格</h3>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<tr>
<td>第1行第1列</td>
<td>第1行第2列</td>
<td>第1行第3列</td>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</table>
</body>
</html>用浏览器打开后，如下所示：
表头标签<th>
表头一般位于表格的第一行或第一列，其文本会自动加粗且居中，如下图所示：
设置表头，只需用表头标签<th></th>替代相应的单元格标签<td></td>即可。
我们将刚才的例子中的第一行设置为表头，代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<h3>下面是一个3 行3 列的表格</h3>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<tr>
<!-- 第一行为表头，td 标签换成 th 标签 -->
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</table>
</body>
</html>效果如下，第一行的文字自动加粗且居中了：
表格的结构
表格的结构可以分为头部<thead>、主体<tbody>和页脚<tfoot>。
需要注意的是页脚有兼容性问题，不同的浏览器支持不太一样，所以我们不多介绍页脚，这里只介绍头部和主题。
表格的结构划分如下所示：
我们将上边的例子，加上头部和主题，这样代码结构也更加清晰：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<h3>下面是一个3 行3 列的表格</h3>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<!-- 表格头部-->
<thead>
<tr>
<!-- 第一行为表头，td 标签换成 th 标签 -->
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</tbody>
</table>
</body>
</html>用浏览器打开如下所示：
表格标题标签<caption>
表格的标题用于描述一个表格，它属于表格的一部分，其居于表格正上方。如下所示：
标题标签用<caption></caption> 表示，它写在<table></table> 标签内部.
例如我们将上例中的<h3></h3> 标签改为标题标签，如下所示：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<!-- 标题标签 -->
<caption>下面是一个3 行3 列的表格</caption>
<!-- 表格头部-->
<thead>
<tr>
<!-- 第一行为表头，td 标签换成 th 标签 -->
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td>第2行第1列</td>
<td>第2行第2列</td>
<td>第2行第3列</td>
</tr>
<tr>
<td>第3行第1列</td>
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</tbody>
</table>
</body>
</html>效果如下所示：
合并单元格
合并单元格分为跨行合并和跨列合并。
合并单元格需要用到<td> 标签中的属性，跨行合并使用rowspan 属性，跨列合并使用colspan属性，合并单元格的时候需要删除其它多余的<td> 标签。
跨行合并时，保留上边的单元格，删除下边的单元格。
跨列合并时，保留左边的单元格，删除右边的单元格。
比如我们想将我们的表格的第2行第1列与第3行第1列合并，然后将第2行第2列与第2行第3列合并。如下所示：
代码如下：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>表格演示</title>
</head>
<body>
<table border="5" width="500" height="300" cellspacing="10" cellpadding="20" align="lift">
<!-- 标题标签 -->
<caption>单元格合并练习</caption>
<!-- 表格头部-->
<thead>
<tr>
<!-- 第一行为表头，td 标签换成 th 标签 -->
<th>第1行第1列</th>
<th>第1行第2列</th>
<th>第1行第3列</th>
</tr>
</thead>
<!-- 表格主体 -->
<tbody>
<tr>
<td rowspan="2">第2行第1列</td> <!-- rowspan=2 表示当前单元格独自占了2个 -->
<td colspan="2">第2行第2列</td> <!-- colspan=2 表示当前单元格独自占了2个 -->
<!-- <td>第2行第3列</td> --> <!-- 删除 -->
</tr>
<tr>
<!-- <td>第3行第1列</td> --> <!-- 删除 -->
<td>第3行第2列</td>
<td>第3行第3列</td>
</tr>
</tbody>
</table>
</body>
</html>效果如下：
(本节完。)
