案例：使用HTML中的 table 标签制作一份个人简历

最新推荐文章于 2023-07-13 16:12:33 发布

叶子yes

最新推荐文章于 2023-07-13 16:12:33 发布

阅读量1k

点赞数 2

分类专栏： html 前端文章标签： html 前端 css

本文链接：https://blog.csdn.net/lq313131/article/details/125858170

版权

前端同时被 2 个专栏收录

63 篇文章 7 订阅

订阅专栏

html

13 篇文章 1 订阅

订阅专栏

先看最终效果：
在这里插入图片描述

一、使用到的知识点
这个小案例中主要使用到的知识点是表格标签中单元格的合并，还使用到了一些表格标签里面的属性，比如宽高属性、水平对齐属性，还有表格边框的设置和合并等。

二、单元格合并知识点解释

单元格合并

1、水平方向上的单元格合并
可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)
例如:

<td colspan="2"></td>

含义: 把当前单元格当做两个单元格来看待

注意:
由于把某一个单元格当做了多个单元格来看待, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示.
一定要记住单元格合并永远都是向后或者向下合并, 而不能向前或者向上合并.

2、垂直方向上的单元格合并
可以给td标签设置一个rowspan属性, 来指定把某一个单元格当做多个单元格来看待(垂直方向)
例如:

<td rowspan="2"></td>

含义: 把当前单元格当做两个单元格来看待

三、思路
1、首先我们需要观察我们要制作的个人简历，确定好生成一个几行几列的表格
2、然后再进行表格的合并
3、根据实际设置单元格的宽高、字体样式等

四、下面这是完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人简历</title>
    <style>
        td{
            width: 65px;
        }
        caption{
            font-size: 20px;
            font-weight: bold;
            padding-bottom: 30px;
        }
    </style>
</head>
<body>
    <table border="1" align="center" width="650px" cellspacing="0">
        <caption>个&nbsp;人&nbsp;简&nbsp;历</caption>
        <!-- 基本信息 -->
        <tr align="center">
            <td>姓&nbsp;名</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td>性&nbsp;别</td>
            <td></td>
            <td>出&nbsp;生年&nbsp;月</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td colspan="2" rowspan="3">照&nbsp;&nbsp;片</td>
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>籍&nbsp;贯</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td>民&nbsp;族</td>
            <td></td>
            <td>身&nbsp;体状&nbsp;况</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <!-- <td colspan="2"></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>政&nbsp;治面&nbsp;貌</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td>身&nbsp;高</td>
            <td></td>
            <td>外&nbsp;语程&nbsp;度</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <!-- <td colspan="2"></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>所&nbsp;在学&nbsp;院</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            <td>学&nbsp;历</td>
            <td></td>
            <td>曾&nbsp;任职&nbsp;务</td>
            <td colspan="4"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>所&nbsp;学专&nbsp;业</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2">特&nbsp;长</td>
            <!-- <td></td> -->
            <td colspan="4"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td>毕&nbsp;业时&nbsp;间</td>
            <td colspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2">联系电话</td>
            <!-- <td></td> -->
            <td colspan="4"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
        </tr>
        <tr align="center">
            <td rowspan="3">家&nbsp;庭住&nbsp;址</td>
            <td colspan="3" rowspan="3"></td>
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2">邮政编码</td>
            <!-- <td></td> -->
            <td colspan="4"></td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2">个人网站</td>
            <!-- <td></td> -->
            <td colspan="4"></td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr align="center">
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <!-- <td></td> -->
            <td colspan="2">E-mail</td>
            <!-- <td></td> -->
            <td colspan="4"></td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <!-- 个人简历  -->
        <tr align="center">
            <td height="183px" rowspan="4">个&nbsp;人简&nbsp;历</td>
            <td rowspan="4" colspan="9"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <!-- 个人特点 -->
        <tr align="center">
            <td  height="137px" rowspan="3">个&nbsp;人特&nbsp;点</td>
            <td rowspan="3" colspan="9"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <!-- <td></td> -->
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <!-- 社会实践经历 -->
        <tr align="center">
            <td  height="228px" rowspan="5">社会实践经历</td>
            <td rowspan="5" colspan="9"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
    </table>
</body>
</html>

叶子yes

关注

2
点赞
踩
15

收藏

觉得还不错? 一键收藏
0
评论
案例：使用HTML中的 table 标签制作一份个人简历

一、使用到的知识点这个小案例中主要使用到的知识点是表格标签中单元格的合并，还使用到了一些表格标签里面的属性，比如宽高属性、水平对齐属性，还有表格边框的设置和合并等。二、单元格合并知识点解释1、水平方向上的单元格合并可以给td标签添加一个colspan属性, 来指定把某一个单元格当做多个单元格来看待(水平方向)例如:含义: 把当前单元格当做两个单元格来看待注意:由于把某一个单元格当做了多个单元格来看待, 所以就会多出一些单元格, 所以需要删掉一些单元格才能正常显示.一定要记住单元格...
复制链接

扫一扫