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

news2025/2/6 4:40:22

表格用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.coloradmin.cn/o/2293583.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

html的字符实体和颜色表示

在HTML中&#xff0c;颜色可以通过以下几种方式表示&#xff0c;以下是具体的示例&#xff1a; 1. 十六进制颜色代码 十六进制颜色代码以#开头&#xff0c;后面跟随6个字符&#xff0c;每两个字符分别表示红色、绿色和蓝色的强度。例如&#xff1a; • #FF0000&#xff1a;纯红…

unordered_map/set的哈希封装

【C笔记】unordered_map/set的哈希封装 &#x1f525;个人主页&#xff1a;大白的编程日记 &#x1f525;专栏&#xff1a;C笔记 文章目录 【C笔记】unordered_map/set的哈希封装前言一. 源码及框架分析二.迭代器三.operator[]四.使用哈希表封装unordered_map/set后言 前言 哈…

idea中git的简单使用

提交&#xff0c;推送直接合并 合到哪个分支就到先切到哪个分支

Fastdds学习分享_xtpes_发布订阅模式及rpc模式

在之前的博客中我们介绍了dds的大致功能&#xff0c;与组成结构。本篇博文主要介绍的是xtypes.分为理论和实际运用两部分.理论主要用于梳理hzy大佬的知识&#xff0c;对于某些一带而过的部分作出更为详细的阐释&#xff0c;并在之后通过实际案例便于理解。案例分为普通发布订阅…

开发板上Qt运行的环境变量的三条设置语句的详解

在终端中运行下面三句命令用于配置开发板上Qt运行的环境变量&#xff1a; export QT_QPA_GENERIC_PLUGINStslib:/dev/input/event1 export QT_QPA_PLATFORMlinuxfb:fb/dev/fb0 export QT_QPA_FONTDIR/usr/lib/fonts/设置成功后可以用下面的语句检查设置成功没有 echo $QT_QPA…

语言月赛 202412【顽强拼搏奖的四种发法】题解(AC)

》》》点我查看「视频」详解》》》 [语言月赛 202412] 顽强拼搏奖的四种发法 题目描述 在 XCPC 竞赛里&#xff0c;会有若干道题目&#xff0c;一支队伍可以对每道题目提交若干次。我们称一支队伍对一道题目的一次提交是有效的&#xff0c;当且仅当&#xff1a; 在本次提交…

自定义数据集 使用scikit-learn中svm的包实现svm分类

引入必要的库 import numpy as np from sklearn.datasets import make_classification from sklearn.model_selection import train_test_split from sklearn.svm import SVC from sklearn.metrics import accuracy_score, classification_report 生成自定义数据集 X, y ma…

有用的sql链接

『SQL』常考面试题&#xff08;2——窗口函数&#xff09;_sql的窗口函数面试题-CSDN博客 史上最强sql计算用户次日留存率详解&#xff08;通用版&#xff09;及相关常用函数 -2020.06.10 - 知乎 (zhihu.com) 1280. 学生们参加各科测试的次数 - 力扣&#xff08;LeetCode&…

【Numpy核心编程攻略:Python数据处理、分析详解与科学计算】2.27 NumPy+Pandas:高性能数据处理的黄金组合

2.27 NumPyPandas&#xff1a;高性能数据处理的黄金组合 目录 #mermaid-svg-x3ndEE4hrhO6WR6H {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-x3ndEE4hrhO6WR6H .error-icon{fill:#552222;}#mermaid-svg-x3ndEE4hr…

第一个3D程序!

运行效果 CPP #include <iostream> #include <fstream> #include <string> #include <cmath>#include <GL/glew.h> #include <GLFW/glfw3.h> #include <glm/glm.hpp> #include <glm/gtc/type_ptr.hpp> #include <glm/gtc/…

NeuralCF 模型:神经网络协同过滤模型

实验和完整代码 完整代码实现和jupyter运行&#xff1a;https://github.com/Myolive-Lin/RecSys--deep-learning-recommendation-system/tree/main 引言 NeuralCF 模型由新加坡国立大学研究人员于 2017 年提出&#xff0c;其核心思想在于将传统协同过滤方法与深度学习技术相结…

第二十三章 MySQL锁之表锁

目录 一、概述 二、语法 三、特点 一、概述 表级锁&#xff0c;每次操作锁住整张表。锁定粒度大&#xff0c;发生锁冲突的概率最高&#xff0c;并发度最低。应用在MyISAM、InnoDB、BDB等存储引擎中。 对于表级锁&#xff0c;主要分为以下三类&#xff1a; 1. 表锁 2. 元数…

【Uniapp-Vue3】获取用户状态栏高度和胶囊按钮高度

在项目目录下创建一个utils文件&#xff0c;并在里面创建一个system.js文件。 在system.js中配置如下代码&#xff1a; const SYSTEM_INFO uni.getSystemInfoAsync();// 返回状态栏高度 export const getStatusBarHeight ()> SYSTEM_INFO.statusBarHeight || 15;// 返回胶…

通向AGI之路:人工通用智能的技术演进与人类未来

文章目录 引言:当机器开始思考一、AGI的本质定义与技术演进1.1 从专用到通用:智能形态的范式转移1.2 AGI发展路线图二、突破AGI的五大技术路径2.1 神经符号整合(Neuro-Symbolic AI)2.2 世界模型架构(World Models)2.3 具身认知理论(Embodied Cognition)三、AGI安全:价…

将ollama迁移到其他盘(eg:F盘)

文章目录 1.迁移ollama的安装目录2.修改环境变量3.验证 背景&#xff1a;在windows操作系统中进行操作 相关阅读 &#xff1a;本地部署deepseek模型步骤 1.迁移ollama的安装目录 因为ollama默认安装在C盘&#xff0c;所以只能安装好之后再进行手动迁移位置。 # 1.迁移Ollama可…

Java自定义IO密集型和CPU密集型线程池

文章目录 前言线程池各类场景描述常见场景案例设计思路公共类自定义工厂类-MyThreadFactory自定义拒绝策略-RejectedExecutionHandlerFactory自定义阻塞队列-TaskQueue&#xff08;实现 核心线程->最大线程数->队列&#xff09; 场景1&#xff1a;CPU密集型场景思路&…

使用开源项目:pdf2docx,让PDF转换为Word

目录 1.安装python 2.安装 pdf2docx 3.使用 pdf2docx 转换 PDF 到 Word pdf2docx&#xff1a;GitCode - 全球开发者的开源社区,开源代码托管平台 环境&#xff1a;windows电脑 1.安装python Download Python | Python.org 最好下载3.8以上的版本 安装时记得选择上&#…

蓝桥杯思维训练营(四)

文章目录 小红打怪494.目标和 小红打怪 小红打怪 思路分析&#xff1a;可以看到ai的范围较大&#xff0c;如果我们直接一个个进行暴力遍历的话&#xff0c;会超时。当我们的攻击的次数越大的时候&#xff0c;怪物的血量就会越少&#xff0c;这里就有一个单调的规律在里面&…

尝试把clang-tidy集成到AWTK项目

前言 项目经过一段时间的耕耘终于进入了团队开发阶段&#xff0c;期间出现了很多问题&#xff0c;其中一个就是开会讨论团队的代码风格规范&#xff0c;目前项目代码风格比较混乱&#xff0c;有的模块是驼峰&#xff0c;有的模块是匈牙利&#xff0c;后面经过讨论&#xff0c;…

【学习笔记】深度学习网络-正则化方法

作者选择了由 Ian Goodfellow、Yoshua Bengio 和 Aaron Courville 三位大佬撰写的《Deep Learning》(人工智能领域的经典教程&#xff0c;深度学习领域研究生必读教材),开始深度学习领域学习&#xff0c;深入全面的理解深度学习的理论知识。 在之前的文章中介绍了深度学习中用…