Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 表格和表单的使用
Blogger Information
Blog 3
fans 0
comment 2
visits 1670
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
表格和表单的使用
织网虾
Original
609 people have browsed it

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. }
Correcting teacher：PHPzPHPz

Correction status：qualified

Teacher's comments：
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
1 comments
织网虾 2021-11-11 20:03:27
好吧，那是正文中的好不好
1 floor
Author's latest blog post