目录
一、表格的作用
表格的作用是为了展示数据，如下图所示（摘选自东方财富网股票频道）：
二、表格的基本语法
表格由 <table> 标签来定义。每个表格均有若干行（由 <tr> 标签定义），每行被分割为若干单元格（由 <td> 标签定义）。字母 td 指表格数据（table data），即数据单元格的内容。数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>代码演示：
<!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>Document</title>
</head>
<body>
<table>
<tr> <td>姓名</td> <td>性别</td> <td>年龄</td> <td>名次</td> </tr>
<tr> <td>小明</td> <td>男</td> <td>18</td> <td>第二名</td> </tr>
<tr> <td>小红</td> <td>女</td> <td>17</td> <td>第五名</td> </tr>
<tr> <td>小朱</td> <td>男</td> <td>19</td> <td>第七名</td> </tr>
</table>
</body>
</html>三、表头单元格标签
上面的虽然有表格的意思，却不像个表格。
这小节主要是讲解表头单元标签。一般表头位于第一列或者第一行，表头内容加粗并居中显示。
【语法】： <th> 表头</th>
四、表格的相关属性
经常使用office的人对表格属性一定不陌生。
表格标签这部分，属性并不常用，实际上通过css来设置。
可以设置边框、字的大小、格式等等。
注意：这些属性要写到table标签里面去。
| 属性名 | 属性值 | 描述 |
| align | left 、 center 、 right | 规定表格相对周围元素的对齐方式 |
| border | 1 或 “” | 规定表格是否有边框，默认为“”，表示没有边框 |
| cellpadding | 像素值 | 规定单元格与内容之间的空白，默认1像素 |
| cellspacing | 像素值 | 单元格和单元格之间的距离，默认两像素，可以设置为0，看着是认识的单元格 |
| width/height | 像素值或百分比 | 规定表格的宽度/高度 |
<!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>Document</title>
</head>
<body>
<table align = "center" border="1" cellpadding="0" cellspacing="0" width="500">
<tr> <th>姓名</th> <th>性别</th> <th>年龄</th> <th>名次</th> </tr>
<tr> <td>小明</td> <td>男</td> <td>18</td> <td>第二名</td> </tr>
<tr> <td>小红</td> <td>女</td> <td>17</td> <td>第五名</td> </tr>
<tr> <td>小朱</td> <td>男</td> <td>19</td> <td>第七名</td> </tr>
</table>
</body>
</html>五、表格结构标签
使用场景：表格很大，你忍一下。
在表格标签中，用<head>标签表示表格的头部区域，<tbody>标签表示表格的主体部分。
<thead></thaed>
<tbody></tbody>
六、案例分析
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>今日小说排行榜</title>
</head>
<body>
<table align="center" width="500" height="249" border="1" cellspacing="0">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>进入搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>2</td>
<td>西游记</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>3</td>
<td>东游记</td>
<td><img src="up.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>4</td>
<td>猪八戒</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>5</td>
<td>小姐姐</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
<tr>
<td>6</td>
<td>嘻哈哈</td>
<td><img src="down.jpg"></td>
<td>456</td>
<td>123</td>
<td> <a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a> </td>
</tr>
</tbody>
</table>
</body>
</html>七、合并单元格
合并单元格的方式：
- 跨行合并：rowspan = 合并单元格的个数
- 跨列合并：colspan = 合并单元格的个数
目标单元格：合并后会形成一个新的单元格，称为目标单元格，对于跨行，最上侧的单元格为目标单元格；对于跨列单元格，最左侧单元格为目标单元格。
合并单元格三步曲：
- 先确定是跨行还是跨列
- 找到目标单元格，写上合并方式 = 合并的单元格数量，例如<td colspan = "2"></td>
- 删除多余的代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>合并单元格</title>
</head>
<body>
<table width="500" height="249" border="1" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td rowspan="2"></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>