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

HTML 笔记 表格

news 2026/2/10 14:44:40

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

可靠性+灵活性：电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

编程新知 2025/9/27 2:43:26

多模态商品数据接口：融合图像、语音与文字的下一代商品详情体验

一、多模态商品数据接口的技术架构 &#xff08;一&#xff09;多模态数据融合引擎 跨模态语义对齐 通过Transformer架构实现图像、语音、文字的语义关联。例如&#xff0c;当用户上传一张“蓝色连衣裙”的图片时&#xff0c;接口可自动提取图像中的颜色&#xff08;RGB值&…...

编程新知 2025/7/23 3:55:49

vue3 定时器-定义全局方法 vue+ts

1.创建ts文件 路径&#xff1a;src/utils/timer.ts 完整代码&#xff1a; import { onUnmounted } from vuetype TimerCallback (...args: any[]) > voidexport function useGlobalTimer() {const timers: Map<number, NodeJS.Timeout> new Map()// 创建定时器con…...

编程新知 2025/8/9 0:31:20

项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）

Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败&#xff0c;具体原因是客户端发送了密码认证请求&#xff0c;但Redis服务器未设置密码 1.为Redis设置密码&#xff08;匹配客户端配置&#xff09; 步骤&#xff1a; 1&#xff09;.修…...

编程新知 2026/2/8 14:19:47

智能分布式爬虫的数据处理流水线优化：基于深度强化学习的数据质量控制

在数字化浪潮席卷全球的今天&#xff0c;数据已成为企业和研究机构的核心资产。智能分布式爬虫作为高效的数据采集工具&#xff0c;在大规模数据获取中发挥着关键作用。然而&#xff0c;传统的数据处理流水线在面对复杂多变的网络环境和海量异构数据时&#xff0c;常出现数据质…...

编程新知 2026/2/6 1:04:23

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

编程新知 2026/1/27 14:18:20

VM虚拟机网络配置（ubuntu24桥接模式）：配置静态IP

编辑-虚拟网络编辑器-更改设置 选择桥接模式&#xff0c;然后找到相应的网卡&#xff08;可以查看自己本机的网络连接&#xff09; windows连接的网络点击查看属性 编辑虚拟机设置更改网络配置&#xff0c;选择刚才配置的桥接模式 静态ip设置&#xff1a; 我用的ubuntu24桌…...

编程新知 2026/2/9 3:25:41

接口自动化测试：HttpRunner基础

相关文档 HttpRunner V3.x中文文档 HttpRunner 用户指南 使用HttpRunner 3.x实现接口自动化测试 HttpRunner介绍 HttpRunner 是一个开源的 API 测试工具&#xff0c;支持 HTTP(S)/HTTP2/WebSocket/RPC 等网络协议&#xff0c;涵盖接口测试、性能测试、数字体验监测等测试类型…...

编程新知 2026/1/29 7:31:17

给网站添加live2d看板娘

给网站添加live2d看板娘 参考文献&#xff1a; stevenjoezhang/live2d-widget: 把萌萌哒的看板娘抱回家 (ノ≧∇≦)ノ | Live2D widget for web platformEikanya/Live2d-model: Live2d model collectionzenghongtu/live2d-model-assets 前言 网站环境如下&#xff0c;文章也主…...

编程新知 2026/2/1 4:23:19

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...

编程新知 2026/2/6 6:05:52