使用html和css实现个人简历表单的制作

根据下列要求,做出下图所示的个人简历(表单)

表单要求

Ⅰ、表格整体的边框为1像素,单元格间距为0,表格中前六列列宽均为100像素,第七列 为200像素,表格整体在页面上居中显示;

Ⅱ、前五行的行高为40像素,第六行的行高为80像素,排列方式均为居中显示;

Ⅲ、第一行合并了7列;第三行合并了三列;第四行合并了三列;第五行合并了五列;第六 行合并了六列;照片的单元格合并了四行。

html代码

html 复制代码
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title></title>
   </head>
   <body>
      <table border="1px" cellspacing="0" align="center">
         <col width="100px">
         <col width="100px">
         <col width="100px">
         <col width="100px">
         <col width="100px">
         <col width="100px">
         <col width="200px">
         <tr height="40">
            <th colspan="7">个人简历</th>
         </tr>
         <tr height="40" align="center">
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>年龄</td>
            <td></td>
            <td rowspan="4">照片</td>
         </tr>
         <tr height="40" align="center">
            <td>学历</td>
            <td></td>
            <td>籍贯</td>
            <td colspan="3"></td>
         </tr>
         <tr height="40" align="center">
            <td>电话</td>
            <td></td>
            <td>政治面貌</td>
            <td colspan="3"></td>
         </tr>
         <tr height="40" align="center">
            <td>毕业院校</td>
            <td colspan="5"></td>
         </tr>
         <tr height="80" align="center">
            <td>求职意向</td>
            <td colspan="6"></td>
         </tr>
      </table>
   </body>
</html>

CSS和html分开代码

CSS文件{style.css}

html 复制代码
/* styles.css */

/* 设置表格样式 */
table {
    border: 1px solid black;
    border-collapse: collapse;
    margin: auto; /* 居中显示 */
}

/* 设置表头样式 */
th {
    background-color: #ccc;
    height: 40px;
}

/* 设置表格内容样式 */
td {
    height: 40px;
}

/* 设置照片单元格样式 */
td[rowspan="4"] {
    vertical-align: middle; /* 垂直居中显示 */
}

/* 设置单元格内容水平和垂直居中显示 */
td, th {
    text-align: center;
    vertical-align: middle;
}

HTML文件

html 复制代码
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>个人简历</title>
      <!-- 引入外部 CSS 文件 -->
      <link rel="stylesheet" href="styles.css">
   </head>
   <body>
      <table border="1px" cellspacing="0" align="center">
         <col width="100px">
         <col width="100px">
         <col width="100px">
         <col width="100px">
         <col width="100px">
         <col width="100px">
         <col width="200px">
         <tr height="40">
            <th colspan="7">个人简历</th>
         </tr>
         <tr height="40" align="center">
            <td>姓名</td>
            <td></td>
            <td>性别</td>
            <td></td>
            <td>年龄</td>
            <td></td>
            <td rowspan="4">照片</td>
         </tr>
         <tr height="40" align="center">
            <td>学历</td>
            <td></td>
            <td>籍贯</td>
            <td colspan="3"></td>
         </tr>
         <tr height="40" align="center">
            <td>电话</td>
            <td></td>
            <td>政治面貌</td>
            <td colspan="3"></td>
         </tr>
         <tr height="40" align="center">
            <td>毕业院校</td>
            <td colspan="5"></td>
         </tr>
         <tr height="80" align="center">
            <td>求职意向</td>
            <td colspan="6"></td>
         </tr>
      </table>
   </body>
</html>

运行结果

相关推荐
懒大王爱吃狼40 分钟前
Python教程:python枚举类定义和使用
开发语言·前端·javascript·python·python基础·python编程·python书籍
逐·風5 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫5 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦6 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子6 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山7 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享7 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
清灵xmf9 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨9 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL9 小时前
npm入门教程1:npm简介
前端·npm·node.js