当前位置：首页 > news >正文

前端技巧——复杂表格在html当中的实现

news 2025/11/30 0:25:39

应用场景

有时候我们的表格比较复杂，表头可能到处割裂，我们还需要写代码去完成这个样式，所以学会在原生html处理复杂的表格还是比较重要的。

下面我们来看这一张图：

我们可以看到有些表头项的规格不太一样，有1*1 2*1 1*2等多种规模，我们的任务就是用html搭建好这个样式即可

语法介绍

我们使用html5的table标签，我们的一个表设计两个部分：表头，表内容，分别对应thead和tbody标签

我们使用tr标识一行数据，th表示表头的一格，td表示表内容的一格，

其中表标题包含在表头中，使用caption标签即可声明，其和tr标签同级

我们设计这样一个表，首先数有多少行，

然后将最顶上的第一行，写在第一个tr当中

然后将最顶上的第二行，写在第二个tr当中

碰到占两行的设置rowspan="2"，

碰到占两列的设置colspan="2"，

按照如上方法，我们就可以在html画出任何方格样式的图表了，下面是代码（注意样式哦）：

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><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"><table><thead><caption style="color: red;">我是表的标题</caption><tr class="oneRow"><th rowspan="2">项目1</th><th rowspan="2">项目2</th><th colspan="2">项目3</th><th colspan="2">项目4</th></tr><tr class="oneRow"><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>