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

HTML5-3-表格

news 2026/3/28 3:33:31

文章目录

  • 属性
  • 边框属性
  • 标题
  • 跨行和跨列
  • 单元格边距

HTML 表格由 <table> 标签来定义。

  • tr：tr 是 table row 的缩写，表示表格的一行。
  • td：td 是 table data 的缩写，表示表格的数据单元格。
  • th：th 是 table header的缩写，表示表格的表头单元格。
<table><tr><td>单元格1</td><td>单元格2</td></tr><tr><td>单元格3</td><td>单元格4</td></tr>
</table>

数据单元格可以包含文本、图片、列表、段落、表单、水平线、表格等等。

thead、tbody和tfoot这3个标签。将表格划分为3部分：表头、表身、表脚。

  • <thead> 用于定义表格的标题部分: 在 <thead > 中，使用 <th > 元素定义列的标题
  • <tbody> 用于定义表格的主体部分: 在 <tbody > 中，使用 <tr > 元素定义行，并在每行中使用 <td > 元素定义单元格数据
<table> <caption>表格标题</caption><!--表头--><thead><tr> <th>表头单元格1</th><th>表头单元格2</th></tr></thead><!--表身--><tbody><tr><td>表行单元格1</td><td>表行单元格2</td></tr></tbody><!--表脚--><tfoot><tr><td>标准单元格5</td><td>标准单元格6</td></tr></tfoot>
</table>

表脚往往用于统计数据。此外，thead、tbody和tfoot标签除了可以使代码更具有语义，还有另外一个重要作用 ：方便分块来控制表格的CSS样式。

属性

在 HTML5 中，仅支持 “border” 属性，并且只允许使用值 “1” 或 “”。

属性值描述
alignleft，center，right不赞成使用。请使用样式代替。规定表格相对周围元素的对齐方式。
bgcolorrgb(x,x,x)，#xxxxxx，colorname不赞成使用。请使用样式代替。规定表格的背景颜色。
borderpixels 规定表格边框的宽度。
cellpaddingpixels，%规定单元边沿与其内容之间的空白。
cellspacing pixels，%规定单元格之间的空白。
frame void，above，below，hsides，lhs，rhs，vsides，box，border规定外侧边框的哪个部分是可见的。
rules none，groups，rows，cols，all规定内侧边框的哪个部分是可见的。
summary text 规定表格的摘要。
width %，pixels规定表格的宽度。

边框属性

<table border="1"><tr><td>第一行, 第一列</td><td>第一行, 第二列</td></tr>
</table>

在这里插入图片描述
没有边框的表格：

<table><tr><td>第一行, 第一列</td><td>第一行, 第二列</td></tr>
</table>

在这里插入图片描述

标题

<caption>

<table border="4"><caption>标题</caption><tr><td>第一行, 第一列</td><td>第一行, 第二列</td></tr>
</table>

在这里插入图片描述

跨行和跨列

rowspan，colspan

<td rowspan="跨域的行数"></td>
<td colspan="跨域的列数"></td>

删除的个数=合并的个数-1

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格合并</title>
</head>
<body><table  width="200"border="1"><tr><td colspan="3">成绩</td></tr><tr><td rowspan="2">张三</td> <td>语文：99</td><td>数学：100</td></tr><tr><td>物理：99</td><td>化学：100</td></tr></table>
</body>
</html>

在这里插入图片描述

单元格边距

在这里插入图片描述

相关文章：

HTML5-3-表格

文章目录 属性边框属性标题跨行和跨列单元格边距 HTML 表格由 <table> 标签来定义。 tr&#xff1a;tr 是 table row 的缩写&#xff0c;表示表格的一行。td&#xff1a;td 是 table data 的缩写&#xff0c;表示表格的数据单元格。th&#xff1a;th 是 table header的缩…...

编程日记 2023/9/10 20:49:31

Spring Boot + Vue的前后端项目结构及联调查询

Spring Boot Vue的前后端项目结构及联调查询 当你刚开始学习前后端开发时&#xff0c;可能会感到有些困惑和不知所措。下面是一些建议&#xff0c;希望能为你的学习之旅提供一些启示&#xff1a; 建立坚实的基础知识&#xff1a;学习前后端开发的第一步是建立坚实的基础知识。…...

编程日记 2023/9/10 20:48:31

Transformer貌似也是可以使用state递归解码和训练的

import paddle import numpy as npclass HeadLoss(paddle.nn.Layer):def __init__(self):super(HeadLoss, self).__init__()...

编程日记 2023/9/10 20:47:30

振弦采集仪应用地铁隧道安全监测详细解决方案

振弦采集仪应用地铁隧道安全监测详细解决方案 随着城市化进程的不断加快&#xff0c;地铁作为一种高效、便捷、环保的交通方式已经成为现代城市不可或缺的一部分。因此&#xff0c;对地铁的安全性也越来越重视&#xff0c;一般二三线以上的城市在不断发展中&#xff0c;地铁做…...

编程日记 2023/9/10 20:46:29

2023 IntelliJ IDEA下载、安装教程, 附详细图解

文章目录 下载与安装IDEA推荐阅读 下载与安装IDEA 首先先到官网下载最新版的IntelliJ IDEA, 下载后傻瓜式安装就好了 官网下载地址&#xff1a;https://www.jetbrains.com/ 1、下载完后在本地找到该文件&#xff0c;双击运行 idea 安装程序 2、点击 Next 3、选择安装路径&…...

编程日记 2023/9/10 20:45:28

波卡生态重要动态一览：w3ndi 推出，首尔、新加坡、里斯本活动接踵而至

Web3 市场冷却&#xff0c;但新的社区合作与推进仍在发生&#xff0c;技术和产品依然不断迭代。OneBlock 为你介绍波卡生态近期值得你关注的动态&#xff0c;以及接下来重要的行业活动。 波卡生态重要进展 1、最新 Referendum#110&#xff0c;提议对验证器配置进行多项修改&a…...

编程日记 2023/9/10 20:43:25

成都瀚网科技有限公司：抖音商家怎么免费入驻？

随着抖音成为全球最受欢迎的短视频平台之一&#xff0c;越来越多的商家开始关注抖音上的商机。抖音商家的进驻可以帮助商家扩大品牌影响力和销售渠道。那么&#xff0c;如何免费进入抖音成为商家呢&#xff1f;下面就为大家介绍一下具体步骤。 1、抖音商家如何免费注册&#xf…...

编程日记 2023/9/10 20:42:24

vue Router从入门到精通

文章目录 介绍使用多级路由实例 路由的query参数传递参数接收参数实例 命名路由作用使用 params参数声明接收params参数传参接收参数实例 props配置实例 router-link的replace属性编程式路由导航作用使用实例 缓存路由组件两个新的生命周期钩子实例 路由守卫作用分类全局守卫独…...

编程日记 2023/9/10 20:41:22

【100天精通Python】Day56：Python 数据分析_Pandas数据清洗和处理（删除填充插值，数据类型转换，去重，连接与合并）

目录 数据清洗和处理 1.处理缺失值 1.1 删除缺失值&#xff1a; 1.2 填充缺失值&#xff1a; 1.3 插值&#xff1a; 2 数据类型转换 2.1 数据类型转换 2.2 日期和时间的转换&#xff1a; 2.3 分类数据的转换&#xff1a; 2.4 自定义数据类型的转换&#xff1a; 3 数…...

编程日记 2023/9/10 20:40:21

phpstudy本地快速搭建网站，并外网访问【无公网IP】

文章目录 使用工具1. 本地搭建web网站1.1 下载phpstudy后解压并安装1.2 打开默认站点&#xff0c;测试1.3 下载静态演示站点1.4 打开站点根目录1.5 复制演示站点到站网根目录1.6 在浏览器中&#xff0c;查看演示效果。 2. 将本地web网站发布到公网2.1 安装cpolar内网穿透2.2 映…...

编程日记 2023/9/10 20:39:20

WebSocket的那些事（5-Spring STOMP支持之连接外部消息代理）

目录 一、序言二、开启RabbitMQ外部消息代理三、代码示例1、Maven依赖项2、相关实体3、自定义用户认证拦截器4、Websocket外部消息代理配置5、ChatController6、前端页面chat.html 四、测试示例1、群聊、私聊、后台定时推送测试2、登录RabbitMQ控制台查看队列信息 五、结语 一、…...

编程日记 2023/9/10 20:38:19

【数据结构】单链表详解

当我们学完顺序表的时候&#xff0c;我们发现了好多问题如下&#xff1a; 中间/头部的插入删除&#xff0c;时间复杂度为O(N)增容需要申请新空间&#xff0c;拷贝数据&#xff0c;释放旧空间。会有不小的消耗。增容一般是呈2倍的增长&#xff0c;势必会有一定的空间浪费。例如当…...

编程日记 2023/9/10 20:37:18

dql的执行顺序

在 SQL 查询语言中&#xff0c;DQL&#xff08;Data Query Language&#xff09;是用于从数据库中检索数据的部分。SQL 查询的执行顺序通常按照以下步骤进行&#xff1a; FROM 子句&#xff1a;查询首先确定要从哪些表中检索数据。在 FROM 子句中列出的表格被称为源表&#xff…...

编程日记 2023/9/10 20:36:17

java的动态代理如何实现

一. JdkProxy jdkproxy动态代理必须基于接口(interface)实现 接口UserInterface.java public interface UserService {String getUserName(String userCde); }原始实现类&#xff1a;UseServiceImpl.java public class UserServiceImpl implements UserSerice {Overridepub…...

编程日记 2023/9/10 20:35:16

Java--日志管理

日志管理 作用&#xff1a; 设置日志级别&#xff0c;决定什么日志信息应该被输出、什么日志信息应该被忽略。 基本工具 见的日志管理用具有:JDK logging&#xff08;配置文件&#xff1a;logging.properties&#xff09; 和log4j(配置文件&#xff1a;log4j.properties) 。…...

编程日记 2023/9/10 20:34:14

Pygame中Sprite类的使用2

4 让僵尸动起来 让僵尸能够动起来&#xff0c;也就是让僵尸从屏幕右边走到屏幕左边&#xff0c;此时只需要使用while循环&#xff0c;改变僵尸图片的x轴坐标即可&#xff0c;代码如下所示。 while True:screen.fill((255,255,255))z1.rect.x - 5z1.draw(screen)z1.update()if…...

编程日记 2023/9/10 20:33:13

排队时延与流量强度

流量强度 设R为传输速率&#xff0c;a表示分组到达队列的平均速率&#xff0c;假定所有分组都是由L比特组成的&#xff0c;则比特到达队列的平均速率为La。比率 L a R \frac{La}{R} RLa​被成为流量强度。 根据流量强度的定义&#xff0c;我们可以很直观的得出以下结论&#x…...

编程日记 2023/9/10 20:32:12

mysql：如何设计互相关注业务场景

目录 业务场景 业务问题&#xff1a; 数据库表设计&#xff1a; like&#xff08;关注表&#xff09;&#xff1a; friend&#xff08;朋友表&#xff09; 并发场景下&#xff0c;SQL语句执行逻辑 比较 A 和 B 的大小&#xff0c;如果 A执行下面的逻辑&#xff1a;<&…...

编程日记 2023/9/10 20:31:11

AI伦理：科技发展中的人性之声

文章目录 AI伦理的关键问题1. 隐私问题2. 公平性问题3. 自主性问题4. 伦理教育问题 隐私问题的拓展分析数据收集和滥用隐私泄露和数据安全 公平性问题的拓展分析历史偏见和算法模型可解释性 自主性问题的拓展分析自主AI决策伦理框架 伦理教育的拓展分析伦理培训 结论 &#x1f…...

编程日记 2023/9/10 20:30:10

Direct3D光照

光照的组成 环境光&#xff1a;这种类型的光经其他表面反射到达物体表面&#xff0c;并照亮整个场景&#xff0c;要想以较低代价粗略模拟这类反射光&#xff0c;环境光是一个很好的选择 漫射光&#xff1a;这种类型光沿着特定的方向传播。当它到达某一表面时&#xff0c;将沿…...

编程日记 2023/9/10 20:29:10

3508RAID卡RAID与JBOD模式对比：如何选择最适合你的存储方案？

3508RAID卡RAID与JBOD模式深度解析&#xff1a;从原理到实战的存储方案选择指南 当企业面临数据存储方案的选择时&#xff0c;3508RAID卡提供的RAID和JBOD模式常常让人陷入纠结。这两种模式看似简单&#xff0c;实则背后隐藏着截然不同的设计哲学和应用场景。本文将带您深入理解…...

编程新知 2026/3/28 2:00:19

从‘丐版’到‘神板’：深度拆解Raspberry Pi Zero 2 W的散热设计与性能压榨指南

从‘丐版’到‘神板’&#xff1a;深度拆解Raspberry Pi Zero 2 W的散热设计与性能压榨指南 当一款信用卡大小的开发板搭载四核处理器时&#xff0c;散热与性能的平衡便成为硬件极客们最热衷的挑战。Raspberry Pi Zero 2 W以不到15美元的定价&#xff0c;却藏着令人惊喜的工程智…...

编程新知 2026/3/28 1:56:18

用LVGL玩转嵌入式UI：5个实战控件代码详解（按钮/滑块/图片/标签/开关）

LVGL嵌入式UI开发实战&#xff1a;五大核心控件深度解析与代码优化 在资源受限的嵌入式设备上实现流畅美观的用户界面&#xff0c;一直是开发者面临的挑战。LVGL&#xff08;Light and Versatile Graphics Library&#xff09;作为一款轻量级开源图形库&#xff0c;凭借其丰富的…...

编程新知 2026/3/28 1:15:39

全平台网络资源下载神器：一键获取微信视频号、抖音、QQ音乐等热门内容

全平台网络资源下载神器&#xff1a;一键获取微信视频号、抖音、QQ音乐等热门内容 【免费下载链接】res-downloader 资源下载器、网络资源嗅探&#xff0c;支持微信视频号下载、网页抖音无水印下载、网页快手无水印视频下载、酷狗音乐下载等网络资源拦截下载! 项目地址: http…...

编程新知 2026/3/27 23:55:01

SpringBoot+Vue员工绩效系统实战：从数据库设计到权限控制的完整避坑指南

SpringBootVue员工绩效系统实战&#xff1a;从数据库设计到权限控制的完整避坑指南 在数字化转型浪潮下&#xff0c;企业绩效管理系统正从传统的Excel表格升级为智能化平台。本文将带您从零构建一个具备多维度考核、动态权限控制和可视化分析的绩效系统&#xff0c;重点解决实际…...

编程新知 2026/3/27 23:32:40

视觉语言模型VLM高效部署：基于TensorRT-LLM的C++推理实践

1. 视觉语言模型VLM与TensorRT-LLM的黄金组合 视觉语言模型&#xff08;VLM&#xff09;这两年真是火得不行&#xff0c;它能让AI同时理解图片和文字&#xff0c;像人类一样看图说话。但实际部署时&#xff0c;很多团队都会遇到性能瓶颈——特别是用Python直接推理时&#xff0…...

编程新知 2026/3/27 23:24:39

基尼系数 vs 信息增益：决策树划分标准选哪个？实测对比告诉你答案

基尼系数 vs 信息增益&#xff1a;决策树划分标准选哪个&#xff1f;实测对比告诉你答案 决策树算法作为机器学习中最直观的可解释模型&#xff0c;其核心在于如何选择最优特征进行节点划分。面对基尼系数&#xff08;Gini Index&#xff09;与信息增益&#xff08;Informatio…...

编程新知 2026/3/27 23:14:37

LeifHomieLib：ESP32/8266轻量级Homie v3 MQTT设备库

1. LeifHomieLib 项目概述LeifHomieLib 是一个专为 ESP8266 和 ESP32 平台设计的轻量级 Homie v3 协议实现库&#xff0c;其核心目标是为资源受限的物联网边缘节点提供符合 Homie 规范的 MQTT 设备抽象能力。该库并非 Homie v3 标准的全功能实现&#xff0c;而是聚焦于与 openH…...

编程新知 2026/3/27 21:39:57

Mplus实战：如何用随机截距交叉滞后模型（RI-CLPM）分析心理学纵向数据？

Mplus实战&#xff1a;随机截距交叉滞后模型&#xff08;RI-CLPM&#xff09;在心理学纵向研究中的深度应用 心理学研究中&#xff0c;我们常常需要探索变量间的动态相互作用——比如焦虑和睡眠问题如何相互影响&#xff1f;传统交叉滞后模型&#xff08;CLPM&#xff09;虽然广…...

编程新知 2026/3/27 20:05:06

造相-Z-Image-Turbo亚洲美女LoRA创作实战：三个案例教你玩转AI绘画

造相-Z-Image-Turbo亚洲美女LoRA创作实战&#xff1a;三个案例教你玩转AI绘画 1. 认识造相-Z-Image-Turbo与亚洲美女LoRA 造相-Z-Image-Turbo是一款强大的AI图片生成模型&#xff0c;而亚洲美女LoRA则是专门针对亚洲人物特征优化的风格适配器。这个组合让普通用户也能轻松创作…...

编程新知 2026/3/27 19:49:03