学习目标：
（1）使用表格的基本结构实现简单表格
（2）使用表格相关标签实现跨行、跨列的复杂表格
HTML表格概述
1.1 表格的作用
（1）用来布局内容比较整齐的页面
（2）作为信息管理页面的控件使用
1.2 表格标签
1.2.1 < table >< table />
<table><table/>：表示一个表格，它的常用属性有以下几种：
| 属性 | 含义 |
|---|---|
| border | 边框线的宽度 |
| align | 表格在页面中的对齐方式 |
| bgcolor | 表格背景色 |
| background | 设置背景图片 |
| cellpadding | 单元格内容和边框之间的距离 |
| cellspacing | 单元格之间的距离 |
格式：
<table border="边框线的宽度" align="表格在页面中的对齐方式" bgcolor="表格的背景色" background="背景图片"></table>
1.2.2 < thead >< /thead >
<thead></thead>：语义标签，表示表格的头部
1.2.3 < tr >< tr/ >
<tr><tr/>：表示表格的行，一个tr代表一行
| 属性 | 含义 |
|---|---|
| align | 行的对齐方式 |
| bgcolor | 行的背景色 |
| background | 设置背景图片 |
格式：
<tr align="行的对齐方式" bgcolor="行的背景色" background="背景图片"></tr>
1.2.4 < th >< th/ >
<th><th/>：表示列头，文字会自动加粗、自动居中，是特殊的单元格
| 属性 | 含义 |
|---|---|
| width | 列宽 |
格式：
<th width="列宽"></th>
1.2.5 < tbody >< /tbody >
<tbody></tbody>：语义标签，表示表格的主体部分
1.2.6 < td >< /td >
<td></td>：表示表格中的单元格
| 属性 | 含义 |
|---|---|
| align | 单元格的对齐方式left/center/right |
| valign | 单元格的对齐方式top/bottom |
格式：
<td align="left/center/right" valign="top/bottom"></td>
1.2.7 < caption >< /caption >
<caption></caption>：表示表格的标题
1.3 表格的格式
<!--表格边框1像素，位置在页面居中，背景颜色为橙色，内容到单元格距离为5像素，单元格之间距离为6像素-->
<table border="1" align="center" bgcolor="orange" cellpadding="5" cellspacing="6">
<caption>表格的标题</caption>
<thead><!--表格的头部-->
<tr align="right" bgcolor="pink"><!--这一行中内容靠右对齐，背景颜色为粉色-->
<th width="100">表</th><!--第一个单元格宽为100像素-->
<th>格</th>
<th>列</th>
<th>头</th>
</tr>
</thead>
<tbody><!--表格的主体-->
<tr>
<!--文字靠底部对齐，单元格高度为100像素-->
<td valign="bottom" height="100">表格</td>
<!--单元格宽为100像素，文字靠右对齐，且文字靠顶部对齐-->
<td align="right" width="100" valign="top">中的</td>
<td>单元</td>
<td>格 </td>
</tr>
</tbody>
</table>
1.4 单元格的合并
1.4.1 跨多列（合并列）
一个单元格占据多列，在<td>中添加属性colspan,该属性的值为占据的列数。
<table border="1"><!--表格边框宽度1像素-->
<tr><!--第一行-->
<!--两列单元格合并，且其中文字居中-->
<td colspan="2" align="center">信息</td>
</tr>
<tr>
<td>姓名</td>
<td>年龄</td>
</tr>
</table>
1.4.2 跨多行(合并行)
一个单元格占据多行,在<td>中添加属性rowspan，该属性的值为占据的行数。
<table border="1"><!--表格边框宽度1像素-->
<tr>
<!--两行单元格居中-->
<td rowspan="2">信息</td>
<td>姓名</td>
</tr>
<tr>
<td>年龄</td>
</tr>
</table>
1.5 实例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>手机</title>
</head>
<body>
<!--整个表格框架，单元格之间距离为5-->
<table cellspacing="5">
<!--第一行：左边的手机模型和第一行字-->
<tr>
<!--第一行第一个单元格 手机模型 合并了9行-->
<td rowspan="9">
<!--手机模型表格-->
<table>
<!--第一行手机最大的图片 内容居中-->
<tr align="center">
<!--单元格合并三列，且高度为300像素-->
<td colspan="3" height="300">
<!-- 我的图片存储的路径，根据自己的情况设置 -->
<img src="./imges/dashouji.png">
</td>
</tr>
<!--第二行三个手机小图 内容居中-->
<tr align="center">
<!--第一个单元格放第一个手机图片-->
<td width="150">
<img src="./imges/shouji1.png">
</td>
<!--第二个单元格放第二个手机图片-->
<td width="150">
<img src="./imges/shouji2.png">
</td>
<!--第三个单元格放第三个手机图片-->
<td width="150">
<img src="./imges/shouji3.png">
</td>
</tr>
</table>
</td>
<!--第一行第二个单元格 第一行字 宋体5号 合并5列-->
<th colspan="5" align="left" height="50">
<font face="宋体" size="5">现货送钢化膜Huawei/华为G9青春版plus移动联通全网4G手机</font>
</th>
</tr>
<tr>
<!--第二行 正品裸价 表格中字体左对齐 合并5列-->
<th align="left" colspan="5" height="20">
<!-- 宋体2号粉色字 -->
<font face="宋体" size="2" color="#FF1493">正品裸价 购机送钢化膜 保护壳</font>
</th>
</tr>
<!--第三行 价格 设置粉色背景-->
<tr bgcolor="#FFE1FF">
<!-- 单元格放整个粉色部分 合并5列 -->
<td colspan="5" height="50">
<!-- 拆分成两行三列的表格 -->
<table>
<!--第一行 专柜价 高度20像素 文字靠底部和左部对齐-->
<tr>
<th height="20" valign="bottom" align="left">
<!--宋体灰色2号字-->
<font face="宋体" size="2" color="#B5B5B5">专柜价</font>
</th>
<td width="35">
<!--空单元格，对齐后面的元素-->
</td>
<!--原价1399.00 高度30像素 文字靠底部和左部对齐-->
<th height="20" valign="bottom" align="left">
<!--s标签为删除线标签-->
<font face="宋体" size="2" color="#B5B5B5"><s>￥1399.00</s></font>
</th>
</tr>
<!--第二行 新年价 高度20像素 文字靠顶部和左部对齐-->
<tr>
<th height="20" valign="top" align="left">
<!--宋体灰色2号字-->
<font face="宋体" size="2" color="#FF1493">新年价</font>
</th>
<td width="35">
</td>
<!--现价1199.00 高度20像素 文字靠顶部和左部对齐-->
<th height="20" valign="top" align="left">
<font face="宋体" size="4" color="#FF1493">￥1199.00</font>
</th>
</tr>
</table>
</td>
</tr>
<tr>
<!--第四行 运费 行高30 合并5列-->
<th height="30" align="left" colspan="5">
<font face="宋体" size="2" color="#B5B5B5">运费 </font>
<font face="宋体" size="3">北京至长春 快递：0.00</font>
</th>
</tr>
<tr>
<!--第五行 月销量 合并5列 文字居左对齐-->
<th height="30" align="left" colspan="5">
<font face="宋体" size="2" color="#B5B5B5">月销量 </font>
<font face="宋体" size="2" color="#FF1493">172 | </font>
<font face="宋体" size="2" color="#B5B5B5">累计评价 </font>
<font face="宋体" size="2" color="#FF1493">91 | </font>
<font face="宋体" size="2" color="#B5B5B5">送51购积分 </font>
<font face="宋体" size="2" color="#32CD32">119</font>
</th>
</tr>
<tr>
<!--第六行 网络类型-->
<td height="40" width="100">
<font face="宋体" color="#B5B5B5" size="3">网络类型</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">移动联通双4G</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">移动4G</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">4G全网通</font>
</td>
<td height="40" width="100"></td>
</tr>
<tr>
<!--第七行 机身颜色-->
<td height="40" width="100">
<font face="宋体" color="#B5B5B5" size="3">机身颜色</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">金色</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">黑色</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">白色</font>
</td>
<td height="40" width="100"></td>
</tr>
<tr>
<!--第八行 套餐类型-->
<td height="40" width="100">
<font face="宋体" color="#B5B5B5" size="3">套餐类型</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">官方标配</font>
</td>
<td height="40" width="100"></td>
<td height="40" width="100"></td>
<td height="40" width="100"></td>
</tr>
<tr>
<!--第九行储存容量-->
<td height="40" width="100">
<font face="宋体" color="#B5B5B5" size="3">存储容量</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">16G</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">32G</font>
</td>
<td height="40" width="100" align="center">
<font face="宋体" size="3">64G</font>
</td>
<td height="40" width="100"></td>
</tr>
</table>
</body>
</html>