第九章 使用HTML 5创建表格
1、目录
2、9.1 案例 1——表格的基本结构
HTML中的表格不仅可以清晰地显示数据，而且可以用于页面布局。类似于Word中的表格。
3、 HTML中的表格标记如下：
1、<table>用于表示一个表格对象的开始，</table>表示结束，只允许出现一对<table>标记。HTML5中不再支持它的任何属性。
2、<tr>表示表格的行，有多少对就有多少行。
3、<td>表示单元格数量。
!DOCTYPE html>
<html>
<head>
<title>表格基本结构</title>
</head>
<body>
<table border="1">
<tr>
<td>A1</td>
<td>B1</td>
<td>C1</td>
</tr>
<tr>
<td>A2</td>
<td>B2</td>
<td>C2</td>
</tr>
</body>
</html>
从预览图中，可以发现，表格没有边框，行高及列宽无法控制。td只提供了两个单元格合并属性。
4、9.2 创建表格
5、【例9.2】创建普通表格
<!DOCTYPE html>
<html>
<body>
<h4>一列:</h4>
<table border="1">
<tr>
<td>100</td>
</tr>
</table>
<h4>一行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
<tr>
</table>
<h4>两行三列:</h4>
<table border="1">
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</body>
</html>
6、【例9.3】创建一个带有标题的表格
<!DOCTYPE html>
<html>
<body>
<h4>带有标题的表格</h4>
<table border="3">
<caption>数据统计表</caption>
<tr>
<td>100</td>
<td>200</td>
<td>300</td>
</tr>
<tr>
<td>400</td>
<td>500</td>
<td>600</td>
</tr>
</body>
</html>
7、编辑表格
8、9.3.1 案例4——定义表格的边框类型
使用表格的border属性可以定义表格的边框类型。【例9.4】创建不同的边框类型的表格
<!DOCTYPE html>
<html>
<body>
<h4>普通边框</h4>
<table border="1">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
<h4>加粗边框</h4>
<table border="8">
<tr>
<td>First</td>
<td>Row</td>
</tr>
<tr>
<td>Second</td>
<td>Row</td>
</tr>
</table>
</body>
</html>
9、9.3.2 案例5——定义表格的表头
表格中也存在表头，常见的表头分为水平和垂直两种。
<!DOCTYPE html>
<html>
<body>
<h4>水平的表头</h4>
<table border="1">
<tr>
<th>姓名</th>
<th>性别</th>
<th>电话</th>
</tr>
<tr>
<td>张三</td>
<td>男</td>
<td>56789</td>
</tr>
</table>
<h4>垂直的表头</h4>
<table border="1">
<tr>
<th>姓名</th>
<td>小丽</td>
</tr>
<tr>
<th>性别</th>
<td>女</td>
</tr>
<tr>
<th>电话</th>
<td>56789</th>
</tr>
</table>
</body>
10、9.3.3 案例6——设置表格背景
1、定义表格背景颜色
<!DOCTYPE html>
<html>
<body>
<h4>背景颜色</h4>
<table border="1"bgcolor="green">
<tr>
<td>100</td>
<td>200</td>
</tr>
<tr>
<td>300</td>
<td>400</td>
</tr>
</table>
</body>
</html>
