微信公众号 讲师中心
首页
文章
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 自媒体 新闻
专题
后端开发 web前端 数据库 开发工具 php框架 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程 游戏教程 新闻
AI工具
AI 聊天问答 Agent智能体 AI 文本写作 AI 绘画作图 AI 设计工具 AI 视频创作 AI 音频制作 AI 办公学习 AI 编程开发 Prompt指令
学习
大前端 后端开发 数据库 移动端 运维开发 计算机基础
编程手册
大前端 后端开发 数据库 移动端 运维开发 计算机基础
下载
js特效 网站源码 工具下载 类库下载 网站素材 学习资源 插件扩展 手机/移动开发 手机游戏
搜索
后端开发 web前端 数据库 开发工具 php框架 常见问题 科技 Java 系统教程 电脑教程 硬件教程 手机教程 软件教程
游戏教程 自媒体 新闻
首页 > 博客列表 > 表格和表单的使用
博主信息
博文 3
粉丝 0
评论 2
访问量 2558
专题推荐
更多>
相关推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
表格和表单的使用
织网虾
原创
811人浏览过

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. }
批改老师：PHPzPHPz

批改状态：合格

老师批语：
本博文版权归博主所有，转载请注明地址！如有侵权、违法，请联系admin@php.cn举报处理！
全部评论 文明上网理性发言，请遵守新闻评论服务协议
1条评论
织网虾 2021-11-11 20:03:27
好吧，那是正文中的好不好
1楼
作者最新博文
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新 English
php中文网：公益在线php培训，帮助PHP学习者快速成长！
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习

Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号

  • PHP学习

  • 技术支持

  • 返回顶部
    • 登录PHP中文网，和优秀的人一起学习！
    全站2000+教程免费学
    微信扫码登录