引言

  • 实现下列表格样式，嵌套与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>

关于 Table 表格那些三两事儿的更多相关文章

  1. java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）

    1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...

  2. 设置table表格的单元格间距两种方式

    table表格里设置单元格td之间的间距,通常用cellspacing设置单元格间距,有时候该属性可能无效,或需要用其他方式时,可用其他方式实现,例如在背景是白色背景的时候,设置单元格td的borde ...

  3. [转]CSS如何设置html table表格边框样式

    原文地址:http://www.divcss5.com/wenji/w503.shtml 对table设置css样式边框,分为几种情况: 1.只对table设置边框 2.对td设置边框 3.对tabl ...

  4. JS组件系列——Bootstrap Table 表格行拖拽（二：多行拖拽）

    前言:前天刚写了篇JS组件系列——Bootstrap Table 表格行拖拽,今天接到新的需要,需要在之前表格行拖拽的基础上能够同时拖拽选中的多行.博主用了半天时间研究了下,效果是出来了,但是感觉不尽 ...

  5. 用echartsjs 实现散点图与table表格双向交互，以及实现echarts取自于table数据，和自定义echarts提示内容

    本人研究echarts已经有一段时间了,今天就分享几个关于echarts的小技巧.虽然看起来简单,但做起来却很繁琐,不过实用性倒是很好. 在一个大的页面中,左边为table表格,右边为echarts的 ...

  6. MySQL+Service+Servlet+Jsp实现Table表格分页展示数据

    下面以一个示例讲解如何使用MySQL+Service+Servlet+Jsp实现Table表格分页展示数据: eg:请假管理系统 要求如下: 一.打开首页页面, 访问查询请假记录的 servlet , ...

  7. HTML 之 Table 表格详解

    HTML 之 Table 表格详解 HTML中的table可以大致分为三个部分: thead ---------表格的页眉 tbody ---------表格的主体 tfoot ---------定义 ...

  8. ElementUI的Table表格添加自定义头CheckBox多选框

    在ElmentUI的Table表格组件中,也许你会使用type为selection值的多选框功能,但是此时设置的label属性不生效,不能设置标题名称:有时候我们的需求就是要添加标题名称,那该如何处理 ...

  9. Vue + Element-ui实现后台管理系统(5)---封装一个Form表单组件和Table表格组件

    封装一个Form表单组件和Table组件 有关后台管理系统之前写过四遍博客,看这篇之前最好先看下这四篇博客.另外这里只展示关键部分代码,项目代码放在github上: mall-manage-syste ...

随机推荐

  1. leetcode-479-Largest Palindrome Product（找到两个乘数相乘得到的最大的回文数）

    题目描述: Find the largest palindrome made from the product of two n-digit numbers. Since the result cou ...

  2. 性能测试 vs 负载测试 vs 压力测试

    在做一些软件测试工作时,常常会被提及性能测试.负载测试.压力测试,这也是在软件测试方面最容易混淆的三个概念.之前和一个测试大牛聊天,他和我说常常面试一些测试人员会问一些这样的问题,大多人认为负载测试等 ...

  3. C# ListView用法详解 很完整

    一.ListView类 1.常用的基本属性: (1)FullRowSelect:设置是否行选择模式.(默认为false) 提示:只有在Details视图该属性才有意义. (2) GridLines:设 ...

  4. 解决织梦dedecms文档关键字(自动内链)php5.5以上失效的问题 urf-8版本的

    找到include/arc.archives.class 在里面需要修改两次地方 在1230行 // 这里可能会有错误 if (version_compare(PHP_VERSION, '5.5.0' ...

  5. [JZOJ6088] [BZOJ5376] [loj #2463]【2018集训队互测Day 1】完美的旅行【线性递推】【多项式】【FWT】

    Description Solution 我们考虑将问题一步步拆解 第一步求出\(F_{S,i}\)表示一次旅行按位与的值为S,走了i步的方案数. 第二步答案是\(F_{S,i}\)的二维重复卷积,记 ...

  6. 论文分享NO.4（by_xiaojian）

    论文分享第四期-2019.04.16 Residual Attention Network for Image Classification,CVPR 2017,RAN 核心:将注意力机制与ResNe ...

  7. Zynq-7000 FreeRTOS(二)中断：PL中断请求

    总结Zynq-7000的PL发送给PS一个中断请求,为FreeRTOS中断做准备. UG585的P225显示了系统的中断框图,如下图所示. 图:ZYNQ器件的中断框图 UG585的P227画出来中断控 ...

  8. springboot项目：登录 登录aop拦截 使用Redis与cookie 进行设置获取清除操作

    登录.登出: 第一步:在pom文件中引入依赖 <dependency> <groupId>org.springframework.boot</groupId> &l ...

  9. java调用svnkit工具类上传本地文件到svn服务器

    package org.jenkinsci.plugins.svn.upload.step; import java.io.*; import org.tmatesoft.svn.core.SVNCo ...

  10. 错误：‘lock_guard’ 在此作用域中尚未声明

    解决:修改报错文件,加入#include <boost/thread/lock_guard.hpp>