小白 第二弹——用html代码(完成下面简历的内容)写出个人简历
话不多说 先放图
在这里插入图片描述首先先要明确两个知识点(html中table标签的使用)【注:以下代码是先测试两个知识点】
先构造一个表格
在这里插入图片描述

(1)跨列合并
代码格式:<td colspan="3"></td>
如果仅仅是将上述代码写在标签中会产生下面的情况
在这里插入图片描述合并那一行中多出个一个单元格,所以要在在该行中下面注释掉一个单元格
在这里插入图片描述如果要合并3列则需要在其下面注释掉2个单元格

    <tr>
        <td  colspan="3"></td>
         <!-- <td></td> 
        <td></td> -->
        <td></td>
    </tr>
    <tr>
         <td></td> 
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td> 
        <td></td>
        <td></td>
        <td></td>
    </tr>

2)跨行合并<td rowspan="n"></td>
//n是跨行合并的行数
如果仅仅是将上述代码写在代码中会产生下面的情况
在这里插入图片描述所以我们要在下一行注释掉一个单元格
在这里插入图片描述如果要合并3行则代码如下

  < <tr>
            <td  rowspan="3"></td>
             <td></td> 
            <td></td>
            <td></td>
        </tr>
        <tr>
             <!-- <td></td>  -->
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td>  -->
            <td></td>
            <td></td>
            <td></td>
        </tr>


依次类推即可

下面根据上述两个知识点即可写出简历
代码如下

<!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;}
        td{width: 90px; height: 35px;
            border:1px solid black;
        }
        caption{
            font-size: 30px;
        }
    </style>
</head>
<body>
    <table align="center" width:700px ; height: 600px;>
        <caption align="center">个人简历</caption>
        <tr>
            <td align="center" rowspan="2">姓名</td>
            <td align="center" rowspan="2"></td>
            <td align="center">性别</td>
            <td></td>
            <td align="center">文化程度</td>
            <td></td>
            <td rowspan="3" align="center"> 照片</td>
        </tr>
        <tr>
            <!--<td></td>-->
             <!--<td></td>-->
             <td align="center">身高</td>
            <td></td>
            <td align="center">政治面貌</td>
           <!--<td></td>-->
            <!--<td></td>-->
        </tr>
        <tr>
            <td align="center" >籍贯</td>
            <td align="center" colspan="2"></td>
            <!--<td></td>-->
           <!--<td></td>-->
           <td align="center" >出生年月日</td>
           <td colspan="2"></td>
            <!--<td ></td>-->
        </tr>
        <tr>
            <td align="center" >户口所在地</td>
            <td colspan="2"></td>
             <!--<td ></td>-->
             <td align="center" >婚否</td>
            <td></td>
            <td align="center" >民族</td>
            <td></td>
        </tr>
        <tr>
            <td align="center" >身份证号码</td>
            <td colspan="2"></td>
             <!--<td ></td>-->
             <td align="center" >现居住地址</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td align="center" >毕业院校</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
            <td align="center" >毕业时间</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center" >毕业院校</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
            <td align="center" >爱好特长</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
            
        </tr>
        < <td align="center" rowspan="2">个人简介</td>
        <td colspan="6"  rowspan="2"></td>
          <!-- <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>-->
      </tr>
      <tr>
          <!-- <td></td>
          <td colspan="6" ></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>
          <td></td>-->
      </tr>
        <tr>
            <td align="center"  >就学时间</td>
            <td align="center" colspan="2"  >学校</td>
            <!-- <td></td> -->
            <td align="center"  >学年</td>
            <td align="center"  >学历</td>
            <td align="center"  >专业</td>
            <td align="center"  >担任职务</td>
        </tr>
        <tr>
            <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>
        </tr>
        <tr>
            <td align="center"  >英语应用水平</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
            <td align="center"  >职业期望</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center"  >计算机应用水平</td>
            <td colspan="3"></td>
            <!-- <td></td>
            <td></td> -->
            <td align="center"  >生活要求</td>
            <td colspan="2"></td>
            <!-- <td></td> -->
        </tr>
        <tr>
            <td align="center" rowspan="4" >工作经历求</td>
            <td align="center"  >时间</td>
            <td align="center" colspan="4" >工作地点</td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
            <td align="center"  >职务</td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td></td>
            <td colspan="4"></td>
            <!-- <td></td>
            <td></td>
            <td></td> -->
            <td></td>
        </tr>
        <tr>
           <!-- <td></td> -->
           <td></td>
           <td colspan="4"></td>
           <!-- <td></td>
           <td></td>
           <td></td> -->
           <td></td>
        </tr>
        <tr>
           <!-- <td></td> -->
           <td></td>
           <td colspan="4"></td>
           <!-- <td></td>
           <td></td>
           <td></td> -->
           <td></td>
        </tr>
        <tr>
            <td align="center"  >待遇要求</td>
            <td colspan="6"></td>
            <!-- <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td> -->
        </tr>
        <tr>
            <td align="center" rowspan="2" >联系方式</td>
            <td align="center"  >移动电话</td>
            <td></td>
            <td align="center"  >现在住址</td>
            <td></td>
            <td align="center"  >邮编</td>
            <td></td>
        </tr>
        <tr>
            <!-- <td></td> -->
            <td align="center"  >紧急联系人</td>
            <td></td>
            <td align="center"  >与本人无关</td>
            <td></td>
            <td align="center"  >联系电话</td>
            <td></td>
        </tr>
    </table>
</body>
</html>

由于本人是小白一个 上述中如有错误,不严谨的欢迎指正

Logo

为开发者提供学习成长、分享交流、生态实践、资源工具等服务,帮助开发者快速成长。

更多推荐