前端技巧——复杂表格在html当中的实现
JSU_曾是此间年少 2024-10-19 16:33:01 阅读 78
应用场景
有时候我们的表格比较复杂，表头可能到处割裂，我们还需要写代码去完成这个样式，所以学会在原生html处理复杂的表格还是比较重要的。
下面我们来看这一张图：
我们可以看到有些表头项的规格不太一样，有1*1 2*1 1*2等多种规模，我们的任务就是用html搭建好这个样式即可
语法介绍
我们使用html5的table标签，我们的一个表设计两个部分：表头，表内容，分别对应thead和tbody标签
我们使用tr标识一行数据，th表示表头的一格，td表示表内容的一格，
其中表标题包含在表头中，使用caption标签即可声明，其和tr标签同级
我们设计这样一个表，首先数有多少行，
然后将最顶上的第一行，写在第一个tr当中
然后将最顶上的第二行，写在第二个tr当中
碰到占两行的设置rowspan="2"，
碰到占两列的设置colspan="2"，
按照如上方法，我们就可以在html画出任何方格样式的图表了，下面是代码（注意样式哦）：
<code><!DOCTYPE html>
<html lang="en">code>
<head>
<meta charset="UTF-8">code>
<meta name="viewport" content="width=device-width, initial-scale=1.0">code>
<title>Document</title>
<style>
table {
border-collapse: collapse;
width: 100%;
}
th,
td {
border: 1px solid #000000;
padding: 8px;
text-align: center;
}
</style>
</head>
<body>
<div id="root" style="width: 100vw;height: 100vh">code>
<table>
<thead>
<caption style="color: red;">我是表的标题</caption>code>
<tr class="oneRow">code>
<th rowspan="2">项目1</th>code>
<th rowspan="2">项目2</th>code>
<th colspan="2">项目3</th>code>
<th colspan="2">项目4</th>code>
</tr>
<tr class="oneRow">code>
<th>项目3-1</th>
<th>项目3-2</th>
<th>项目4-1</th>
<th>项目4-2</th>
</tr>
</thead>
<tbody>
<tr>
<td> 内容1 </td>
<td> 内容2 </td>
<td> 内容3 </td>
<td> 内容4 </td>
<td> 内容5 </td>
<td> 内容6 </td>
</tr>
<tr>
<td> 内容1 </td>
<td> 内容2 </td>
<td> 内容3 </td>
<td> 内容4 </td>
<td> 内容5 </td>
<td> 内容6 </td>
</tr>
<tr>
<td> 内容1 </td>
<td> 内容2 </td>
<td> 内容3 </td>
<td> 内容4 </td>
<td> 内容5 </td>
<td> 内容6 </td>
</tr>
<tr>
<td> 内容1 </td>
<td> 内容2 </td>
<td> 内容3 </td>
<td> 内容4 </td>
<td> 内容5 </td>
<td> 内容6 </td>
</tr>
<tr>
<td> 内容1 </td>
<td> 内容2 </td>
<td> 内容3 </td>
<td> 内容4 </td>
<td> 内容5 </td>
<td> 内容6 </td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
使用插件
声明
本文内容仅代表作者观点，或转载于其他网站，本站不以此文作为商业用途
如有涉及侵权，请联系本站进行删除
转载本站原创文章，请注明来源及作者。