Community Learn Tools Library Leisure
search
English
Home > List of blog posts > 10.10 table,tr,th,td的正确使用 以及表格制作
Blogger Information
Blog 4
fans 0
comment 0
visits 1635
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
10.10 table,tr,th,td的正确使用 以及表格制作
。
Original
1600 people have browsed it

一、使用<table>\<tr>\<th>\<td>做一张表

涉及知识点

1.table边框设置属性为 border
2.单元格属性 用在 td th 上
colspan 合并多少行
rowspan 合同多少列

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6.     <style>
  7.         table,table tr th, table tr td { border:1px solid #0094ff; }
  8.         table { width: auto; min-height: 25px; line-height: 25px; text-align: center; border-collapse: collapse;}
  9.     </style>
  10. </head>
  11. <body>
  13. <table style="border-collapse:collapse;">
  14.     <tr >
  15. <td colspan="6" style="background-color: aquamarine;width:700px;height: 20px
  16. "></td>
  17.     </tr>
  18.     <tr >
  19.         <td colspan="6" style="background-color: lightblue; width:700px;height: 20px
  20. ">------基础资料------</td>
  21.     </tr>
  22.     <tr >
  23.         <td>姓名：</td>
  24.         <td>马小姐</td>
  25.         <td>性别</td>
  26.         <td>女</td>
  27.         <td colspan="2" rowspan="7" style="color: lightblue; width: 70px"></td>
  28.     </tr>
  29.     <tr >
  30.         <td>学历：</td>
  31.         <td>中专</td>
  32.         <td>身高：</td>
  33.         <td>cm</td>
  34.     </tr>
  35.     <tr >
  36.         <td>籍贯：</td>
  37.         <td>广东</td>
  38.         <td>出生年月：</td>
  39.         <td>猴年马月</td>
  40.     </tr>
  41.     <tr >
  42.         <td>毕业院校：</td>
  43.         <td colspan="3">北京大学</td>
  45.     </tr>
  46.     <tr >
  47.         <td>主修专业：</td>
  48.         <td colspan="3">旅游管理</td>
  50.     </tr>
  51.     <tr >
  52.         <td>工作经验：</td>
  53.         <td>很丰富</td>
  54.         <td>目标年薪：</td>
  55.         <td>1块</td>
  56.     </tr>
  57.     <tr >
  58.         <td>有效证件：</td>
  59.         <td>团员证</td>
  60.         <td>证件号码：</td>
  61.         <td>**************</td>
  62.     </tr>
  63.     <tr >
  64.         <td colspan="6" style="background-color: aquamarine;width:700px;height: 20px
  65. "></td>
  66.     </tr>
  67.     <tr >
  68.         <td colspan="6" style="background-color: lightblue; width:700px;height: 20px
  69. ">------求职意向------</td>
  70.     </tr>
  71.     <tr style="background-color: aquamarine">
  72.         <td>寻求职位：</td>
  73.         <td colspan="5">董事长</td>
  75.     </tr>
  76.     <tr >
  77.         <td>求职地区：</td>
  78.         <td colspan="2">昆明</td>
  79.         <td>工作地点：</td>
  80.         <td colspan="2">这里那里</td>
  81.     </tr>
  82.     <tr >
  83.         <td>自我评价：</td>
  84.         <td colspan="6">首先,自我评价不是一味的说夸奖自己,自我评价时,<br/>应当从一个客观的方面去简单地说明一下自己在这几年的学习状态或者是工作状态,以及取得的一定成果的总结。<br/>简单的回顾一下自己所学习的知识手工做过的内容,然后写出自己的感受和收获。同时,提出自己对于未来工作的想法和规划,其实也就是借着这样的一个..</td>
  85.     </tr>
  86.     <tr >
  87.         <td colspan="6" style="background-color: aquamarine;width:700px;height: 20px
  88. "></td>
  89.     </tr>
  90.     <tr >
  91.         <td colspan="6" style="background-color: lightblue; width:700px;height: 20px
  92. ">------教育培训------</td>
  94.     </tr>
  95.     <tr >
  96.         <th>起止时间</th>
  97.         <th colspan="2">就读院校名称</th>
  98.         <th>主修专业</th>
  99.         <th colspan="2">学历</th>
  100.     </tr>
  101.     <tr >
  102.         <td>2020年-2028年</td>
  103.         <td colspan="2">北京大学</td>
  104.         <td>旅游管理</td>
  105.         <td colspan="2">本科</td>
  106.     </tr>
  107.     <tr >
  108.         <td colspan="6" style="background-color: aquamarine;width:700px;height: 20px
  109. "></td>
  110.     </tr>
  111.     <tr >
  112.         <td colspan="6" style="background-color: lightblue; width:700px;height: 20px
  113. ">------工作经验------</td>
  115.     </tr>
  116.     <tr >
  117.         <td>就职公司：</td>
  118.         <td colspan="2">深圳XX互联网公司</td>
  119.         <td>公司行业：</td>
  120.         <td colspan="2">互联网</td>
  121.     </tr>
  122.     <tr >
  123.         <td>就职时间：</td>
  124.         <td colspan="2">2021年至今</td>
  125.         <td>就职部门：</td>
  126.         <td colspan="2">技术研发</td>
  127.     </tr>
  128.     <tr >
  129.         <td>公司性质：</td>
  130.         <td colspan="2">坑蒙拐骗</td>
  131.         <td>诚邀职位：</td>
  132.         <td colspan="2">财务部</td>
  133.     </tr>
  134.     <tr >
  135.         <td>工作描述：</td>
  136.         <td colspan="6">首先,自我评价不是一味的说夸奖自己,自我评价时,<br/>应当从一个客观的方面去简单地说明一下自己在这几年的学习状态或者是工作状态,以及取得的一定成果的总结。<br/>简单的回顾一下自己所学习的知识手工做过的内容,然后写出自己的感受和收获。同时,提出自己对于未来工作的想法和规划,其实也就是借着这样的一个..</td>
  137.     </tr>
  138.     <tr >
  139.         <td colspan="6" style="background-color: aquamarine;width:700px;height: 20px
  140. "></td>
  141.     </tr>
  142.     <tr >
  143.         <td colspan="6" style="background-color: lightblue; width:700px;height: 20px
  144. ">------联系方式------</td>
  146.     </tr>
  147.     <tr >
  148.         <td>联系电话：</td>
  149.         <td colspan="5">17787362833</td>
  151.     </tr>
  152.     <tr >
  153.         <td>联系手机：</td>
  154.         <td colspan="5">1766378433</td>
  156.     </tr>
  157.     <tr >
  158.         <td>电子邮箱：</td>
  159.         <td colspan="5">dsda@qq.com</td>
  161.     </tr>
  163. </table>
  169. </body>
  170. </html>

效果图展示

二.制作提交表单

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>Title</title>
  6. </head>
  7. <body>
  8. <div>
  9. <p>用户注册</p>
  10. <div>姓名：<input placeholder="输入姓名" type="text"></div>
  11. <div>密码：<input placeholder="填写密码" type="password" name="" value="" /></div>
  12. <div>年龄：<input placeholder="年龄"  type="text"></div>
  13. <div>生日：<input  type="month" name="" value="" /></div>
  14. <div>课程：<select >
  15.     <option value="volvo">Volvo</option>
  16.     <option value="saab">Saab</option>
  17.     <option value="opel">Opel</option>
  18.     <option value="audi">Audi</option>
  19.           </select></div>
  20. <div>爱好：<input type="checkbox" name="" value="篮球" />篮球
  21.           <input type="checkbox" name="" value="看电影" />看电影
  22.           <input type="checkbox" name="" value="敲代码" />敲代码
  23.           <input type="checkbox" name="" value="看美女" />看美女
  25. </div>
  26. <div>性别：<input type="radio" name="" value="男" />男<input type="radio" name="" value="男" />女</div>
  27. <div>简介：<textarea></textarea></div>
  28. <button>提交</button>
  29. </div>
  30. </body>
  31. </html>

效果展示

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
0 comments
Author's latest blog post