关于 Table 表格那些三两事儿
-
实现下列表格样式，嵌套与form表单中提交信息，为了让自己的表格可以“ 随心所欲 ” 变换自己的形式，需要两个重要的
td属性colspan 列合并以及rowspan 行合并来实现，表格宽度是根据最大文字长度自动更改的 -
表格最终呈现
-
HTML code
-
<!DOCTYPE html> <!-- 如果需要将整个表格信息发送邮件，请将样式写于被控制元素行内控制 --> <html lang="en"> <head> <meta charset="UTF-8"> <title>form</title> </head> <body> <div style="max-width:800px;margin:0 auto;padding:30px;"> <form style="white-space:nowrap;text-align:center" enctype="multipart/form-data" method="POST" action=""> <label style="margin-left:20px">入职战区:</label> <input style="border:none;width:110px;outline:none;height:30px;padding:6px" name="testName219" type="text" size="30"> <label style="margin-left:106px">职位:</label> <input style="border:none;width:110px;outline:none;height:30px;padding:6px" name="testName189" type="text" size="30"> <label style="margin-left:50px">入职时间:</label> <input style="border:none;outline:none;height:30px;padding:6px;width:180px" name="testName190" type="text" size="30"> <table border="1" cellspacing="0"> <tr> <td>姓名:</td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName191" type="text" size="30"></td> <td><label>性别</label></td> <td><select name="testName192" style="border:none;outline:none"> <option selected="selected" value="">请选择</option> <option value="男">男</option><option value="女">女</option> </select></td> <td><label>籍贯</label></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName193" type="text" size="30"></td> </tr> <tr> <td><label>民族</label></td> <td> <input style="border:none;width:126px;outline:none;padding:6px" type="text" name="testName194" size="30"> </td> <td><label>最高文化程度</label></td> <td> <select name="testName195" style="border:none;outline:none"> <option selected="selected" value="">请选择</option> <option value="高中">高中</option> <option value="专科">专科</option> <option value="本科">本科</option> <option value="研究生">研究生</option> <option value="博士">博士</option> </select> </td> <td><label>婚姻情况</label></td> <td> <select name="testName196" style="border:none;outline:none"> <option selected="selected" value="">请选择</option> <option value="未婚">未婚</option> <option value="已婚">已婚</option> </select> </td> </tr> <tr> <td><label>身份证号码</label></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName197" type="text" size="30"></td> <td><label>联系电话:</label></td> <td colspan="2"><input style="border:none;width:126px;outline:none;padding:6px" name="testName198" type="text" size="30"></td> </tr> <tr> <td><label>户籍所在地</label></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName199" type="text" size="30"></td> <td><label>现居住地址</label></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName200" type="text" size="30"></td> </tr> <tr> <td><label>QQ\微信工作号</label></td> <td colspan="2"><input style="border:none;width:126px;outline:none;padding:6px" name="testName201" type="text" size="30"></td> <td><label>紧急联系人及电话</label></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName202" type="text" size="30"></td> </tr> <tr> <td rowspan="4"> <label>工作经验</label> </td> <td> <label>起止年月</label> </td> <td colspan="2"> <label>工作单位</label> </td> <td> <label>职位</label> </td> <td> <label>离职原因</label> </td> </tr> <tr> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName204" type="text" size="30"></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName205" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName206" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName207" type="text" size="30"></td> </tr> <tr> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName224" type="text" size="30"></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName225" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName226" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName227" type="text" size="30"></td> </tr> <tr> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName228" type="text" size="30"></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName229" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName230" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName231" type="text" size="30"></td> </tr> <tr> <td rowspan="4"> <label>教育培训经历</label> </td> <td> <label>起止年月</label> </td> <td> <label>教育培训机构</label> </td> <td> <label>专业</label> </td> <td> <label>外语程度</label> </td> <td> <label>证书</label> </td> </tr> <tr> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName209" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName210" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName211" type="text" size="30"></td> <td rowspan='3'> <select name="testName212" style="border:none;outline:none"> <option selected="selected" value="">请选择</o9tion> <option value="一般">一般</option> <option value="良好">良好</option> <option value="优秀">优秀</option> </select> </td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName213" type="text" size="30"></td> </tr> <tr> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName232" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName233" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName234" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName235" type="text" size="30"></td> </tr> <tr> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName236" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName237" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName238" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName239" type="text" size="30"></td> </tr> <tr> <td rowspan="4"> <label>家庭成员</label> </td> <td> <label>姓名</label> </td> <td colspan="2"> <label>工作单位</label> </td> <td> <label>职务</label> </td> <td> <label>电话</label> </td> </tr> <tr> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName215" type="text" size="30"></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName216" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName217" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName218" type="text" size="30"></td> </tr> <tr> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName240" type="text" size="30"></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName241" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName242" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName243" type="text" size="30"></td> </tr> <tr> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName244" type="text" size="30"></td> <td colspan="2"><input style="border:none;width:240px;outline:none;padding:6px" name="testName245" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName246" type="text" size="30"></td> <td><input style="border:none;width:126px;outline:none;padding:6px" name="testName247" type="text" size="30"></td> </tr> <tr> <td><label>填表人申明<label></td> <td colspan="5" align="left" style="padding-left:10px"> 1. ************************<br> 2. ************************<br> 3. ************************<br> <div> 申明人：<input style="border:none;width:126px;outline:none;padding:6px" name="testName221" type="text" size="30"></div> </td> </tr> <tr> <td rowspan="2"> <label>入职所需材料</label> </td> <td colspan="5"> <label> ******************************* </label> </td> </tr> <tr> <td colspan="5"><input style="width:100%" type="file" name="upload[]" multiple="multiple"></td> </tr> </table> <div style="margin-top:14px"><button style="width:100%;height:40px;border-radius:6px;border:none;background:#000;color:#fff;letter-spacing:2px;font-size:14px;" type="submit">点击提交</button></div> </form> </div> </body> </html>
