HTML--表格

表格的基本结构

表格标题:caption
表格:table标签
行: tr标签
单元格:td标签

语法:

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
</head>
<body>
    <table>
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td></td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不详</td>
        </tr>
    </table>

</body>
</html>

效果:
在这里插入图片描述
扩展:这样搞出来的没有表格的线,如何添加线呢?

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        table,tr,td{border: 2px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>这是表格的标题</caption>
        <tr>
            <td>姓名</td>
            <td>性别</td>
        </tr>
        <tr>
            <td>小黑</td>
            <td></td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不详</td>
        </tr>
    </table>

</body>
</html>

效果:
在这里插入图片描述

表头 th

上面我强行加了表头 姓名、性别
下面是更加规范的写法:

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style type="text/css">
        table,tr,td,th{border: 2px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>这是表格的标题</caption>
        <tr>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        <tr>
            <td>小黑</td>
            <td></td>
        </tr>
        <tr>
            <td>小白</td>
            <td>不详</td>
        </tr>
    </table>

</body>
</html>

效果:
可以看到表头会是黑色加粗字体
在这里插入图片描述
语义化,下面这几个从显示效果来看是没啥用的,但是会让代码更具逻辑性,更好看

表头 thread
表身 tbody
表脚 tfoot

范例:

<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        table,tr,td,th{border: 2px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>这是表格的标题</caption>
        <thead>
        <tr>
            <th>姓名</th>
            <th>性别</th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>小黑</td>
            <td></td>
        </tr>
        </tbody>
        <tfoot>
        <tr>
            <td>小白</td>
            <td>不详</td>
        </tr>
        </tfoot>
    </table>

</body>
</html>

合并行 rawspan

语法:

<td colspan="跨域的行数"></td>
<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        table,tr,td,th{border: 2px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>这是表格的标题</caption>
        <!--表头-->
        <thead>
        <tr>
            <th>测项</th>
            <th>结果</th>
        </tr>
        </thead>
        <!--表身-->
        <tbody>
        <tr>
            <td rowspan="3">IOPS</td>
            <td>1888</td>
        </tr>
        <tr>
            <td>18888</td>
        </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
        <tr>
            <td>8888</td>
            <td>22222</td>
        </tr>
        </tfoot>
    </table>

</body>
</html>

效果:
在这里插入图片描述

可以看到IOPS只占用了两行,我设定rowspan=“3”,因为表身只有两行数据,因此IOPS并未占据到三行,只占用了两行。
所以表头,表身,表脚的用处再次体现,假如没有添加表头等,这里表现就会有偏差。

合并列: colspan

语法:

<td colspan="跨域的列数"></td>
<!DOCTYPE html>
<html>
<head> 
    <title>这是一个标题</title>
    <meta charset="utf-8"/>
    <style>
        table,tr,td,th{border: 2px solid silver;}
    </style>
</head>
<body>
    <table>
        <caption>这是表格的标题</caption>
        <!--表头-->
        <thead>
        <tr>
            <td colspan="2">测试结果</td>
            <td>哈哈</td>
        </tr>
        </thead>
        <!--表身-->
        <tbody>
        <tr>
            <td rowspan="3">IOPS</td>
            <td>1888</td>
        </tr>
        <tr>
            <td>18888</td>
        </tr>
        </tbody>
        <!--表脚-->
        <tfoot>
        <tr>
            <td>8888</td>
            <td>22222</td>
        </tr>
        </tfoot>
    </table>
</body>
</html>

效果:
在这里插入图片描述
可以看到 测试结果这里占用了两列,"哈哈"从第三列开始

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/318327.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Nacos服务注册或发现、Nacos服务分级模型、Nacos负载均衡策略、加权负载均衡、Nacos环境隔离

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 前言一、nacos服务搭建&#xff0c;nacos服务注册或发现二、Nacos服务分级模型三、Nacos负载均衡策略四、Nacos注册中心&#xff08;nacos控制台配置&#xff09;-加…

初识Spring

1.Spring官网&#xff1a; 2.官网学习的顺序&#xff1a;先学Spring,再学SpringBoot,然后SpringCloud,Spring Cloud Data Flow。 3.Spring Framework界面&#xff1a; 4.github上的源代码&#xff1a; 5.进入使用说明文档&#xff1a; 主要是根据这个进行学习的。 6.我们用mave…

Vue2.脚手架

全局安装&#xff1a;npm i vue/cli -g检查是否成功安装&#xff1a;vue --version新建项目&#xff1a;vue create 项目名 通过nodejs安装的时候&#xff0c;可以直接代理和仓库&#xff0c;~/.npmrc文件内容如下&#xff1a; proxysocks5://127.0.0.1:7897 registryhttps:/…

QT周五作业

题目&#xff1a;实现简单水果的价格重量计算 点击一次水果重量1 自动计算总价 代码&#xff1a; widget.h #ifndef WIDGET_H #define WIDGET_H#include <QWidget> #include <QListWidgetItem> QT_BEGIN_NAMESPACE namespace Ui { class Widget; } QT_END_NAME…

未来科技五年人工智能行业产业发展趋势最新竞争力

人工智能&#xff08;Artificial Intelligence&#xff0c;AI&#xff09;是近年来快速发展的热门领域&#xff0c;被广泛应用于各个行业。随着技术的不断创新和突破&#xff0c;人工智能行业的竞争力也在不断提升。本文将分析未来科技五年人工智能行业产业发展趋势&#xff0c…

“一键倒放,创意无限!让视频剪辑成为艺术“

你是否厌倦了常规的视频播放方式&#xff0c;想要寻找一种全新的、与众不同的方式来呈现你的视频内容&#xff1f;现在&#xff0c;我们为你带来一个革命性的工具&#xff0c;让你轻松实现视频批量倒放&#xff0c;激发无限创意&#xff01; 第一步。首先&#xff0c;我们要打…

基于SpringBoot的康复中心管理系统 JAVA简易版

目录 一、摘要1.1 项目介绍1.2 项目录屏 二、功能模块2.1 普通用户模块2.2 护工模块2.3 管理员模块 三、系统展示四、核心代码4.1 查询康复护理4.2 新增康复训练4.3 查询房间4.4 查询来访4.5 新增用药 五、免责说明 一、摘要 1.1 项目介绍 基于JAVAVueSpringBootMySQL的康复中…

第十七周周报

文章目录 摘要目标检测锚框交并比NMS 非极大值抑制输出 文献阅读&#xff1a;SMPL: A Skinned Multi-Person Linear ModelIntroductionRelated WorkModel FormulationTraining评估动态SMPL讨论结论 总结 摘要 本周看了三维人体重建的领域&#xff0c;看了一篇SMPL的文章&#…

Windows2012部署项目

目录 1.jdk的安装 2.Tomact安装 3.MySQL安装 4.项目部署 ​5.思维导图 1.jdk的安装 将jdk从主机复制到虚拟机里面&#xff0c;然后双击进行安装 安装完JDK之后&#xff0c;在系统的高级系统设置中点击环境变量&#xff0c;进行增加系统变量 变量名 : JAVA_HOME 变量值 : …

【深入挖掘Java技术】「源码原理体系」盲点问题解析之HashMap工作原理全揭秘(下)

盲点问题解析之HashMap工作原理全揭秘 承接上文创建HashMap对象参考容量&#xff08;capacity&#xff09;Hashmap内部有一个机制扩容阈值&#xff08;threshold&#xff09;负载因子&#xff08;loadFactor&#xff09; HashMap存储元素的过程HashMap的put方法JDK8的扩容机制N…

一键批量翻译,文件夹名称翻译器

文件夹名称往往是我们初步了解文件内容的重要窗口。有时&#xff0c;为了更好地与国际合作伙伴交流或是管理个人文件&#xff0c;我们需要对文件夹名称进行翻译。传统的逐一修改方法既费时又费力&#xff0c;还要借助翻译工具。现在有了【文件批量改名高手】&#xff0c;上面的…

OpenAI ChatGPT-4开发笔记2024-06:最简Embedding

Embedding embedding直译是&#xff1a;嵌入。和实际意思有些差距。其实就是把文本转换为向量表示的过程。用“向量化”更直接&#xff0c;但这又和tensor有点儿混。它是变成向量的一个过程。 embedding 的应用领域&#xff1a; 文本分类&#xff1a; 将文本嵌入转换为向量后…

js逆向第20例:猿人学第19题乌拉乌拉乌拉

文章目录 一、前言二、定位关键参数1、JA3/TLS指纹怎么查看2、加密值长度对比三、代码实现四、参考文献一、前言 任务十九:抓取这5页的数字,计算加和并提交结果 此题在以前用python写逆向代码是存在缺陷的,直到今年有个大佬开源了curl_cffi库,并且支持 JA3/TLS 和 http2 指…

提交代码,SVN被锁定,提示:svn is already locked解决方案

今天遇到一个问题&#xff0c;svn 在提交代码的时候出现了svn is already locked&#xff0c;解决方案如下图 点击clean up 点击ok即可 来看官方对clean up的解释&#xff1a;它的作用就是查找工作拷贝中的所有遗留的日志文件&#xff0c;删除进程中工作拷贝的锁。 参考&…

也谈人工智能——AI科普入门

文章目录 1. 科普入门人工智能的定义人工智能的类型 - 弱 AI 与强 AI人工智能、深度学习与机器学习人工智能的应用和使用场景语音识别计算机视觉客户服务建议引擎数据分析网络安全 行业应用人工智能发展史![img](https://img-blog.csdnimg.cn/img_convert/66aeaaeac6870f432fc4…

网络安全B模块(笔记详解)- MYSQL信息收集

MYSQL信息收集 1.通过渗透机场景Kali中的渗透测试工具对服务器场景MySQL03进行服务信息扫描渗透测试(使用工具Nmap,使用必须要使用的参数),并将该操作显示结果中数据库版本信息作为Flag提交; Flag:MySQL 5.5.12 2.通过渗透机场景Kali中的渗透测试工具对服务器场景MySQL0…

【RV1126 学习】SDK/ U-Boot/kernel/rootfs 编译学习

文章目录 RV1126芯片介绍rv1126 模块代码目录相关说明 SDK 包下的脚本使用build.sh 脚本使用envsetup.sh 脚本使用mkfirmware.sh 脚本使用rkflash.sh 脚本使用 U-Boot 编译和配置uboot 的配置修改编译操作 kernel 的修改编译rootfs 编译和配置buildroot 配置busybox 配置 固件打…

AI教我学编程之C#变量及实例演示

前言 在AI教我学编程之AI自刀 这篇文章中&#xff0c;我们知道了变量的基础类型&#xff0c;那么变量在C#中有什么作用呢&#xff1f;我们一起来看看吧&#xff01; 目录 重点先知 变量 变量类型 实例演示 变量声明 实例演示 提出疑问 初始化变量 自动初始化 多变量声明 实…

MySQL 从零开始:05 MySQL 数据类型

文章目录 1、数值类型1.1 整形数值1.2 浮点型数值1.3 布尔值 2、日期和时间类型3、字符串类型3.1 CHAR 和 VARCHAR3.2 BINARY 和 VARBINARY3.3 BLOB 和 TEXT3.4 ENUM 类型3.5 SET 类型 4、空间数据类型5、JSON 数据类型5、JSON 数据类型 前面的讲解中已经接触到了表的创建&…

0基础学习VR全景平台篇第137篇:720VR全景,DJI无人机遥控器调参

上课&#xff01;全体起立~ 大家好&#xff0c;欢迎观看蛙色官方系列全景摄影课程&#xff01; 这节课以御2为例 介绍的是无人机调参 步骤一&#xff1a;下载DJI Go 4并注册账号 步骤二&#xff1a;拿下遥杆并装好&#xff0c;展开遥控天线。将无人机与遥控器相连&#xff…