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

HTML5-3-表格

news 2025/9/10 7:55:26

文章目录

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

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

SkyWalking 10.2.0 SWCK 配置过程

SkyWalking 10.2.0 & SWCK 配置过程 skywalking oap-server & ui 使用Docker安装在K8S集群以外&#xff0c;K8S集群中的微服务使用initContainer按命名空间将skywalking-java-agent注入到业务容器中。 SWCK有整套的解决方案&#xff0c;全安装在K8S群集中。 具体可参…...

编程新知 2025/8/23 5:51:08

51c自动驾驶~合集58

我自己的原文哦~ https://blog.51cto.com/whaosoft/13967107 #CCA-Attention 全局池化局部保留&#xff0c;CCA-Attention为LLM长文本建模带来突破性进展 琶洲实验室、华南理工大学联合推出关键上下文感知注意力机制&#xff08;CCA-Attention&#xff09;&#xff0c;…...

编程新知 2025/9/7 8:53:10

DeepSeek 赋能智慧能源：微电网优化调度的智能革新路径

目录 一、智慧能源微电网优化调度概述1.1 智慧能源微电网概念1.2 优化调度的重要性1.3 目前面临的挑战 二、DeepSeek 技术探秘2.1 DeepSeek 技术原理2.2 DeepSeek 独特优势2.3 DeepSeek 在 AI 领域地位 三、DeepSeek 在微电网优化调度中的应用剖析3.1 数据处理与分析3.2 预测与…...

编程新知 2025/6/15 19:07:20

【力扣数据库知识手册笔记】索引

索引 索引的优缺点 优点1. 通过创建唯一性索引&#xff0c;可以保证数据库表中每一行数据的唯一性。2. 可以加快数据的检索速度&#xff08;创建索引的主要原因&#xff09;。3. 可以加速表和表之间的连接&#xff0c;实现数据的参考完整性。4. 可以在查询过程中&#xff0c;…...

编程新知 2025/9/9 10:11:34

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

编程新知 2025/9/9 14:50:29

家政维修平台实战20：权限设计

目录 1 获取工人信息2 搭建工人入口3 权限判断总结 目前我们已经搭建好了基础的用户体系&#xff0c;主要是分成几个表&#xff0c;用户表我们是记录用户的基础信息&#xff0c;包括手机、昵称、头像。而工人和员工各有各的表。那么就有一个问题&#xff0c;不同的角色&#xf…...

编程新知 2025/8/22 5:05:10

AI病理诊断七剑下天山，医疗未来触手可及

一、病理诊断困局&#xff1a;刀尖上的医学艺术 1.1 金标准背后的隐痛 病理诊断被誉为"诊断的诊断"&#xff0c;医生需通过显微镜观察组织切片&#xff0c;在细胞迷宫中捕捉癌变信号。某省病理质控报告显示&#xff0c;基层医院误诊率达12%-15%&#xff0c;专家会诊…...

编程新知 2025/9/7 2:22:03

IP如何挑？2025年海外专线IP如何购买？

你花了时间和预算买了IP&#xff0c;结果IP质量不佳&#xff0c;项目效率低下不说&#xff0c;还可能带来莫名的网络问题&#xff0c;是不是太闹心了&#xff1f;尤其是在面对海外专线IP时&#xff0c;到底怎么才能买到适合自己的呢&#xff1f;所以&#xff0c;挑IP绝对是个技…...

编程新知 2025/8/2 3:45:54

Python+ZeroMQ实战：智能车辆状态监控与模拟模式自动切换

目录 关键点 技术实现1 技术实现2 摘要&#xff1a; 本文将介绍如何利用Python和ZeroMQ消息队列构建一个智能车辆状态监控系统。系统能够根据时间策略自动切换驾驶模式&#xff08;自动驾驶、人工驾驶、远程驾驶、主动安全&#xff09;&#xff0c;并通过实时消息推送更新车…...

编程新知 2025/7/8 17:11:44

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

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

编程新知 2025/9/7 8:46:23