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

HTML 笔记 表格

news 2026/6/3 5:18:02

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

Visual Paradigm 17.0 团队协作新功能实测：手把手教你用项目模板和文件夹管理提效

Visual Paradigm 17.0 团队协作实战指南&#xff1a;从模板配置到文件夹管理的高效工作流在敏捷开发团队中&#xff0c;项目启动速度和资产管理的规范性往往直接影响整体效率。Visual Paradigm 17.0针对这一痛点推出的团队协作增强功能&#xff0c;特别是服务器端项目模板和文件…...

编程新知 2026/5/26 2:43:41

告别FTP龟速：用NTFS-3G在CentOS7上直连移动硬盘拷贝200G大文件

告别FTP龟速&#xff1a;用NTFS-3G在CentOS7上直连移动硬盘拷贝200G大文件当面对数百GB的设计素材、日志文件或数据库备份需要迁移时&#xff0c;传统的FTP传输往往会成为效率瓶颈。我曾在一个视频处理项目中&#xff0c;需要将230GB的4K原始素材从移动硬盘导入服务器&#xff…...

编程新知 2026/5/26 1:47:12

SSE 基础知识

SSE 基础知识 一、概念定义 SSE 全称 Server-Sent Events&#xff0c;是基于HTTP协议的服务器单向数据推送技术。 建立一次长连接后&#xff0c;服务端可主动持续向前端推送数据&#xff0c;无需客户端反复轮询请求。 二、核心特点 单向通信&#xff1a;仅服务器 → 客户端发送…...

编程新知 2026/5/27 5:26:11

基于声卡与电流互感器的安全交流功率测量系统设计与实践

1. 项目概述&#xff1a;用声卡安全测量交流功率我一直对各种测量技术抱有浓厚的兴趣&#xff0c;毕竟“测量即认知”这句老话在今天依然适用。对于电力消耗和产出&#xff0c;没有什么比直接测量更能说明问题了。交流功率的测量&#xff0c;核心在于同时获取电压和电流的瞬时值…...

编程新知 2026/5/26 0:44:32

Gofile批量下载自动化工具：5步实现高效文件管理解决方案

Gofile批量下载自动化工具&#xff1a;5步实现高效文件管理解决方案 【免费下载链接】gofile-downloader Download files from https://gofile.io 项目地址: https://gitcode.com/gh_mirrors/go/gofile-downloader 在当今数字化工作环境中&#xff0c;技术团队经常需要从…...

编程新知 2026/5/26 0:16:08

Unity发行版DLL调试实战：DnSpy无源码IL级断点指南

1. 这不是“反编译”&#xff0c;而是Unity游戏开发者的日常调试手段你有没有遇到过这样的情况&#xff1a;接手一个Unity发行版游戏&#xff0c;想快速验证某个功能逻辑是否按预期执行&#xff0c;或者排查一个偶发的崩溃&#xff0c;但手头只有打包后的Assembly-CSharp.dll&a…...

编程新知 2026/5/26 0:10:05

集成Taotoken为OpenClaw工作流提供持久化模型支持

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 集成Taotoken为OpenClaw工作流提供持久化模型支持 在构建基于OpenClaw的自动化Agent工作流时&#xff0c;一个稳定且可灵活切换的模…...

编程新知 2026/5/25 19:09:13

基于ESP8266的可穿戴Wi-Fi设备：从硬件设计到ESPHome智能控制

1. 项目概述&#xff1a;一个可穿戴的Wi-Fi智能小玩意最近在捣鼓智能家居和可穿戴电子&#xff0c;总想把手边的小物件变得更“聪明”一点。于是&#xff0c;我设计并制作了一个基于ESP8266的可穿戴Wi-Fi设备。它的核心思路很简单&#xff1a;把一块功能强大的Wi-Fi微控制器&am…...

编程新知 2026/5/25 16:02:24

Midjourney辉光效果失效诊断手册（含12个隐性触发条件与4类GPU显存陷阱）

更多请点击&#xff1a; https://codechina.net 第一章&#xff1a;Midjourney辉光效果失效诊断手册&#xff08;含12个隐性触发条件与4类GPU显存陷阱&#xff09; 辉光效果&#xff08;Glow Effect&#xff09;在 Midjourney v6 的 --style raw 模式下常被用于强化主体边缘光…...

编程新知 2026/5/25 14:56:46

【MATLAB】OFDM系统峰均比抑制算法仿真

【MATLAB】OFDM系统峰均比抑制算法仿真 摘要：OFDM（正交频分复用）技术凭借抗多径衰落、频谱利用率高、抗干扰能力强等优势，广泛应用于4G/5G移动通信、WiFi、数字广播电视等无线通信系统。但OFDM系统存在固有缺陷，多子载波叠加导致时域信号出现大幅峰值，产生较高峰值平均功…...

编程新知 2026/5/25 14:40:38