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

news2024/11/15 15:32:44

应用场景

有时候我们的表格比较复杂，表头可能到处割裂，我们还需要写代码去完成这个样式，所以学会在原生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>