search

博客列表 >表格制作，运用了表格合并，多选，

表格制作，运用了表格合并，多选，

唯爱
唯爱原创
2020年08月10日 11:31:37401浏览
  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.   </head>
  8.   <style>
  9.     body {
  10.       background-color: rgb(8, 235, 159);
  11.     }
  12.     p {
  13.       text-align: center;
  14.       font-weight: bolder;
  15.     }
  16.     table {
  17.       margin: auto;
  18.     }
  19.     td {
  20.       width: 5em;
  21.       background-color: darkgrey;
  22.     }
  23.     th {
  24.       width: 5em;
  25.       background-color: chartreuse;
  26.       font-family: Arial, Helvetica, sans-serif;
  27.       font-size: 18px;
  28.     }
  29.     img {
  30.       width: 95px;
  31.       height: 115px;
  32.     }
  33.   </style>
  34.   <body>
  35.     <caption>
  36.       <p style="font-size: 30px;">个人信息填写</p>
  37.     </caption>
  38.     <div class="sf">
  39.       <table border="1">
  40.         <tr>
  41.           <th>姓名:</th>
  42.           <td><input type="text" /></td>
  43.           <th>性别:</th>
  44.           <td>
  45.             <!-- 双选择单选 -->
  46.             <input type="radio" name="xingbie" />男
  47.             <input type="radio" name="xingbie" />女
  48.           </td>
  49.           <th>出生年月:</th>
  50.           <td><input type="text" /></td>
  51.           <th rowspan="4">
  52.             <img src="image/微信图片_20200805093036.jpg" alt="" />
  53.           </th>
  54.           <!-- 向下合并四个单元格 -->
  55.         </tr>
  56.         <tr>
  57.           <th>年龄:</th>
  58.           <td><input type="text" /></td>
  59.           <th>家庭省份:</th>
  60.           <td>
  61.             <select name="shenfen">
  62.               <option value="ah">安徽省</option>
  63.               <option value="hb">河北省</option
  64.               ><option value="sx">山西省</option
  65.               ><option value="ll">辽宁省</option
  66.               ><option value="jl">吉林省</option
  67.               ><option value="hlj">黑龙江省</option
  68.               ><option value="js">江苏省</option
  69.               ><option value="zj">浙江省</option
  70.               ><option value="fj">福建省</option
  71.               ><option value="jx">江西省</option>
  72.               <option value="sd">山东省</option
  73.               ><option value="hn">河南省</option
  74.               ><option value="hb">湖北省</option
  75.               ><option value="hun">湖南省</option
  76.               ><option value="gd">广东省</option
  77.               ><option value="hen">海南省</option
  78.               ><option value="sc">四川省</option
  79.               ><option value="gz">贵州省</option
  80.               ><option value="yn">云南省</option
  81.               ><option value="shx">陕西省</option
  82.               ><option value="gs">甘肃省</option
  83.               ><option value="qh">青海省</option
  84.               ><option value="tw">台湾省</option>
  85.             </select>
  86.           </td>
  87.           <th>详细地址:</th>
  88.           <td><input type="text" /></td>
  89.         </tr>
  90.         <tr>
  91.           <th>名族：</th>
  92.           <td><input type="text" /></td>
  93.           <th>身高：</th>
  94.           <td><input type="text" /></td>
  95.           <th>体重：</th>
  96.           <td><input type="text" /></td>
  97.         </tr>
  98.         <tr>
  99.           <th>学历：</th>
  100.           <td><input type="text" /></td>
  101.           <th>毕业学校：</th>
  102.           <td><input type="text" /></td>
  103.           <th>专业：</th>
  104.           <td><input type="text" /></td>
  105.         </tr>
  106.         <tr>
  107.           <th colspan="7"><p>技能、特长</p></th>
  108.         </tr>
  109.         <tr>
  110.           <th>外语等级</th>
  111.           <td colspan="1">
  112.             <input type="radio" name="wy" />2 <input type="radio" name="wy" />4
  113.             <input type="radio" name="wy" />6 <input type="radio" name="wy" />8
  114.           </td>
  115.           <th>计算机</th>
  116.           <td colspan="1">
  117.             <input type="radio" name="jsj" />二级
  119.             <input type="radio" name="jsj" />四级
  120.           </td>
  121.           <th>工作经验</th>
  122.           <td colspan="2">
  123.             <input type="radio" name="jy" />无
  124.             <input type="radio" name="jy" />两年以下
  125.             <input type="radio" name="jy" />两年以上
  126.           </td>
  127.         </tr>
  128.         <tr>
  129.           <th colspan="7"><p>爱好：</p></th>
  130.         </tr>
  131.         <tr>
  132.           <td colspan="7">
  133.             <textarea name="text" id="" cols="140" rows="5"></textarea>
  134.           </td>
  135.         </tr>
  136.         <tr>
  137.           <th colspan="7"><p>联系方式：</p></th>
  138.         </tr>
  139.         <tr>
  140.           <th>QQ:</th>
  141.           <td colspan="2"></td>
  142.           <th>联系电话:</th>
  143.           <td colspan="3"></td>
  144.         </tr>
  145.         <tr>
  146.           <th>E-mail:</th>
  147.           <td colspan="2"></td>
  148.           <th>邮编:</th>
  149.           <td colspan="3"></td>
  150.         </tr>
  151.         <tr>
  152.           <th colspan="7"><p>自我评价</p></th>
  153.         </tr>
  154.         <tr>
  155.           <td colspan="7">
  156.             <textarea name="pj" cols="140" rows="20"></textarea>
  157.           </td>
  158.         </tr>
  159.       </table>
  160.     </div>
  161.   </body>
  162. </html>
上一条：VR全景H5插件操作指南对在这了！下一条：酱茄社区论坛商城小程序pro更新与WordPress小程序源码下载
声明：本文内容转载自脚本之家，由网友自发贡献，版权归原作者所有，如您发现涉嫌抄袭侵权，请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言，请遵守新闻评论服务协议