目录
表格的主要作用：
表格的基本语法：
表格相关的标签
合并单元格：
实战：
-
表格的主要作用：
表格主要是用来展示数据的，使用表格来展示数据，数据可读性更好，更加规范
-
表格的基本语法：
<table>
<tr>
<td>单元格内的文字</td>
...
</tr>
...
</table>
1. <table> </table> 是用于定义表格的标签。
2. <tr> </tr> 标签用于定义表格中的行，必须嵌套在 <table> </table>标签中。
3. <td> </td> 用于定义表格中的单元格，必须嵌套在<tr></tr>标签中。
4. 字母 td 指表格数据（table data），即数据单元格的内容。
-
表格相关的标签
| table | 表示这是一个表格 |
| th | 表示表头，里面的文字会剧中加粗 |
| tr | 表示表格中的一行 |
| td | 表示表格中的一个单元格（类似于数据库中的一个数据），这是一个容器，里面可以填入任意标签（a标签，p标签） |
- 表格相关的属性
表格标签这部分属性我们实际开发我们不常用，后面通过 CSS 来设置.
目的有2个:
1. 记住这些英语单词,后面 CSS 会使用.
2. 直观感受表格的外观形态
-
合并单元格：
合并单元格三步曲：
1. 先确定是跨行还是跨列合并。
2. 找到目标单元格. 写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>。
3. 删除多余的单元格。
-
实战：
案例1：
<!DOCTYPE html>
<html lang="zh_cn">
<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 border="1" align="center" whith="800px" height="250px" cellpadding="20px" cellspacing="0px">
<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>354</td>
<td>124</td>
<td><span><a href="#">贴吧</a></span>
<span><a href="#">贴吧</a></span>
<span><a href="#">贴吧</a></span>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="./down.jpg"></td>
<td>354</td>
<td>124</td>
<td><span><a href="#">贴吧</a></span>
<span><a href="#">贴吧</a></span>
<span><a href="#">贴吧</a></span>
</td>
</tr>
<tr>
<td>1</td>
<td>鬼吹灯</td>
<td><img src="./down.jpg"></td>
<td>354</td>
<td>124</td>
<td><span><a href="#">贴吧</a></span>
<span><a href="#">贴吧</a></span>
<span><a href="#">贴吧</a></span>
</td>
</tr>
</tbody>
</table>
</body>
</html>案例2：
<!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> <div align="center"> <h3 >课程表</h3> <table border="1" cellpadding="10px"> <tr> <th>项目</th> <th colspan="5">上课</th> <th colspan="2">休息</th> </tr> <tr> <td>星期</td> <td>星期一</td> <td>星期二</td> <td>星期三</td> <td>星期四</td> <td>星期五</td> <td>星期六</td> <td>星期日</td> </tr> <tr> <td rowspan="4">上午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="4">休息</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> </tr> <tr> <td rowspan="2">下午</td> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> <td rowspan="2">休息</td> </tr> <tr> <td>语文</td> <td>数学</td> <td>英语</td> <td>英语</td> <td>物理</td> <td>计算机</td> </tr> </table> </div> </body> </html>
