表格
展示数据
<table>
<tr>
<td>
</td>
</tr>
</table>
<table></table>
是用于定义表格的标签
<tr></tr>
用于定义表格中的行,要在<table></table>
里面
<td></td>
用于定义表格中的单元格,要在<tr></tr>
里面
<th></th>
表头(加粗)
<table>
<tr>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td>刘德华</td>
<td>男</td>
<td>19</td>
</tr>
</table>
table属性
align left、center、right 规定表格相对周围元素的对齐方式
border 1 或者 “” 规定表格单元是否拥有边框,默认为”“,表示无边框
cellpadding 像素值 规定单元边沿与其内容之间的空白,默认1像素
cellspacing 像素值 规定单元格之间的空白,默认2像素
width 像素值或百分比 规定表格的宽度
<thead></thead>
包含第一个tr
<tbody></tbody>
包含剩下的tr
合并单元格
- 跨行合并:rowspan=”合并单元格的个数”
- 跨列合并:colsoan=”合并单元格的个数”
从左上方向开始合并
删除多余单元格
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<table border="1" cellspacing="0" align="center" cellpadding="10">
<thead>
<tr>
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
</thead>
<tbody>
<tr>
<td>1</td>
<td>鬼吹风</td>
<td rowspan="4"><svg t="1695818601108" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="945" width="20" height="20">
<path d="M0 0h1024v1024H0V0z" fill="#202425" p-id="946"></path>
<path
d="M560.264533 901.597867a68.266667 68.266667 0 0 1-96.529066 0l-307.2-307.2a68.266667 68.266667 0 1 1 96.529066-96.529067L443.733333 688.5376V170.666667a68.266667 68.266667 0 1 1 136.533334 0v517.870933l190.6688-190.6688a68.266667 68.266667 0 1 1 96.529066 96.529067l-307.2 307.2z"
fill="#11AA66" p-id="947"></path>
</svg></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><svg t="1695818601108" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="945" width="20" height="20">
<path d="M0 0h1024v1024H0V0z" fill="#202425" p-id="946"></path>
<path
d="M560.264533 901.597867a68.266667 68.266667 0 0 1-96.529066 0l-307.2-307.2a68.266667 68.266667 0 1 1 96.529066-96.529067L443.733333 688.5376V170.666667a68.266667 68.266667 0 1 1 136.533334 0v517.870933l190.6688-190.6688a68.266667 68.266667 0 1 1 96.529066 96.529067l-307.2 307.2z"
fill="#11AA66" p-id="947"></path>
</svg></td> -->
<td>19</td>
<td>19</td>
<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
</tr>
<tr>
<td>3</td>
<td>Vue前端</td>
<!-- <td><svg t="1695818601108" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="945" width="20" height="20">
<path d="M0 0h1024v1024H0V0z" fill="#202425" p-id="946"></path>
<path
d="M560.264533 901.597867a68.266667 68.266667 0 0 1-96.529066 0l-307.2-307.2a68.266667 68.266667 0 1 1 96.529066-96.529067L443.733333 688.5376V170.666667a68.266667 68.266667 0 1 1 136.533334 0v517.870933l190.6688-190.6688a68.266667 68.266667 0 1 1 96.529066 96.529067l-307.2 307.2z"
fill="#11AA66" p-id="947"></path>
</svg></td> -->
<td>19</td>
<td>19</td>
<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
</tr>
<tr>
<td>4</td>
<td>企业练习</td>
<!-- <td><svg t="1695818601108" class="icon" viewBox="0 0 1024 1024" version="1.1"
xmlns="http://www.w3.org/2000/svg" p-id="945" width="20" height="20">
<path d="M0 0h1024v1024H0V0z" fill="#202425" p-id="946"></path>
<path
d="M560.264533 901.597867a68.266667 68.266667 0 0 1-96.529066 0l-307.2-307.2a68.266667 68.266667 0 1 1 96.529066-96.529067L443.733333 688.5376V170.666667a68.266667 68.266667 0 1 1 136.533334 0v517.870933l190.6688-190.6688a68.266667 68.266667 0 1 1 96.529066 96.529067l-307.2 307.2z"
fill="#11AA66" p-id="947"></path>
</svg></td> -->
<td>19</td>
<td>19</td>
<td><a href="">贴吧</a> <a href="">图片</a> <a href="">百科</a></td>
</tr>
</tbody>
</table>
</body>
</html>