前端入门：静态网页内不规则表格的编写

天郁青

于 2024-08-27 14:12:16 发布

阅读量230

点赞数 14

分类专栏：前端学习文章标签：前端

本文链接：https://blog.csdn.net/Jourkern/article/details/141600951

版权

前端学习专栏收录该内容

1 篇文章 0 订阅

订阅专栏

前端学习中，接触表格后会遇到类似下面的不规则表格的编写

对于这种表格的编写，在没有深入学习前端的基础下，想通过行内样式，内部和外部样式的编写达到这种效果是较为困难的。

但是在了解到一个关于<table>的样式之后就可以实现这种效果：

 table 
{
table-layout: fixed;
}

作为在内部样式中插入的

<table-layout : fixed>

同样适用于其他各种样式

在插入这个代码之后，就可以对<table>标签下的<th> 和 <td>进行各种宽上的分配。

<tr>
            <th colspan="5">姓名</th>
            <td colspan="4"></td>
            <th colspan="3">出生年月</th>
            <td colspan="5"></td>
            <th colspan="3" rowspan="4">照片</th>
</tr>

对照开头的表格，在第一行创建五个列

为保持表格左右的格式，我这边把一个表格的宽分成20份（重点）

对照格式后，对于每个表格内项目的分配就是对于上面宽的分配。

即在20份内每个格子占据多少

colspan与rowspan的作用

colspan本身是作为表格内合并列的标签，rowspan作为合并行的标签

在这里可以看做我对于表格做了一个无法显示的20等分，将一行分成了20列

而colspan的作用就是将无法看见的列合并为一个可以看见的大列。

当中出现的一些小注意事项

目前我没有试过用css去定义这个colspan，可以一试

源代码如下：

对于这些代码的应用应该个人学习然后编写才能做到具体掌握

这篇代码十分简单，但是初学时卡在一个死角而无法回转的时候真的是一个十分有用的提议。

下面的代码对应了开头的表格全代码，可以对照参考

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>表格5</title>
    <style type="text/css">
        table,
        th,
        td {
            border: 2px solid black;
            border-collapse: collapse;
            height: 40px;
        }

        table {
            table-layout: fixed;
            width: 900px;
        }

        .gao150 {
            height: 150px;
        }

        .gao250 {
            height: 250px;
        }

        .gao175 {
            height: 175px;
        }
    </style>
</head>

<body>
    <table align="center">
        <tr>
            <th colspan="5">姓&emsp;名</th>
            <td colspan="4"></td>
            <th colspan="3">出生年月</th>
            <td colspan="5"></td>
            <th colspan="3" rowspan="4">照片</th>
        </tr>
        <tr>
            <th colspan="5">性&emsp;别</th>
            <td colspan="4"></td>
            <th colspan="3">联系电话</th>
            <td colspan="5"></td>
        </tr>
        <tr>
            <th colspan="5">民&emsp;族</th>
            <td colspan="4"></td>
            <th colspan="3">手&emsp;机</th>
            <td colspan="5"></td>
        </tr>
        <tr>
            <th colspan="5">政治面貌</th>
            <td colspan="4"></td>
            <th colspan="3">E-mail</th>
            <td colspan="5"></td>
        </tr>
        <tr>
            <th colspan="5">婚姻状况</th>
            <td colspan="4"></td>
            <th colspan="3">兴趣特长</th>
            <td colspan="8"></td>
        </tr>
        <tr>
            <th colspan="5">现住址</th>
            <td colspan="8"></td>
            <th colspan="2">邮编</th>
            <td colspan="2"></td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <th colspan="2" rowspan="4">受教育情况</th>
            <th colspan="5">时间</th>
            <th colspan="5">毕业院校</th>
            <th colspan="5">所学专业</th>
            <th colspan="3">学历</th>
        </tr>
        <tr>
            <td colspan="5"></td>
            <td colspan="5"></td>
            <td colspan="5"></td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td colspan="5"></td>
            <td colspan="5"></td>
            <td colspan="5"></td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <td colspan="5"></td>
            <td colspan="5"></td>
            <td colspan="5"></td>
            <td colspan="3"></td>
        </tr>
        <tr>
            <th colspan="2" rowspan="4">工作经历</th>
            <th colspan="5">时间</th>
            <th colspan="5">单位</th>
            <th colspan="1">担任职务</th>
            <th colspan="2">薪资水平</th>
            <th colspan="5">证明人/联系方式<br>(应聘重要岗位填写)</th>
        </tr>
        <tr>
            <td colspan="5"></td>
            <td colspan="5"></td>
            <td colspan="1"></td>
            <td colspan="2"></td>
            <td colspan="5"></td>
        </tr>
        <tr>
            <td colspan="5"></td>
            <td colspan="5"></td>
            <td colspan="1"></td>
            <td colspan="2"></td>
            <td colspan="5"></td>
        </tr>
        <tr>
            <td colspan="5"></td>
            <td colspan="5"></td>
            <td colspan="1"></td>
            <td colspan="2"></td>
            <td colspan="5"></td>
        </tr>
        <tr>
            <th colspan="7">相关资源证书</th>
        </tr>
        <tr>
            <th colspan="5">应聘职位</th>
            <td colspan="6"></td>
            <th colspan="3">期望薪资</th>
            <td colspan="6"></td>
        </tr>
        <tr>
            <th colspan="5">个人期望发展</th>
            <td class="gao150" colspan="15"></td>
        </tr>
        <tr>
            <th colspan="5">相关部门意见</th>
            <td class="gao250" colspan="7" valign="top"><b>用人部门：</b></td>
            <td class="gao250" colspan="4" valign="top"><b>人事部：</b></td>
            <td class="gao250" colspan="4" valign="top"><b>总经理：</b></td>
        </tr>
        <tr>
            <th class="gao175" colspan="5">备注</th>
        </tr>
    </table>
</body>

</html>