首页
零基础教程
分类浏览
编 程
Sentinel
Go语言
C语言
汇编语言
Android
Java工具库
Spring Cloud Alibaba
Spring Cloud
Spring Data
Spring Boot
Spring Batch
JSP/Servlet
Hadoop
Dubbo
J2Cache
Hibernate
OpenJPA
MyBatis
ShardingSphere
Freemarker
Thymeleaf
Activiti
POI
JMail
Log4j
LogBack
Dom4j
XML
RxJava
JasperReport
JUnit
JMock
Apache Commons
HttpComponents
CGLib
WebSocket
ESAPI
设计模式
前 端
CSS/CSS3
HTML5
JavaScript
JQuery
DHTMLX
浏览器
HTML
前端小知识
Vue.js
NodeJS
ECharts
Less
UmiJS
React
Ant Design
Bootstrap
uni-app
JS-XLSX
数据库
SQL
PL/SQL
MySQL
Oracle
Redis
SQLite
MongoDB
Zookeeper
H2
服务器
Podman
Prometheus
Tomcat
JBoss
RocketMQ
Docker
Nginx
RabbitMQ
其 他
程序员
Maven
SVN
Git
UML
Windows
办公软件
Axure
Jenkins
HTTP
macOS
Java
Spring
Linux
AI
代码片段
Get小技能
面试题
开发工具
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>HTML教程</title> <style> /* 全局样式重置,消除默认边距 */ * { margin: 0; padding: 0; box-sizing: border-box; } body { padding: 30px; font-family: "Microsoft YaHei", sans-serif; } /* 表格核心样式 */ table { border-collapse: collapse; /* 合并边框,消除双重边框 */ width: 800px; margin: 0 auto; /* 表格居中 */ border: 2px solid #2c3e50; /* 表格外层边框 */ } /* 表格标题样式 */ caption { font-size: 20px; font-weight: bold; color: #2c3e50; margin-bottom: 15px; text-align: center; } /* 表头、单元格通用样式 */ th, td { border: 1px solid #34495e; /* 单元格边框 */ padding: 12px 15px; /* 单元格内边距,避免内容拥挤 */ text-align: left; /* 文本左对齐,表头可单独调整 */ } /* 表头样式 */ thead th { background-color: #3498db; /* 表头背景色 */ color: white; /* 表头文字颜色 */ text-align: center; /* 表头文字居中 */ font-weight: bold; } /* 表主体样式 */ tbody th { background-color: #ecf0f1; /* 左侧描述列背景色 */ font-weight: normal; width: 120px; /* 固定左侧列宽度 */ } tbody td { background-color: #ffffff; } /* 页脚样式 */ tfoot td { background-color: #2c3e50; /* 页脚背景色 */ color: white; text-align: center; font-weight: bold; } /* 合并单元格后的内容居中优化 */ .merge-center { text-align: center; vertical-align: middle; } </style> </head> <body> <table> <!-- 表格标题:说明表格用途 --> <caption>个人信息登记表</caption> <!-- 表格头部:定义列标题 --> <thead> <tr> <th scope="col" colspan="4">个人信息汇总表</th> <!-- 跨列合并4列,作为总表头 --> </tr> <tr> <th scope="col">信息类别</th> <th scope="col">具体项</th> <th scope="col">详情内容</th> <th scope="col">备注</th> </tr> </thead> <!-- 表格页脚:汇总说明(无论书写位置,浏览器自动渲染在底部) --> <tfoot> <tr> <td colspan="4">本表信息仅供个人展示使用,请勿用于商业用途 | 更新日期:2025年10月</td> <!-- 跨列合并4列 --> </tr> </tfoot> <!-- 表格主体:核心个人信息数据 --> <tbody> <!-- 第一组:基本信息(跨行合并2行) --> <tr> <th rowspan="5" class="merge-center">基本信息</th> <!-- 跨行合并5行,对应5条基本信息 --> <td>姓名</td> <td>张三</td> <td rowspan="5" class="merge-center">本人免冠照</td> <!-- 跨行合并5行,对应照片位置 --> </tr> <tr> <td>性别</td> <td>男</td> </tr> <tr> <td>出生日期</td> <td>1995-06-18</td> </tr> <tr> <td>民族</td> <td>汉</td> </tr> <tr> <td>籍贯</td> <td>江苏省·南京市</td> </tr> <!-- 第二组:联系方式(跨列合并演示) --> <tr> <th rowspan="3" class="merge-center">联系方式</th> <td>手机号码</td> <td>138****1234</td> <td>常用联系方式</td> </tr> <tr> <td>电子邮箱</td> <td>zhangsan@example.com</td> <td>工作/学习专用</td> </tr> <tr> <td>通讯地址</td> <td colspan="2">北京市朝阳区XX小区XX号楼XX单元(跨列合并2列展示完整地址)</td> <!-- 跨列合并2列 --> </tr> <!-- 第三组:技能特长(混合合并演示) --> <tr> <th rowspan="2" class="merge-center">技能特长</th> <th scope="row" class="merge-center">专业技能</th> <td>编程开发</td> <td>HTML/CSS/JavaScript、Python</td> </tr> <tr> <th scope="row" class="merge-center">综合能力</th> <td colspan="2">团队协作、项目管理、英语口语流利(跨列合并2列)</td> <!-- 跨列合并2列 --> </tr> </tbody> </table> </body> </html>
在线代码编辑器
代码编辑区
自动执行
运行
选择模板
选择JS库
预览效果
清空
切换主题
字符数: 0
提示: 输入完整的HTML代码,包括<!DOCTYPE>和<html>标签
更多工具
Base64 加密/解密工具
JSON 格式化工具
密码随机生成工具
哈希值计算工具
时间戳转换工具
图片 & Base64 互转
HTTP 客户端
Websocket 客户端
选择模板
取消
选择库和版本
库
版本
文件
取消
已复制到剪贴板
关于
本网站专注于 Java、数据库(MySQL、Oracle)、Linux、软件架构及大数据等多领域技术知识分享。涵盖丰富的原创与精选技术文章,助力技术传播与交流。无论是技术新手渴望入门,还是资深开发者寻求进阶,这里都能为您提供深度见解与实用经验,让复杂编码变得轻松易懂,携手共赴技术提升新高度。如有侵权,请来信告知:hxstrive@outlook.com
链接
免责声明
隐私政策
其他应用
开源镜像网站
公众号
©2018-2020 hxstrive.com 版权所有 ICP证:
蜀ICP备14031461号-2
川公网安备51010802032098