HTML图片标签&列表&表格以及合并单元格，个人简历小案例

最新推荐文章于 2024-07-25 11:52:08 发布

stay calm~

最新推荐文章于 2024-07-25 11:52:08 发布

阅读量531

点赞数

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

本文链接：https://blog.csdn.net/qq_50352386/article/details/122147276

版权

笔记专栏收录该内容

30 篇文章 3 订阅

订阅专栏

合并单元格:
1.先实现特殊表格对应的普通表格的基本结构。
2.判定当前单元格是跨行还是跨列，给对应的单元格属性，属性值就是占据的单元格数量
(从上到下，从左到右的顺序，合并单元格，跨列用colspan,跨行用rowspan,左上)
3.保存看错误效果。
4.删除效果中对应行多的单元格（从行的最后面一个单元格往前删除)

案例一合并单元格


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <table border="1" cellspacing="0">
        <tr>
            <td colspan="2">aaaaa</td>
            <td >aaaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td rowspan="4">aaaaa</td>
            <td>aaaaa</td>
            <td rowspan="2">aaaaa</td>
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>
            
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td colspan="2">aaaaa</td>
            <td rowspan="4">aaaaa</td>
            <td>aaaaa</td>
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>           
            <td>aaaaa</td>
        </tr>
        <tr>
            <td>aaaaa</td>
            <td>aaaaa</td>
            <td>aaaaa</td>           
            <td>aaaaa</td>
        </tr>
        <tr>
            <td colspan="3">aaaaa</td>         
            <td>aaaaa</td>
        </tr>
    </table>
</body>
</html>

案例二个人简历

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<style>
    table{
        table-layout: fixed;
        width: 800px;
    }
</style>
<body>
    <table border="1" cellspacing="0" cellpadding="10">
        <tr>
          <th colspan="8">个人简历</th>
        </tr>
        <tr>
            <td colspan="8">基本信息</td>
        </tr>
        <tr>
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td colspan="2">出生日期</td>
            <td></td>
            <td rowspan="5">照片</td>
        </tr>
        <tr>
            <td>民族</td>
            <td></td>
            <td>政治面貌</td>
            <td></td>
            <td colspan="2">电话</td>
            <td></td>
        </tr>
        <tr>
            <td>籍贯</td>
            <td></td>
            <td>学历</td>
            <td></td>
            <td colspan="2">专业</td>
            <td></td>
        </tr>
        <tr>
            <td>毕业院校</td>
            <td colspan="3"></td>
            <td colspan="2">Email</td>
            <td></td>
        </tr>
        <tr>
            <td >地址</td>
            <td colspan="6"></td>
        </tr>
        <tr>
            <td rowspan="5">教育培训经历</td>
            <td>起止日期</td>
            <td colspan="3">学校名称</td>
            <td colspan="2">所学专业</td>           
            <td>荣誉/证书</td>
        </tr>
        <tr>
          
            <td></td>      
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
          
            <td></td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
        <tr>
         
            <td></td>
            <td colspan="3"></td>
            <td colspan="2"></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

stay calm~

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
0
评论
HTML图片标签&列表&表格以及合并单元格，个人简历小案例

合并单元格:1.先实现特殊表格对应的普通表格的基本结构。2.判定当前单元格是跨行还是跨列，给对应的单元格属性，属性值就是占据的单元格数量(从上到下，从左到右的顺序，合并单元格，跨列用colspan,跨行用rowspan,左上)3.保存看错误效果。4.删除效果中对应行多的单元格（从行的最后面一个单元格往前删除)<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8">..
复制链接

扫一扫