当前位置： 首页 > news >正文

HTML 笔记 表格

news 文章来源：https://blog.csdn.net/qq_40206371/article/details/133645143 2025/5/5 2:52:04

1 表格基本语法

tr：table row

th：table head

2 表格属性

2.1 基本属性

  • 表格的基本属性是指表格的行、列和单元格
  • 但并不是每个表格的单元格大小都是统一的，所以需要设计者通过一些属性参数来修改表格的样子，让它们可以更更多样化。
  • 这些属性参数包括行高、宽度等。
    • 1．行高height属性
    • 2．宽度width属性
    • 3. 边框Border属性
    • 4．单元格大小属性height和width
<!DOCTYPE html>
<html>
<body>
<table border="1" height="100%" width="100%"><tr><th height="50" width="100"> Head 1 </th><th > Head 2 </th></tr><tr><td> row, cell 1 </td><td> row, cell 2 </td></tr>
</table>
</body>
</html>

百分比表示所占浏览器的大小 

绝对数字表示像素值大小

2.2 其他属性

  • bgcolor: 定义表格或者单元格的背景颜色
  • background: 定义表格或者单元格的背景图片
<!DOCTYPE html>
<html>
<body>
<table border="1" height="100%" width="100%" bgcolor='lightgreen'><tr><th height="50" width="100" bgcolor='lightblue'> Head 1 </th><th > Head 2 </th></tr><tr><td bgcolor='red'> row, cell 1 </td><td> row, cell 2 </td></tr>
</table>
</body>
</html>

3 合并单元格

  • 合并同一行的单元格时，要用到 colspan 属性
  • 合并同一排的单元格时，要用到 rowspan 属性
<!DOCTYPE html>
<html>
<body>
</table>
<table border="3" ><tr><td colspan="2">1&2</td><td>3</td><td rowspan="3" >4&<br/>8&<br/>12</td></tr><tr><td>5</td><td>6</td><td>7</td></tr><tr><td>9</td><td>10</td><td>11</td></tr><tr><td>13</td><td>14</td><td>15</td><td>16</td></tr>
</table></body>
</html>

4 表格标题

  • <caption>标签是用来给表格添加标题的。
  • 默认情况下将位于表格上方居中的位置，且会根据表格的宽度自行调整位置。
<!DOCTYPE html>
<html>
<body>
<table border="1" height="100%" width="100%"><caption>表格题目</caption><tr><th height="50" width="100"> Head 1 </th><th > Head 2 </th></tr><tr><td> row, cell 1 </td><td> row, cell 2 </td></tr>
</table>
</body>
</html>

5 使用CSS 来定义表格属性

  • 利用CSS来定义表格单元格的height和width
  • 利用CSS来定义表格单元格的border属性
    • 可以按顺序设置如下属性：
      • border-width：
      • border-style:  dotted (点状) solid （实线） double （双线） dashed （虚线）;
      • border-color
<!DOCTYPE html>
<html>
<head><style>table {height: 300px; border: 2px solid lightblue;}table th {height: 32px; width: 100px;border: 10px dashed red;}table td {border: 5px double green;}</style></head><body>
<table><tr><th> Head 1 </th><th> Head 2 </th></tr><tr><td> row, cell 1 </td><td> row, cell 2 </td></tr>
</table>
</body>
</html>

table是最外圈

table th是head部分（内圈）

table td是 表格正文部分（内圈）

相关文章：

HTML 笔记 表格

1 表格基本语法 tr&#xff1a;table row th&#xff1a;table head 2 表格属性 2.1 基本属性 表格的基本属性是指表格的行、列和单元格但并不是每个表格的单元格大小都是统一的&#xff0c;所以需要设计者通过一些属性参数来修改表格的样子&#xff0c;让它们可以更更多样…...

编程日记 2023/10/11 13:04:48

3.1 C/C++ 使用字符与指针

C/C语言是一种通用的编程语言&#xff0c;具有高效、灵活和可移植等特点。C语言主要用于系统编程&#xff0c;如操作系统、编译器、数据库等&#xff1b;C语言是C语言的扩展&#xff0c;增加了面向对象编程的特性&#xff0c;适用于大型软件系统、图形用户界面、嵌入式系统等。…...

编程日记 2023/10/11 13:03:48

[代码学习]einsum详解

einsum详解 该函数用于对一组输入 Tensor 进行 Einstein 求和&#xff0c;该函数目前仅适用于paddle的动态图。 Einstein 求和是一种采用 Einstein 标记法描述的 Tensor 求和&#xff0c;输入单个或多个 Tensor&#xff0c;输出单个 Tensor。 paddle.einsum(equation, *opera…...

编程日记 2023/10/11 13:02:46

女性必看——“黄体破裂”到底有多可怕？

前几天的亚运会上发生了这样一件事&#xff1a; 雅思敏&#xff08;化名&#xff09;是一名国外皮划艇运动员&#xff0c;在亚运会上奋力完成皮划艇比赛后&#xff0c;突然开始 剧烈腹痛、面色苍白&#xff0c;大汗淋漓&#xff0c;经过进一步检查&#xff0c;确诊卵巢黄体破裂…...

编程日记 2023/10/11 13:00:44

colab切换目录的解决方案

大家好，我是爱编程的喵喵。双985硕士毕业，现担任全栈工程师一职，热衷于将数据思维应用到工作与生活中。从事机器学习以及相关的前后端开发工作。曾在阿里云、科大讯飞、CCF等比赛获得多次Top名次。现为CSDN博客专家、人工智能领域优质创作者。喜欢通过博客创作的方式对所学的…...

编程日记 2023/10/11 12:58:42

基于SSM的生活缴费系统的设计与实现

末尾获取源码 开发语言&#xff1a;Java Java开发工具&#xff1a;JDK1.8 后端框架&#xff1a;SSM 前端&#xff1a;采用JSP技术开发 数据库&#xff1a;MySQL5.7和Navicat管理工具结合 服务器&#xff1a;Tomcat8.5 开发软件&#xff1a;IDEA / Eclipse 是否Maven项目&#x…...

编程日记 2023/10/11 12:57:40

【WebLogic】WebLogic 2023年7月补丁导致JVM崩溃的解决方案

受影响版本&#xff1a; Oracle WebLogic 12c&#xff08;12.2.1.4.0&#xff09;Oracle WebLogic 14c&#xff08;14.1.1.0.0&#xff09; 问题描述&#xff1a; Oracle官方在2023年7月发布的最新版本的OPatch&#xff08;13.9.4.2.13&#xff09;存在一个新出现的Bug&#…...

编程日记 2023/10/11 12:56:39

简单OpenSL ES学习

初识OpenSL ES OpenSL ESObjects和Interfaces 所有的Object在OpenSl里面我们拿到的都是一个SLObjectItf&#xff1a;SLObjectItf_创建引擎创建过程要设计得这么麻烦&#xff1f;&#xff08;object的生命周期&#xff09;这么多参数&#xff0c;参数类型这么多学习障碍太大&…...

编程日记 2023/10/11 12:54:35

Linux网络编程- struct packet_mreq setsockopt()

struct packet_mreq struct packet_mreq 是一个数据结构&#xff0c;用于 Linux 中的原始数据包套接字&#xff0c;当我们想改变套接字的行为以接收特定类型的数据包时&#xff0c;它与 setsockopt() 函数配合使用。 下面是 struct packet_mreq 的定义&#xff1a; struct p…...

编程日记 2023/10/11 12:53:33

C++学习day4

作业&#xff1a; 1> 思维导图 2> 整理代码 1. 拷贝赋值函数课上代码 //拷贝赋值函数课上代码 #include<iostream> using namespace std;//创建类 class Stu { private://私有的string name;int socer;int *age;//此处注意用到指针类型 public://共有的//无参构…...

编程日记 2023/10/11 12:52:31

从零学算法54

54.给你一个 m 行 n 列的矩阵 matrix &#xff0c;请按照 顺时针螺旋顺序 &#xff0c;返回矩阵中的所有元素。 螺旋遍历&#xff1a;从左上角开始&#xff0c;按照 向右、向下、向左、向上 的顺序 依次 提取元素&#xff0c;然后再进入内部一层重复相同的步骤&#xff0c;直到…...

编程日记 2023/10/11 12:51:30

Logback日志框架使用详解以及如何Springboot快速集成

Logback简介 日志系统是用于记录程序的运行过程中产生的运行信息、异常信息等&#xff0c;一般有8个级别&#xff0c;从低到高为All < Trace < Debug < Info < Warn < Error < Fatal < OFF off 最高等级&#xff0c;用于关闭所有日志记录fatal 指出每个…...

编程日记 2023/10/11 12:50:28

Nginx概念

Nginx概念 Nginx 是一款面向性能设计的 HTTP 服务器&#xff0c;相较于 Apache、lighttpd 具有占有内存少&#xff0c;稳定性高等优势&#xff0c;同时也是一个非常高效的反向代理、负载平衡服务器 nginx使用的是反应器模式&#xff0c;主事件循环等待操作系统发出准备事件的信…...

编程日记 2023/10/11 12:49:27

vim基础指令（自用）

这个是自己随便写的&#xff0c;类似于笔记 vim 多模式编辑器 查看指令&#xff1a; gg&#xff1a; 定位光标到最开始行 shift(按)g 定位到最结尾行 nshift(按)g 定位到任意行 shift&#xff04; 定位到本行结尾 0 定位到本行开头 w&#xff1a;跨单词移动 h.j.k,l: 左下上右 …...

编程日记 2023/10/11 12:48:26

【centos7安装ElasticSearch】

概述 最近工作中有用到ES &#xff0c;当然少不了自己装一个服务器捣鼓。本文的ElasticSearch 的版本&#xff1a; 7.17.3 一、下载 ElasticSearch 点此下载 下载完成后上传至 Linux 服务器&#xff0c;本文演示放在&#xff1a; /root/ 下&#xff0c;进行解压&#xff1…...

编程日记 2023/10/11 12:47:25

ElementPlus Switch 开关基础使用

昨天开发用到开关组件 后台返回字段是 can_write 默认是0 or 1 但是Switch 组件绑定的默认值默认是 true or false 直接绑定会导致默认是关闭状态 在页面一加载 值发生变化时 会自己调用 查了文档 需要使用 active-value 和 inactive-value 来指定绑定的数据类型 …...

编程日记 2023/10/11 12:46:23

Spring Boot：自定义注解--annotation

目录 自定义注解的定义和作用范围如何创建自定义注解创建注解接口 如何使用自定义注解进行数据验证创建注解处理器控制器中使用注解 如何为字段添加注解 自定义注解的定义和作用范围 自定义注解可以作用在类、方法、属性、参数、异常、字段或其他注解上。 如何创建自定义注解…...

编程日记 2023/10/11 12:45:23

WIFI频段

问题&#xff1a; 5ghzwifi频段带宽怎么选 智造喵回答&#xff1a; 选择5GHz WiFi频段的带宽取决于你的网络需求和设备兼容性。通常有两种可选的带宽&#xff1a;20MHz和40MHz。 20MHz带宽&#xff1a;这是较为常见的 WiFi 频段带宽设置。它提供较好的穿墙能力和信号稳定性…...

编程日记 2023/10/11 12:44:22

Java的引用详解与示例

引用的作用 在Java中&#xff0c;引用&#xff08;Reference&#xff09;是一种重要的概念&#xff0c;它们用于管理对象的生命周期、内存分配和垃圾回收。引用的作用包括以下几个方面&#xff1a; 内存管理&#xff1a;引用帮助Java虚拟机&#xff08;JVM&#xff09;管理内存…...

编程日记 2023/10/11 12:43:21

c++视觉处理---霍夫变换

霍夫直线变换的函数 HoughLines 是OpenCV库中用于执行霍夫直线变换的函数。霍夫直线变换用于检测图像中的直线。下面是该函数的基本用法&#xff1a; cv::HoughLines(image, lines, rho, theta, threshold);image: 输入的二值图像&#xff0c;通常是通过边缘检测算法生成的。…...

编程日记 2023/10/11 12:42:20

el-table 边框颜色修改 简单有效！

废话不多说&#xff0c;直接上图 &#xff08;1&#xff09;修改前的图如下&#xff1a; 以上是elementUI原组件自带的样式 &#xff08;2&#xff09;下面是修改后的边框图如下&#xff1a; 源码如下&#xff1a; <el-table :data"jctableData" border size…...

编程日记 2023/10/11 12:41:19

Zabbix第二部分：基于Proxy分布式部署实现Web监控和Zabbix HA集群的搭建

代理和高可用 一、基于zabbix-proxy的分布式监控1.1 分布式监控的作用1.2 数据流向1.3 构成组件 二、部署zabbix代理服务器Step1 前置准备Step2 设置 zabbix 的下载源&#xff0c;安装 zabbix-proxyStep3 部署数据库并将zabbix相关文件导入Step4 修改zabbix-proxy的配置文件&am…...

编程日记 2023/10/11 12:40:18

JumpServer rce深入剖析

影响范围 JumpServer < v2.6.2 JumpServer < v2.5.4 JumpServer < v2.4.5 JumpServer v1.5.9 修复链接及参考 修改了一处代码&#xff1a; Git History 增加了一处鉴权 def connect(self):user self.scope["user"]if user.is_authenticated and …...

编程日记 2023/10/11 12:38:14

EasyExcel导入/导出Excel文件

EasyExcel导入/导出Excel文件简单写法 1、导入依赖 2、创建简单导入、导出demo 3、创建类 继承AnalysisEventListener&#xff08;导入Excel监听解析表格数据&#xff09; 4、创建类 基于注解 自定义Excel导出模版 1、导入EasyExcel依赖 <!--导入EasyExcel…...

编程日记 2023/10/11 12:36:12

力扣(LeetCode)2512. 奖励最顶尖的K名学生(C++)

优先队列哈希集合反向思维(或自定义排序) 模拟&#xff0c;请直接看算法思路&#xff1a; 两个哈希集合S1和S2, S1存正面词汇&#xff0c;S2存负面词汇&#xff1b;一个优先队列pq&#xff0c;pq存{score, id}键值对&#xff0c;即学生分数-学生id。 算法流程&#xff1a; 初…...

编程日记 2023/10/11 12:35:11

CubeMX+BabyOS 使用方法

MCU&#xff1a;STM32G030F 编译器&#xff1a;MDK 托管工具&#xff1a;Sourcetree CubeMX创建工程 BabyOS克隆 添加子模块 git submodule add https://gitee.com/notrynohigh/BabyOS.git BabyOS 切换dev 分支 查看当前分支 git branch -a 切换本地分支到dev git che…...

编程日记 2023/10/11 12:34:10

OpenResty安装-(基于Nginx的高性能Web平台,可在Nginx端编码业务)

文章目录 安装OpenResty1.安装1&#xff09;安装开发库2&#xff09;安装OpenResty仓库3&#xff09;安装OpenResty4&#xff09;安装opm工具5&#xff09;目录结构6&#xff09;配置nginx的环境变量 2.启动和运行3.备注 安装OpenResty 1.安装 首先你的Linux虚拟机必须联网 …...

编程日记 2023/10/11 12:31:06

算法-DFS+记忆化/动态规划-不同路径 II

算法-DFS记忆化/动态规划-不同路径 II 1 题目概述 1.1 题目出处 https://leetcode.cn/problems/unique-paths-ii 1.2 题目描述 2 DFS记忆化 2.1 思路 注意题意&#xff0c;每次要么往右&#xff0c;要么往下走&#xff0c;也就是说不能走回头路。但是仍有可能走到之前已经…...

编程日记 2023/10/11 12:30:05

黑盒测试方法：原理+实战

目录 一、如何设计测试用例 二、黑盒测试常用方法 1、基于需求进行测试用例的设计 2、等价类 3、边界值 4、判定表分析法&#xff08;因果分析法&#xff09; 5、正交表 6、场景设计法 三、案例补充 1、使用Fiddler模拟弱网 2、针对一个接口该如何测试 一、如何设计测试…...

编程日记 2023/10/11 12:29:04

SQLite事务处理

语法 BEGIN TRANSACTION; COMMIT TRANSACTION; &#xff08;或END TRANSACTION;&#xff09; ROLLBACK TRANSACTION; 事务处理 除了一些PRAGMA语句以外&#xff0c;其它访问数据库的语句会自动启动事务处理&#xff0c;并且在结束时自动提交。 通过上一节的命令可以手动控制…...

编程日记 2023/10/11 12:27:02