search

博客列表 >表格和表单的使用

表格和表单的使用

织网虾
织网虾原创
2021年11月12日 12:54:17608浏览

11.10 表格和表单的使用

个人简历

效果图

html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>个人简历</title>
  8.     <link rel="stylesheet" href="css/index.css">
  9. </head>
  10. <body>
  11.     <table>
  12.         <tr class="blue">
  13.             <td colspan="5"></td>
  14.         </tr>
  15.         <tr class="title">
  16.             <td colspan="5">------基本资料------</td>
  17.         </tr>
  18.         <tr>
  19.             <td class="tcenter">姓&nbsp;&nbsp;&nbsp;&nbsp;名</td>
  20.             <td>织网虾 </td>
  21.             <td class="tcenter">性&nbsp;&nbsp;&nbsp;&nbsp;别</td>
  22.             <td>男</td>
  23.             <td rowspan="7"></td>
  24.         </tr>
  25.         <tr>
  26.             <td class="tcenter">学&nbsp;&nbsp;&nbsp;&nbsp;历</td>
  27.             <td>大学</td>
  28.             <td class="tcenter">身&nbsp;&nbsp;&nbsp;&nbsp;高</td>
  29.             <td>199cm</td>
  30.         </tr>
  31.         <tr>
  32.             <td class="tcenter">籍&nbsp;&nbsp;&nbsp;&nbsp;贯</td>
  33.             <td>浙江省余杭区</td>
  34.             <td class="tcenter">出生年月</td>
  35.             <td>2021年11月</td>
  36.         </tr>
  37.         <tr>
  38.             <td class="tcenter">毕业院校</td>
  39.             <td colspan="3">我的大学不告诉你</td>
  41.         </tr>
  42.         <tr>
  43.             <td class="tcenter">主修专业</td>
  44.             <td colspan="3">汉语言文学</td>
  46.         </tr>
  47.         <tr>
  48.             <td class="tcenter">工程经验</td>
  49.             <td>35年</td>
  50.             <td class="tcenter">目前年薪</td>
  51.             <td>26万</td>
  52.         </tr>
  53.         <tr>
  54.             <td class="tcenter">有效证件</td>
  55.             <td>台胞证</td>
  56.             <td class="tcenter">证件号码</td>
  57.             <td>52052088888888</td>
  58.         </tr>
  59.         <tr class="blue">
  60.             <td colspan="5"></td>
  61.         </tr>
  62.         <tr class="title">
  63.             <td colspan="5">------求职意向------</td>
  64.         </tr>
  65.         <tr class="blue">
  66.             <td class="tcenter">寻求职位</td>
  67.             <td colspan="4">全栈工程师</td>
  69.         </tr>
  70.         <tr>
  71.             <td class="tcenter">求职地区</td>
  72.             <td colspan="2">浙江杭州</td>
  73.             <td class="tcenter">工资待遇</td>
  74.             <td>50k</td>
  76.         </tr>
  77.         <tr>
  78.             <td class="tcenter">自我评价</td>
  79.             <td colspan="4">我工作其中,我对社会的了解.人与人之间的沟通是很重要的.做事情需要自己一个人独立去完成也是很重要的事情!掌握php及前端知识。我工作其中,我对社会的了解.人与人之间的沟通是很重要的.做事情需要自己一个人独立去完成也是很重要的事情!掌握php及前端知识</td>
  81.         </tr>
  82.         <tr class="blue">
  83.             <td colspan="5"></td>
  84.         </tr>
  85.         <tr class="title">
  86.             <td colspan="5">------教育培训------</td>
  87.         </tr>
  88.         <tr>
  89.             <td class="tcenter"  >起止时间</td>
  90.             <td colspan="2">就读学校</td>
  91.             <td class="tcenter">专业</td>
  92.             <td>学历</td>
  94.         </tr>
  95.         <tr>
  96.             <td class="tcenter">2010-2014</td>
  97.             <td colspan="2">不知名大学</td>
  98.             <td class="tcenter">汉语言文学</td>
  99.             <td>大学</td>
  101.         </tr>
  102.         <tr class="blue">
  103.             <td colspan="5"></td>
  104.         </tr>
  105.         <tr class="title">
  106.             <td colspan="5">------工作经验------</td>
  107.         </tr>
  108.         <tr>
  109.             <td class="tcenter"  >就职公司</td>
  110.             <td colspan="2">php中文网</td>
  111.             <td class="tcenter">公司行业</td>
  112.             <td>IT</td>
  114.         </tr>
  115.         <tr>
  116.             <td class="tcenter">工作时间</td>
  117.             <td colspan="2">2020-至今</td>
  118.             <td class="tcenter">部门</td>
  119.             <td>前端事业部</td>
  121.         </tr>
  122.         <tr>
  123.             <td class="tcenter">公司性质</td>
  124.             <td colspan="2">上市公司</td>
  125.             <td class="tcenter">职位</td>
  126.             <td>CTO</td>
  128.         </tr>
  129.         <tr class="blue">
  130.             <td colspan="5"></td>
  131.         </tr>
  132.         <tr class="title">
  133.             <td colspan="5">------联系方式------</td>
  134.         </tr>
  135.         <tr>
  136.             <td class="tcenter">联系电话</td>
  137.             <td colspan="4">0571-88888888</td>
  139.         </tr>
  140.         <tr>
  141.             <td class="tcenter">手机</td>
  142.             <td colspan="4">18042469376</td>
  144.         </tr>
  145.         <tr>
  146.             <td class="tcenter">电子邮件</td>
  147.             <td colspan="4">php********@163.com</td></td>
  149.         </tr>
  150.     </table>
  151. </body>
  152. </html>
css代码
  1. table{
  2.     width:600px;
  3.     border:1px solid #80817C;
  4.     border-spacing:1px;
  5.     border-collapse: collapse;
  6.     margin:0 auto;
  7.     font-size:12px;
  8.     font-family:'Courier New', Courier, monospace;
  10. }
  11. table tr{
  12.     height:20px;
  13.     line-height:20px;
  14.     border:1px solid #80817C;
  17. }
  18. table td{
  19.     padding-left: 2px;
  20.     border:1px solid #80817C;
  21.     border-spacing:0px;
  22.     padding-left: 10px;
  23.     width:148px;
  26. }
  27. .blue{
  28.     background-color:#A6C6EC;
  29. }
  30. .title{
  31.     background-color:#E6EEFF;
  33. }
  36. .tcenter{text-align: center;}

注册表单

执行效果图

html代码
  1. <!DOCTYPE html>
  2. <html lang="en">
  3.   <head>
  4.     <meta charset="UTF-8" />
  5.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  6.     <title>用户注册</title>
  7.     <link rel="stylesheet" href="css/index.css">
  8.   </head>
  9.   <body>
  10.     <table>
  11.         <form type="post" action="">
  12.       <tr>
  13.         <th colspan="2">用户注册</th>
  14.       </tr>
  15.       <tr>
  16.         <td class="label">账号：</td>
  18.         <td>
  19.           <input type="text" class="text"  id="username" placeholder="请输入用户名,6-8个字符" />
  20.         </td>
  21.       </tr>
  22.       <tr>
  23.         <td class="label">密码:</td>
  24.         <td><input  class="text"  type="password" value="" /></td>
  25.       </tr>
  26.       <tr>
  27.         <td class="label">邮箱:</td>
  28.         <td><input  class="text"  type="email" value="" placeholder="wwww@111.com" /></td>
  29.       </tr>
  31.       <tr>
  32.         <td class="label">年龄:</td>
  33.         <td>
  34.           <input  class="text"  type="number" value="" placeholder="真实年龄" />
  36.         </td>
  37.       </tr>
  39.       <tr>
  40.         <td class="label">生日:</td>
  41.         <td>
  42.           <input type="date" class="text" value="" placeholder="年/月/日" />
  43.         </td>
  44.       </tr>
  45.       <tr>
  46.         <td class="label">课程：</td>
  47.         <td>
  48.             <select  id="kc">
  49.                 <option>------请选择课程------</option>
  50.                 <option>计算机</option>
  51.                 <option>语种</option>
  52.             </select>
  53.         </td>
  54.       </tr>
  55.       <tr>
  56.         <td class="label">性别</td>
  57.         <td><input type="radio" />男<input type="radio" />女</td>
  58.       </tr>
  59.       <tr>
  60.         <td class="label">简介：</td>
  61.         <td><textarea name="" id="" cols="30" rows="10" placeholder="200个字以内"></textarea></td>
  62.       </tr>
  63.       <tr>
  64.         <td class="label"><input type="submit" value="提交" /></td>
  65.         <td><input type="button" value="AJAX" /></td>
  66.       </tr>
  69.     </form>
  70.     </table>
  71.   </body>
  72. </html>
css代码
  1. th{
  2.     text-align: left;
  3.     font-size:16px;
  4. }
  6. table{
  8.     width:400px;
  9.     margin:0 auto;
  10.     padding:0;
  13. }
  14. .label{
  15.     width:50px;
  16.     font-size:14px;
  17.     padding:0;
  18.     margin:0;
  19.     vertical-align:bottom
  20. }
  21. td{
  22.     width:350px; 
  23.     text-align: left;
  24.      padding:0;margin:0;
  25.      height:35px;
  26.      vertical-align:bottom
  27. }
  28. .text{
  29.     width:200px;
  30.     height:25px;
  31.     line-height:25px;
  32. }
  33. textarea{
  34.     width:200px;
  35. }
  36. select{
  37.     height:25px;
  38.     width:210px;
  39.     line-height:25px;
  40. }
上一条：10.10 table,tr,th,td的正确使用 以及表格制作下一条：table和form的使用
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议
织网虾2021-11-11 20:03:271楼
好吧，那是正文中的好不好

相关文章

查看更多