学习使用了html中的teble标签制作表格

用的标签是<teble> </teble>标签 <tr></tr>标签 <td></td>标签 <div></div> 标签等等

  1. html
  2. <head>
  3. <meta charset="utf-8">
  4. <title>HTML标签作业之table</title>
  5.     <style>
  6.         .jiben {
  7.         height: 40px;
  8.         border-color: blanchedalmond;
  9.         border-bottom: aqua;
  10.         text-align: center;
  11.         }
  12.         .work{
  13.         color: chartreuse;
  14.         font-size: 18px;
  15.         }
  16.     </style>
  17. </head>
  18. <body>
  19. <table border="4" cellspacing="1" width="600px">
  20. <!-- cellspacing是单元格之间的距离 -->
  21.     <tr>
  22.         <td align="center" colspan="6" bgcolor="aquamarine">
  23.         <a href="" >这里是需要用到表格的背景色</a>
  24.         </td>
  25.     </tr>
  26.     <tr class="jiben">
  27.         <td colspan="6"> <font size="25" color="crimson">—My基本资料—</font></td>
  28.     </tr>
  29.     <tr class="jiben" style="color: brown;">
  30.         <td>姓名：</td>
  31.         <td>性别：</td>
  32.         <td>年龄：</td>
  33.         <td>身高：</td>
  34.         <td>籍贯：</td>
  35.         <td>出生日期：</td>
  37.     </tr>
  38.     <tr class="jiben">
  39.         <td>张三疯</td>
  40.         <td>男</td>
  41.         <td>99</td>
  42.         <td>180CM</td>
  43.         <td>中国XXXXX</td>
  44.         <td>19XXXX年1月1日</td>
  45.     </tr>
  46.     <tr>
  47.         <td colspan="2" style="color: brown;">毕业院校：</td>
  48.         <td colspan="4">中国XXX大学</td>
  49.     </tr>
  50.     <tr>
  51.         <td colspan="2" style="color: brown;">主修专业</td>
  52.         <td colspan="4">太极拳</td>
  53.     </tr>
  54.     <tr>
  55.         <td colspan="2" style="color: brown;">工作经验</td>
  56.         <td>10年</td>
  57.         <td colspan="2" style="color: brown;">期望年薪</td>
  58.         <td>100W</td>
  59.     </tr>
  60.     <tr>
  61.         <td colspan="2" style="color: brown;">有效证件</td>
  62.         <td>身份证</td>
  63.         <td colspan="2" style="color: brown;">证件号码</td>
  64.         <td>31010**1234</td>
  65.     </tr>
  66.     <tr>
  67.         <td colspan="6" bgcolor="aquamarine" align="center">
  68.         <a href="">这里是需要用到表格的背景色</a>
  69.         </td>
  70.     </tr>
  72. </table>
  73. <hr/>
  75. <table border="6" cellspacing="0" width="600px">
  77.     <tr>
  78.         <td align="center" colspan="6" bgcolor="coral">
  79.         <a href="" >这里是用另外一个table做的</a>
  80.         </td>
  81.     </tr>
  82.     <tr class="jiben">
  83.         <td colspan="4"> <font size="25" color="crimson">—求职意向—</font></td>
  84.         </tr>
  85.         <tr class="jiben" style="color: brown;">
  86.         <td colspan="2" >寻求职位：</td>
  87.         <td colspan="2">会打太极拳</td>
  91.     </tr>
  92.     <tr class="jiben">
  93.         <td >上班地点</td>
  94.         <td>北京</td>
  95.         <td>薪资待遇</td>
  96.         <td>年薪制</td>
  98.     </tr>
  99.     <tr>
  100.         <td style="color: brown;">自我评价：</td>
  101.         <td colspan="3">我会打太极拳我会打太极拳我会打太极拳
  102.         我会打太极拳我会打太极拳我会打太极拳
  103.         </td>
  104.     </tr>
  106.     <tr>
  107.         <td colspan="4" bgcolor="bisque" align="center">
  108.         <a href="">这里是需要用到表格的背景色</a>
  109.         </td>
  110.     </tr>
  111.     <tr>
  112.         <td>教育经历</td>
  113.     </tr>
  114.     <tr>
  115.         <td>教育时间</td>
  116.         <td>就读院校</td>
  117.         <td>专业</td>
  118.         <td>学历</td>
  119.     </tr>
  120.     <tr>
  121.         <td>19XX年-19XX年</td>
  122.         <td>北洋船政</td>
  123.         <td>水手</td>
  124.         <td>舵手</td>
  125.     </tr>
  127.     <tr>
  128.         <td colspan="4" bgcolor="chartreuse" align="center"><a href="" style="color: cornflowerblue;">这里是工作经历</a></td>
  129.     </tr>
  130.     <tr class="work">
  131.         <td>就职公司</td>
  132.         <td>中国邮政</td>
  133.         <td>所属行业</td>
  134.         <td>快递</td>
  135.     </tr>
  136.     <tr class="work">
  137.         <td>就职时间</td>
  138.         <td>2XXX年</td>
  139.         <td>就职岗位</td>
  140.         <td>司机</td>
  141.     </tr>
  142.     <tr class="work">
  143.         <td>公司性质</td>
  144.         <td>物流</td>
  145.         <td>就职部门</td>
  146.         <td>审核员</td>
  147.     </tr>
  148.     <tr>
  149.         <td>
  150.         <strong>工作情况</strong>
  151.         <h6>右侧是文本框</h6>
  152.         </td>
  153.         <td colspan="3">
  154.         <textarea rows="10" cols="50">工作期间认真负责，具有团队协作精神，吃苦耐劳，工作期间认真负责，具有团队协作精神，吃苦耐劳，工作期间认真负责，具有团队协作精神，吃苦耐劳，工作期间认真负责，具有团队协作精神，吃苦耐劳，工作期间认真负责，具有团队协作精神，吃苦耐劳，工作期间认真负责，具有团队协作精神，吃苦耐劳，工作期间认真负责，具有团队协作精神，吃苦耐劳，工作期间认真负责，具有团队协作精神，吃苦耐劳，</textarea>
  155.         </td>
  156.     </tr>
  157.     <tr class="work">
  158.         <td>联系电话</td>
  159.         <td>1895XXXXX555</td>
  160.         <td>电子邮箱</td>
  161.         <td>12XXX3@qq.com</td>
  162.     </tr>
  164. </table>
  165. <hr >
  166. <h4>用户注册或者登录</h4>
  167.     <form action="reg" method="post">
  168.         <div id=" 1">
  169.         用户名：<input type="text" name="user_name" id="" value="" placeholder="只能使用字母作为用户名" />
  170.         </div>
  171.         <div id="2">
  172.         密码区：<input type="password" name="pass_wd" id="" value="" placeholder="长度大于8位的数字和字母的组合"/>
  173.         </div>
  174.         <div id="3">
  175.         邮箱号：<input type="email" name="e_mail" id="" value="@qq.com" />
  176.         </div>
  177.         <div id="4">
  178.         你多大：<input type="number" name="age" id="" value="" placeholder="必须是大于18岁"/>
  179.         </div>
  180.         <div id="5">
  181.         过生日：<input type="date" name="shengri" id="" value="" />
  182.         </div>
  183.         <div id="6">
  184.         喜好：
  185.             <input type="checkbox" name="" id="" value=""/><label for="">跑步</label>
  186.             <input type="checkbox" name="" id="" value=""/><label for="">游泳</label>
  187.             <input type="checkbox" name="" id="" value=""/><label for="">瑜伽</label>
  190.         </div>
  191.     <div id="7">
  192.         选择课程：
  193.         <select name="选择课程：">
  194.         <option value="">体育</option>
  195.         <option value="">舞蹈</option>
  196.         <option value="">美术</option>
  197.         </select>
  199.     </div>
  200.     <div id="8">
  201.         性别：<input type="radio" name="" id="" value="" checked=""/><label for="">男</label>
  202.         <input type="radio" name="" id="" value=""/><label for="">女</label>
  203.         <input type="radio" name="" id="" value=""/><label for="">保密</label>
  204.     </div>
  205.     <!-- <input type="submit" value="登录"/> -->
  206.     <br>
  207.         <button type="button">登录</button>
  208.         <input type="submit" value="注册"/>
  209.     </form>
  210. </body>

更多相关文章

  1. 使用伸缩盒标签制作一个首页的二级分类
  2. HTML标签作业之table-lesson02
  3. 1109课程作业
  4. 标签切换、轮播图及购物车小案例相关知识总结
  5. 2021.11.9 作业
  6. 2021年11月9日作业1
  7. 我的第一个作业
  8. 1109标签练习
  9. 前端基础，HTML5常用标签学习总结

随机推荐

  1. Java操作数据库之jdbc【原生方式】
  2. java数据结构--链表
  3. 读阿里巴巴Java开发手册v1.2.0之工程结构
  4. Ubuntu12 64位 阿里云服务器端配置mysql+
  5. 记一次java内存分析
  6. 【java开发系列】—— struts2简单入门示
  7. 被老板 "宠着" 是好是坏？？？
  8. Java使用Velocity模板发送HTML格式邮件并
  9. 浅析java中equals与==的用法
  10. Java se之静态代码块、代码块、构造函数