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

HTML 笔记 表格

news 2026/2/10 11:59:26

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

eNSP-Cloud(实现本地电脑与eNSP内设备之间通信)

说明&#xff1a; 想象一下&#xff0c;你正在用eNSP搭建一个虚拟的网络世界&#xff0c;里面有虚拟的路由器、交换机、电脑&#xff08;PC&#xff09;等等。这些设备都在你的电脑里面“运行”&#xff0c;它们之间可以互相通信&#xff0c;就像一个封闭的小王国。 但是&#…...

编程新知 2026/2/8 4:37:17

聊一聊接口测试的意义有哪些？

目录 一、隔离性 & 早期测试 二、保障系统集成质量 三、验证业务逻辑的核心层 四、提升测试效率与覆盖度 五、系统稳定性的守护者 六、驱动团队协作与契约管理 七、性能与扩展性的前置评估 八、持续交付的核心支撑 接口测试的意义可以从四个维度展开&#xff0c;首…...

编程新知 2026/2/10 2:11:49

大学生职业发展与就业创业指导教学评价

这里是引用 作为软工2203/2204班的学生&#xff0c;我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要&#xff0c;而您认真负责的教学态度&#xff0c;让课程的每一部分都充满了实用价值。 尤其让我…...

编程新知 2025/11/16 1:39:27

Android第十三次面试总结（四大 组件基础）

Activity生命周期和四大启动模式详解 一、Activity 生命周期 Activity 的生命周期由一系列回调方法组成&#xff0c;用于管理其创建、可见性、焦点和销毁过程。以下是核心方法及其调用时机&#xff1a; ​onCreate()​​ ​调用时机​&#xff1a;Activity 首次创建时调用。​…...

编程新知 2025/10/15 15:07:34

MacOS下Homebrew国内镜像加速指南（2025最新国内镜像加速）

macos brew国内镜像加速方法 brew install 加速formula.jws.json下载慢加速 &#x1f37a; 最新版brew安装慢到怀疑人生&#xff1f;别怕&#xff0c;教你轻松起飞&#xff01; 最近Homebrew更新至最新版&#xff0c;每次执行 brew 命令时都会自动从官方地址 https://formulae.…...

编程新知 2026/1/28 10:57:16

数据结构第5章：树和二叉树完全指南（自整理详细图文笔记）

名人说&#xff1a;莫道桑榆晚&#xff0c;为霞尚满天。——刘禹锡&#xff08;刘梦得&#xff0c;诗豪&#xff09; 原创笔记&#xff1a;Code_流苏(CSDN)&#xff08;一个喜欢古诗词和编程的Coder&#x1f60a;&#xff09; 上一篇&#xff1a;《数据结构第4章 数组和广义表》…...

编程新知 2026/2/4 20:23:50

云原生时代的系统设计：架构转型的战略支点

&#x1f4dd;个人主页&#x1f339;&#xff1a;一ge科研小菜鸡-CSDN博客 &#x1f339;&#x1f339;期待您的关注 &#x1f339;&#x1f339; 一、云原生的崛起&#xff1a;技术趋势与现实需求的交汇 随着企业业务的互联网化、全球化、智能化持续加深&#xff0c;传统的 I…...

编程新知 2026/1/30 23:57:50

2025 后端自学UNIAPP【项目实战：旅游项目】7、景点详情页面【完结】

1、获取景点详情的请求【my_api.js】 // 引入公共的请求封装 import http from ./my_http.js// 登录接口&#xff08;适配服务端返回 Token&#xff09; export const login async (code, avatar) > {const res await http(/login/getWXSessionKey, {code,avatar}); };//…...

编程新知 2026/2/9 6:27:57

C/Python/Go示例 | Socket Programing与RPC

Socket Programming介绍 Computer networking这个领域围绕着两台电脑或者同一台电脑内的不同进程之间的数据传输和信息交流&#xff0c;会涉及到许多有意思的话题&#xff0c;诸如怎么确保对方能收到信息&#xff0c;怎么应对数据丢失、被污染或者顺序混乱&#xff0c;怎么提高…...

编程新知 2025/11/12 11:57:26

安全领域新突破：可视化让隐患无处遁形

在安全领域&#xff0c;隐患就像暗处的 “幽灵”&#xff0c;随时可能引发严重事故。传统安全排查手段&#xff0c;常常难以将它们一网打尽。你是否好奇&#xff0c;究竟是什么神奇力量&#xff0c;能让这些潜藏的隐患无所遁形&#xff1f;没错&#xff0c;就是可视化技术。它如…...

编程新知 2026/2/1 15:18:53