关于 Table 表格那些三两事儿

最新推荐文章于 2025-05-16 12:18:14 发布
转载 最新推荐文章于 2025-05-16 12:18:14 发布 · 190 阅读 · 0 ·
CC 4.0 BY-SA版权
原文链接：http://www.cnblogs.com/liwei-17/p/8988180.html

本文介绍了一个复杂的HTML表单设计案例，该表单用于收集个人详细信息、工作经验、教育培训经历等，通过使用colspan和rowspan属性实现了灵活的表格布局。

引言

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

     

转载于:https://www.cnblogs.com/liwei-17/p/8988180.html

de0708
关注
【Java程序员面试专栏 数据库】MySQL核心面试指引（三）：性能优化策略
MaoLin Tian's Blog
01-21 441
读写分离主要是为了将对数据库的读写操作分散到不同的数据库节点上。这样的话，就能够小幅提升写性能，大幅提升读性能一般情况下，我们都会选择一主多从，也就是一台主数据库负责写，其他的从数据库负责读。主库和从库之间会进行数据同步，以保证从库中数据的准确性。这样的架构实现起来比较简单，并且也符合系统的写少读多的特点分库分表是一种数据库架构优化策略，用于处理大型数据库系统中的数据和负载。随着数据量的增长和访问量的提升，单一数据库可能面临性能瓶颈、扩展限制和管理困难等问题。
.NET的那些事儿(9)——C# 2.0 中用iTextSharp制作PDF（基础篇）
薛敬明的专栏
07-14 1万+
该文主要介绍如何借助iTextSharp在C# 2.0中制作PDF文件，本文的架构大致按照iTextSharp的操作文档进行翻译，如果需要查看原文，请点击一下链接：http://itextsharp.sourceforge.net/tutorial/一、 iTextSharp的介绍和下载（1）用户可以浏览官网进行查看：http://itextsharp.sourceforge.net/in
数据库知识学习--DML操作(一)
每每看到代码，就会有亲切之感！
03-25 489
1.TABLE_payment_info_ext表中主键是id_TABLE_payment_info_ext，其中一列是 id_TABLE_payment_info；现在发现存在一个id_TABLE_payment_info对应多条信息的情况；需要删除其中多余的数据，以保证一个id_TABLE_payment_info对应一个id_TABLE_payment_info_ext，删除重复数据，sql
mysql table info_mysql的简单操作
weixin_35286433的博客
01-27 814
mac版打开mysql需要执行以下语句：<1>alias mysql=/usr/local/mysql/bin/mysql<2>mysqladmin=/usr/local/mysql/bin/mysqladmin<3>mysql -u root -p;<4>输入你的mysql密码；<5>在mysql命令行输入：show database...
table模块各个结构定义 及 iptables filter hook函数注册
sidemap的博客
12-04 369
1、iptables filter tables 首先看一下xt_table -> xt_table_info -> xt_entry -> ipt_entry / ipt_entry_match / ipt_standard_target ->ipt_entry_target / verdict之间的关系 涉及到的部分结构体 ///< include/l...
Oracle中tablesinfo_oracle table info
weixin_42382558的博客
12-23 266
--在删除一个表中的全部数据时，须使用TRUNCATE TABLE--因为用DROP TABLE，DELETE * FROM 表名时，TABLESPACE表空间该表的占用空间并未释放，反复几次DROP，DELETE操作后，该TABLESPACE上百兆的空间就被耗光了。--删除指定用户所有表的方法select 'Drop table '||table_name||';' from all_table...
LaTeX学习 | （16）关于表格的那些事儿
qq_40276310的博客
03-12 3307
目录 1.将Excel表格转化为Latex表格——采用Excel2LaTeX 2.How to center the table in Latex Latex: 使 tabular 居中 3.latex设置表格每一列的宽度、表格内容居中 综述 方法 效果 注释 4.LaTeX 使用longtable制作（跨页）长表格 4.1 如何制作长表格（超过一页） 遇到的问题 arydshln包和longtable包的冲突 longtable 小问题 5.latex表格线的加粗及合并两.
分布式存储 - 那些关于分布式DB的一二事儿
小工匠
11-23 4324
随着互联网业务规模的快速扩展，现代 IT 系统中数据存储的重要性日益凸显。数据量不断增加、并发访问频繁、存储需求升级，使得单一的存储设备难以满足现代系统的需求。分布式存储正是为了解决这些问题而诞生的一种存储架构。接下来我们详细介绍分布式存储的核心问题、技术实现以及 RAID 技术对其的启发，并探讨分布式存储在实际应用中的优势和实现策略。
关于MySQL的那些事儿01
weixin_41909719的博客
12-13 141
1.sql，DB，DBMS分别是什么？他们之间的关系？ DB DataBase:（数据库，数据库实际上在硬盘上以文件的形式存在） DBMS DataBase Management System（数据库管理系统，常见的有：MySQL Oracle DB2 Sybase SqlServer…） SQL 结构化查询语言，是一门标准通用的语言。标准的sql适合于所有的数据库产品。 SQL属于高级语言。只要能看懂英语单词的，写出来的sql语句，可以读懂什么意思。 SQL语句在执行的时候，实际上内部
关于mysql中explain的那些事儿
探索丶挑战丶突破
06-25 200
  explain语法 有两种用法： 1.EXPLAIN tbl_name 2.EXPLAIN [EXTENDED] SELECT select_options 为了更好的说明它，我们需要建两张表，下面的语句用于创建一张测试用的订单表：   CREATE TABLE `t_order` (   `order_id` int(10) unsigned NOT NULL AUTO_I...
关于HTML5那些事儿2
qq_34339630的博客
08-17 460
HTML5 Input 类型 浏览器支持 Input type IE Firefox Opera Chrome Safari email No 4.0 9.0 10.0 No url No 4.0 9.0
PyQt5之表格控件QTableWidget使用详解 - 创建、布局、设置表格高度、宽度、表头等各种样式及表格数据的填写与改动的接收
热门推荐
qq_58168857的博客
10-15 1万+
本文通过实例列举了QTableWidget的常用功能与设置方法，包括设置表格样式（表头、宽、高、颜色、冻结行列和数据的填充，增、删、改查等常用数据操作，实现一文基本解决QTableWidget的所有问题，建议先收藏，再慢慢看，遇到项目难题可进行备查。
解决Word表格文字上方空白无法编辑问题的深度解析
mmoo_python的博客
05-16 3525
优先使用基础设置修复法（成功率约65%）复杂场景采用段落格式重置术（成功率约30%）极端情况使用VBA宏处理（成功率约5%）日常使用中应建立"设置-样式-模板"三级防护体系，从源头减少格式异常的发生。对于专业文档处理人员，建议深入学习Word的Open XML架构，这将成为解决复杂排版问题的终极武器。通过系统化的解决方案和预防策略，您将不再受制于Word的排版陷阱，真正实现文档编辑的"所想即所得"。
【开发者亲历】：OpenDWG Toolkit与DWG文件的那些事儿
!... # 摘要 本文旨在全面介绍DWG文件格式及其在OpenDWG Toolkit中的应用。...第三章展示如何使用OpenDWG Toolkit进行基本的文件读写操作，以及安装、配置和API概览。第四章探讨了工具包的高级功能，包括AP
语音分离基于平均谐波结构建模的无监督单声道音乐声源分离（Matlab代码实现）
01-01
【语音分离】基于平均谐波结构建模的无监督单声道音乐声源分离（Matlab代码实现）内容概要：本文介绍了基于平均谐波结构建模的无监督单声道音乐声源分离方法，并提供了相应的Matlab代码实现。该方法通过对音乐信号中的谐波结构进行建模，利用音源间的频率特征差异，实现对混合音频中不同乐器或人声成分的有效分离。整个过程无需标注数据，属于无监督学习范畴，适用于单通道录音场景下的语音与音乐分离任务。文中强调了算法的可复现性，并附带完整的仿真资源链接，便于读者学习与验证。; 适合人群：具备一定信号处理基础和Matlab编程能力的高校学生、科研人员及从事音频处理、语音识别等相关领域的工程师；尤其适合希望深入理解声源分离原理并进行算法仿真实践的研究者。; 使用场景及目标：①用于音乐音频中人声与伴奏的分离，或不同乐器之间的分离；②支持无监督条件下的语音处理研究，推动盲源分离技术的发展；③作为学术论文复现、课程项目开发或科研原型验证的技术参考。; 阅读建议：建议读者结合提供的Matlab代码与网盘资料同步运行调试，重点关注谐波建模与频谱分解的实现细节，同时可扩展学习盲源分离中的其他方法如独立成分分析（ICA）或非负矩阵分解（NMF），以加深对音频信号分离机制的理解。
python餐厅点餐系统（代码+数据库+LW）
01-01
摘 要 如今社会上各行各业，都喜欢用自己行业的专属软件工作，互联网发展到这个时候，人们已经发现离不开了互联网。新技术的产生，往往能解决一些老技术的弊端问题。因为传统餐厅点餐信息管理难度大，容错率低，管理人员处理数据费工费时，所以专门为解决这个难题开发了一个餐厅点餐系统，可以解决许多问题。 餐厅点餐系统实现的功能包括菜品类型管理，菜品信息管理，轮播图管理以及对已完成，未支付，已取消，已支付，已退款等状态的订单进行管理等功能。该系统采用了Mysql数据库，Python语言等技术进行编程实现。 餐厅点餐系统可以提高餐厅点餐信息管理问题的解决效率，优化餐厅点餐信息处理流程，保证餐厅点餐信息数据的安全，它是一个非常可靠，非常安全的应用程序。 关键词：餐厅点餐系统；Mysql数据库；Python语言
【智能汽车技术】基于线控与域控的智能底盘系统架构：新能源汽车滑板底盘创新形态及实车测试验证
01-01
内容概要：本文系统介绍了新能源汽车领域智能底盘技术的发展背景、演进历程、核心技术架构及创新形态。文章指出智能底盘作为智能汽车的核心执行层，通过线控化（X-By-Wire）和域控化实现驱动、制动、转向、悬架的精准主动控制，支撑高阶智能驾驶落地。技术发展历经机械、机电混合到智能三个阶段，当前以线控转向、线控制动、域控制器等为核心，并辅以传感器、车规级芯片、功能安全等配套技术。文中还重点探讨了“智能滑板底盘”这一创新形态，强调其高度集成化、模块化优势及其在成本、灵活性、空间利用等方面的潜力。最后通过“2025智能底盘先锋计划”的实车测试案例，展示了智能底盘在真实场景中的安全与性能表现，推动技术从研发走向市场验证。; 适合人群：汽车电子工程师、智能汽车研发人员、新能源汽车领域技术人员及对智能底盘技术感兴趣的从业者；具备一定汽车工程或控制系统基础知识的专业人士。; 使用场景及目标：①深入了解智能底盘的技术演进路径与系统架构；②掌握线控技术、域控制器、滑板底盘等关键技术原理与应用场景；③为智能汽车底盘研发、系统集成与技术创新提供理论支持与实践参考。; 阅读建议：建议结合实际车型和技术标准进行延伸学习，关注政策导向与行业测试动态，注重理论与实车验证相结合，全面理解智能底盘从技术构想到商业化落地的全过程。
【顶级EI复现】计及连锁故障传播路径的电力系统 N-k 多阶段双层优化及故障场景筛选模型（Matlab代码实现）
最新发布
01-01
【顶级EI复现】计及连锁故障传播路径的电力系统 N-k 多阶段双层优化及故障场景筛选模型（Matlab代码实现）内容概要：本文介绍了名为《【顶级EI复现】计及连锁故障传播路径的电力系统 N-k 多阶段双层优化及故障场景筛选模型（Matlab代码实现）》的技术资源，重点围绕电力系统中连锁故障的传播路径展开研究，提出了一种N-k多阶段双层优化模型，并结合故障场景筛选方法，用于提升电力系统在复杂故障条件下的安全性与鲁棒性。该模型通过Matlab代码实现，具备较强的工程应用价值和学术参考意义，适用于电力系统风险评估、脆弱性分析及预防控制策略设计等场景。文中还列举了大量相关的科研技术支持方向，涵盖智能优化算法、机器学习、路径规划、信号处理、电力系统管理等多个领域，展示了广泛的仿真与复现能力。; 适合人群：具备电力系统、自动化、电气工程等相关背景，熟悉Matlab编程，有一定科研基础的研究生、高校教师及工程技术人员。; 使用场景及目标：①用于电力系统连锁故障建模与风险评估研究；②支撑高水平论文（如EI/SCI）的模型复现与算法验证；③为电网安全分析、故障传播防控提供优化决策工具；④结合YALMIP等工具进行数学规划求解，提升科研效率。; 阅读建议：建议读者结合提供的网盘资源，下载完整代码与案例进行实践操作，重点关注双层优化结构与场景筛选逻辑的设计思路，同时可参考文档中提及的其他复现案例拓展研究视野。
实现table表格内容上下移动的三种技术方法
本文将介绍三种实现table表格内容上下移动的方法。 ### 1. 使用CSS3动画 第一种方法利用CSS3的动画（Animation）功能来实现表格内容的上下移动。这种方法的优点是实现简单，动画效果流畅，而且不需要额外的...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符  | 博主筛选后可见
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值