用HTML代码实现个人简历的编写

小白 第二弹——用html代码(完成下面简历的内容)写出个人简历
话不多说 先放图
用HTML代码实现个人简历的编写_第1张图片首先先要明确两个知识点(html中table标签的使用)【注:以下代码是先测试两个知识点】
先构造一个表格
用HTML代码实现个人简历的编写_第2张图片

(1)跨列合并
代码格式:
如果仅仅是将上述代码写在标签中会产生下面的情况
用HTML代码实现个人简历的编写_第3张图片合并那一行中多出个一个单元格,所以要在在该行中下面注释掉一个单元格
用HTML代码实现个人简历的编写_第4张图片如果要合并3列则需要在其下面注释掉2个单元格

    
        
         
        
    
    
          
        
        
        
    
    
         
        
        
        
    

2)跨行合并
//n是跨行合并的行数
如果仅仅是将上述代码写在代码中会产生下面的情况
用HTML代码实现个人简历的编写_第5张图片所以我们要在下一行注释掉一个单元格
用HTML代码实现个人简历的编写_第6张图片如果要合并3行则代码如下

  < <tr>
            <td  rowspan="3">td>
             <td>td> 
            <td>td>
            <td>td>
        tr>
        <tr>
             
            <td>td>
            <td>td>
            <td>td>
        tr>
        <tr>
            
            <td>td>
            <td>td>
            <td>td>
        tr>


依次类推即可

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


<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
    <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 align="center">身高td>
            <td>td>
            <td align="center">政治面貌td>
           
            
        tr>
        <tr>
            <td align="center" >籍贯td>
            <td align="center" colspan="2">td>
            
           
           <td align="center" >出生年月日td>
           <td colspan="2">td>
            
        tr>
        <tr>
            <td align="center" >户口所在地td>
            <td colspan="2">td>
             
             <td align="center" >婚否td>
            <td>td>
            <td align="center" >民族td>
            <td>td>
        tr>
        <tr>
            <td align="center" >身份证号码td>
            <td colspan="2">td>
             
             <td align="center" >现居住地址td>
            <td colspan="3">td>
            
        tr>
        <tr>
            <td align="center" >毕业院校td>
            <td colspan="3">td>
            
            <td align="center" >毕业时间td>
            <td colspan="2">td>
            
        tr>
        <tr>
            <td align="center" >毕业院校td>
            <td colspan="3">td>
            
            <td align="center" >爱好特长td>
            <td colspan="2">td>
            
            
        tr>
        < <td align="center" rowspan="2">个人简介td>
        <td colspan="6"  rowspan="2">td>
          
      tr>
      <tr>
          
      tr>
        <tr>
            <td align="center"  >就学时间td>
            <td align="center" colspan="2"  >学校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 align="center"  >职业期望td>
            <td colspan="2">td>
            
        tr>
        <tr>
            <td align="center"  >计算机应用水平td>
            <td colspan="3">td>
            
            <td align="center"  >生活要求td>
            <td colspan="2">td>
            
        tr>
        <tr>
            <td align="center" rowspan="4" >工作经历求td>
            <td align="center"  >时间td>
            <td align="center" colspan="4" >工作地点td>
            
            <td align="center"  >职务td>
        tr>
        <tr>
            
            <td>td>
            <td colspan="4">td>
            
            <td>td>
        tr>
        <tr>
           
           <td>td>
           <td colspan="4">td>
           
           <td>td>
        tr>
        <tr>
           
           <td>td>
           <td colspan="4">td>
           
           <td>td>
        tr>
        <tr>
            <td align="center"  >待遇要求td>
            <td colspan="6">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 align="center"  >紧急联系人td>
            <td>td>
            <td align="center"  >与本人无关td>
            <td>td>
            <td align="center"  >联系电话td>
            <td>td>
        tr>
    table>
body>
html>

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

你可能感兴趣的:(html,html5)