表格结构标签
- <thead>标签 表格的头部区域，<tbody>标签 表格的主体区域
<!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>
<table align="center" 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>降</td>
<td>345</td>
<td>123</td>
<td>
<a href="https://www.baidu.com" target="_blank">百度</a>
<a href="https://www.sougou.com" target="_blank">搜狗</a>
</td>
</tr>
</tbody>
</table>
</body>
</html>
结果演示
合并单元格
- 跨行合并：rowspan=”合并单元格的个数”，最上侧单元格为目标单元格。写合并代码。
- 跨列合并：colspan=”合并单元格的个数”，最左侧单元格为目标单元格。写合并代码。
合并单元格分三步
- 先确定是跨行还是跨列。
- 找到目标单元格，写上合并方式=合并的单元格数量，比如：<td colspan=”2″></td>
- 删除多余的单元格代码。
<!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>
<table align="center" border="2" cellspacing="0">
<tr>
<td></td>
<td colspan="2"></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td></td>
<td></td>
<td></td>
</tr>
</table>
</body>
</html>
结果演示
