首页 > 编程知识 正文

用html代码制作一个表单页面,html制作个人简历表表格代码

时间:2023-05-04 20:48:39 阅读:116986 作者:4973

**

先看在谷歌浏览器中的效果


表单常用标签:

border:设置表格的边框cellspacing:单元格与单元格之间的距离bgcolor:表格的背景色colspan:跨列数rowspan:跨行数

table>(tr>td*n)*m 可生成一个m行n列的表格
例如生成一个2行3列的表格

HTML代码实现:

<!DOCTYPE html><html lang="cn"><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"> <style> /* 设置表格的宽和高,单元格文本框溢出隐帅气的樱桃/ td{width: 100px;overflow: hidden;} tr{height: 35px;} /* 设置输入框的大小沾满整个单元thdmj/ input{border: 0; width: 100%; height: 100%; outline: none; text-align: center;} </style> <title>resume</title></head><body> <h2 style="text-align: center;">个人简历</h2> <form> <table border="1" align="center" cellspacing="0"> <tbody align="center"> <tr> <td bgcolor="#ededed">姓名</td> <td><input type="text"></td> <td bgcolor="#ededed">性别</td> <td><input type="text"></td> <td bgcolor="#ededed">出生年月</td> <td><input type="text"></td> <td style="width: 120px;" align="left" rowspan="4"></td> </tr> <tr> <td bgcolor="#ededed">名族</td> <td><input type="text"></td> <td bgcolor="#ededed">政治面貌</td> <td><input type="text"></td> <td bgcolor="#ededed">身高</td> <td><input type="text"></td> </tr> <tr> <td bgcolor="#ededed">学制</td> <td><input type="text"></td> <td bgcolor="#ededed">学历</td> <td><input type="text"></td> <td bgcolor="#ededed">户籍</td> <td><input type="text"></td> </tr> <tr> <td bgcolor="#ededed">专业</td> <td><input type="text"></td> <td colspan="2" bgcolor="#ededed">毕业学校</td> <td colspan="2"><input type="text"></td> </tr> <tr> <td colspan="7"><b>技能、特长或爱好</b></td> </tr> <tr> <td bgcolor="#ededed">外语等级</td> <td colspan="2"><input type="text"></td> <td bgcolor="#ededed">计算机</td> <td colspan="3"><input type="text"></td> </tr> <tr> <td colspan="7"><b>个人履历</b></td> </tr> <tr> <td bgcolor="#ededed">时间</td> <td colspan="2" bgcolor="#ededed">单位</td> <td colspan="4" bgcolor="#ededed">经历</td> </tr> <tr> <td><input type="text"></td> <td colspan="2"><input type="text"></td> <td colspan="4"><input type="text"></td> </tr> <tr> <td><input type="text"></td> <td colspan="2"><input type="text"></td> <td colspan="4"><input type="text"></td> </tr> <tr> <td><input type="text"></td> <td colspan="2"><input type="text"></td> <td colspan="4"><input type="text"></td> </tr> <tr> <td colspan="7"><b>联系方式</b></td> </tr> <tr> <td bgcolor="#ededed">联系电话</td> <td colspan="2"><input type="text"></td> <td bgcolor="#ededed">通信地址</td> <td colspan="3"><input type="text"></td> </tr> <tr> <td bgcolor="#ededed">E-mail</td> <td colspan="2"><input type="email"></td> <td bgcolor="#ededed">邮编</td> <td colspan="3"><input type="text"></td> </tr> <tr> <td colspan="7"><b>自我评价</b></td> </tr> <tr style="height: 110px;"> <td colspan="7"><input type="text"></td> </tr> </tbody> </table> </form></body></html>

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。