html中的表格属性以及合并操作

ops/2025/2/5 23:57:31/

表格用table定义,标签标题用caption标签定义;用tr定义表格的若干行;用td定义若干个单元格;(当单元格是表头时,用th标签定义)(th标签会略粗于td标签)

table的整体外观取决于属性,border:定义表格边框的粗细
width:定义表格的宽度
height:定义表格的宽度
cellspacing:定义表项间隙,i为像素数
cellpadding:定义表项内部空白,j为像素数

例子:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>表格示例</title>
</head>
<body><table><caption>班级名单</caption><tr><th>姓名</th><th>性别</th><th>专业</th></tr><tr><td>张三丰</td><td>男</td><td>大数据与信息处理技术</td></tr><tr><td>李四萍</td><td>女</td><td>软件工程</td></tr><tr><td>王五一</td><td>女</td><td>计算机科学与技术</td></tr></table><table border="1" cellspacing="10" cellpadding="20"><caption>班级名单</caption><tr><th>姓名</th><th>性别</th><th>专业</th></tr><tr><td>张三丰</td><td>男</td><td>大数据与信息处理技术</td></tr><tr><td>李四萍</td><td>女</td><td>软件工程</td></tr><tr><td>王五一</td><td>女</td><td>计算机科学与技术</td></tr></table>
</body>
</html>

跨行单元格:

 合并单元格:跨行单元格就是竖向合并,跨列单元格就是横向合并。在th标签当中,可以使用rowspan和colspan两个属性,分别表示单元格纵跨多少行和横跨多少列。

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>跨行跨列表格示例</title>
</head>
<body><table width="300" border="2"><tr><td colspan="3">课程成绩</td> <!-- 设置单元格水平跨 3 列 --></tr><tr><td rowspan="2">语文</td> <!-- 设置单元格垂直跨 2 行 --><td>期中</td><td>89</td></tr><tr><td>期末</td><td>92</td></tr><tr><td rowspan="2">英语</td> <!-- 设置单元格垂直跨 2 行 --><td>期中</td><td>95</td></tr><tr><td>期末</td><td>90</td></tr></table>
</body>
</html>

 用thead、tbody和tfooter标签实现表格分组

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>分组表格示例</title>
</head>
<body><table border="0" width="420"><!-- 设置表格宽度为 420px,无边框 --><caption>成绩汇总表</caption><thead style="background:#FAF0E6"><!-- 设置表格的页眉 --><tr><th>姓名</th><th>语文</th><th>数学</th><th>英语</th></tr></thead><!-- 表格页眉结束 --><tbody style="background:#FFFAF0"><!-- 设置表格主体 --><tr><td>张三丰</td><td>90</td><td>92</td><td>98</td></tr><tr><td>李四萍</td><td>96</td><td>100</td><td>90</td></tr><tr><td>王五一</td><td>93</td><td>97</td><td>97</td></tr></tbody><!-- 表格主体结束 --><tfoot style="background:#FAF0E6"><!-- 设置表格的数据页脚 --><tr><td>平均分数</td><td>93</td><td>96</td><td>95</td></tr></tfoot><!-- 表格页脚结束 --></table>
</body>
</html>

 用colgroup和col来调整列的格式

<!DOCTYPE html>
<html>
<head><meta charset="utf-8"><title>分组表格示例</title>
</head>
<body><table border="1"><colgroup><col width="150" style="background:#FFFAF0"><col width="100" style="background:#8d8d8d"><col width="200" style="background:#FFFAF0"></colgroup><tr><th>姓名</th><th>性别</th><th>专业</th></tr><tr><td>张三丰</td><td>男</td><td>大数据与信息处理技术</td></tr><tr><td>李四萍</td><td>女</td><td>软件工程</td></tr><tr><td>王五一</td><td>女</td><td>计算机科学与技术</td></tr></table>
</body>
</html>


http://www.ppmy.cn/ops/156001.html

相关文章

mac安装wireshark

mac启动wireshark时&#xff0c;提示没有权限抓包&#xff0c;报错内容如下&#xff1a; “The capture session could not be initiated on interface ‘en0’ (You don’t have permission to capture on that device). Please check to make sure you have sufficient perm…

Oracle日常管理(8)——OS日常管理(1)

8. Oracle日常管理 8.1. OS日常管理 8.1.1. OS系统日志 1)概念 服务器操作系统(OS)日常运行时,一般会生成系统日志并将其记录到相关文件中,这些日志会记录系统中一些重要配置、修改和报错等相关信息。运维人员、DBA或其他相关技术人员通过检查这些日志文件,可以对系统…

vscode+vue3+高得地图开发过过程中本地视频及地图json文件的发布问题

很久没发blog了&#xff0c;最近vscodevue3高得地图开发中&#xff0c;因为有开发的视频教程&#xff0c;还有地图的边界的.json文件&#xff0c;这些静态文件发布时&#xff0c;如果处理不当&#xff0c;build命令会将这些静态文件进行打包。打包后文件名变化了&#xff0c;这…

【单层神经网络】基于MXNet的线性回归实现(底层实现)

写在前面 刚开始先从普通的寻优算法开始&#xff0c;熟悉一下学习训练过程下面将使用梯度下降法寻优&#xff0c;但这大概只能是局部最优&#xff0c;它并不是一个十分优秀的寻优算法 整体流程 生成训练数据集&#xff08;实际工程中&#xff0c;需要从实际对象身上采集数据…

Node.js与嵌入式开发:打破界限的创新结合

文章目录 一、Node.js的本质与核心优势1.1 什么是Node.js?1.2 嵌入式开发的范式转变二、Node.js与嵌入式结合的四大技术路径2.1 硬件交互层2.2 物联网协议栈2.3 边缘计算架构2.4 轻量化运行时方案三、实战案例:智能农业监测系统3.1 硬件配置3.2 软件架构3.3 核心代码片段四、…

深入探究 Spring 中 FactoryBean 注册服务的实现与原理

深入探究 Spring 中 FactoryBean 注册服务的实现与原理 引言 在 Spring 框架里&#xff0c;FactoryBean 是一个强大且重要的特性。它允许开发者以一种更加灵活的方式来创建和管理 Bean 对象。FactoryBeanRegistrySupport 和 AbstractBeanFactory 这两个类在处理 FactoryBean …

vue3中el-input无法获得焦点的问题

文章目录 现象两次nextTick()加setTimeout()解决结论 现象 el-input被外层div包裹了&#xff0c;设置autofocus不起作用&#xff1a; <el-dialog v-model"visible" :title"title" :append-to-bodytrue width"50%"><el-form v-model&q…

C++滑动窗口技术深度解析:核心原理、高效实现与高阶应用实践

目录 一、滑动窗口的核心原理 二、滑动窗口的两种类型 1. 固定大小的窗口 2. 可变大小的窗口 三、实现细节与关键点 1. 窗口的初始化 2. 窗口的移动策略 3. 结果的更新时机 四、经典问题与代码示例 示例 1&#xff1a;和 ≥ target 的最短子数组&#xff08;可变窗口…