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

HTML5-3-表格

news 文章来源：https://blog.csdn.net/weixin_43956958/article/details/132517347 2024/11/28 4:45:24

文章目录

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

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

编程语言排行榜

以下是2023年的编程语言排行榜&#xff08;按照流行度排序&#xff09;&#xff1a; Python&#xff1a;Python一直以来都是非常受欢迎的编程语言&#xff0c;它简洁、易读且功能强大。在数据科学、机器学习、人工智能等领域有广泛应用。 JavaScript&#xff1a;作为前端开发…...

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

基于语雀编辑器的在线文档编辑与查看

概述 语雀是一个非常优秀的文档和知识库工具&#xff0c;其编辑器更是非常好用&#xff0c;虽无开源版本&#xff0c;但有编译好的可以使用。本文基于语雀编辑器实现在线文档的编辑与文章的预览。 实现效果 实现 参考语雀编辑器官方文档&#xff0c;其实现需要引入以下文件&…...

编程日记 2023/9/10 20:27:06

开箱报告，Simulink Toolbox库模块使用指南（六）——S-Fuction模块（TLC）

文章目录 前言 Target Language Compiler&#xff08;TLC&#xff09; C MEX S-Function模块 编写TLC文件 生成代码 Tips 分析和应用 总结 前言 见《开箱报告&#xff0c;Simulink Toolbox库模块使用指南&#xff08;一&#xff09;——powergui模块》 见《开箱报告&am…...

编程日记 2023/9/10 20:26:05

Kafka详解

目录 一、消息系统 1、点对点的消息系统 2、发布-订阅消息系统 二、Apache Kafka 简介 三、Apache Kafka基本原理 3.1 分布式和分区&#xff08;distributed、partitioned&#xff09; 3.2 副本&#xff08;replicated &#xff09; 3.3 整体数据流程 3.4 消息传送机制…...

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

rabbitmq+springboot实现幂等性操作

文章目录 1.场景描述 1.1 场景11.2 场景2 2.原理3.实战开发 3.1 建表3.2 集成mybatis-plus3.3 集成RabbitMq 3.3.1 安装mq3.3.2 springBoot集成mq 3.4 具体实现 3.4.1 mq配置类3.4.2 生产者3.4.3 消费者 1.场景描述 消息中间件是分布式系统常用的组件&#xff0c;无论是异…...

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

ubuntu server 更改时区：上海

1. 打开终端&#xff0c;在命令行中以超级用户或具有sudo权限的用户身份运行以下命令&#xff1a; sudo dpkg-reconfigure tzdata 这会打开一个对话框&#xff0c;用于选择系统的时区设置。 2. 在对话框中&#xff0c;使用上下箭头键在地区列表中选择"Asia"&#x…...

编程日记 2023/9/10 20:23:00

java 整合 swagger-ui 步骤

1.在xml 中添加Swagger 相关依赖 <!-- springfox-swagger2 --><dependency><groupId>io.springfox</groupId><artifactId>springfox-swagger2</artifactId><version>2.9.2</version></dependency><!-- springfox-swa…...

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

介绍两款生成神经网络架构示意图的工具：NN-SVG和PlotNeuralNet

对于神经网络架构的可视化是很有意义的&#xff0c;可以在很大程度上帮助到我们清晰直观地了解到整个架构&#xff0c;我们在前面的 PyTorch的ONNX结合MNIST手写数字数据集的应用(.pth和.onnx的转换与onnx运行时) 有介绍&#xff0c;可以将模型架构文件(常见的格式都可以)在线上…...

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

iOS IdiotAVplayer实现视频分片缓存

文章目录 IdiotAVplayer 实现视频切片缓存一 iOS视频边下边播原理一 分片下载的实现1 分片下载的思路2 IdiotAVplayer 实现架构 三 IdiotAVplayer 代码解析IdiotPlayerIdiotResourceLoaderIdiotDownLoader IdiotAVplayer 实现视频切片缓存 一 iOS视频边下边播原理 初始化AVUR…...

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

SpringBootWeb请求-响应

HTTP请求 前后端分离 在这种模式下&#xff0c;前端技术人员基于"接口文档"&#xff0c;开发前端程序&#xff1b;后端技术人员也基于"接口文档"&#xff0c;开发后端程序。 由于前后端分离&#xff0c;对我们后端技术人员来讲&#xff0c;在开发过程中&a…...

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

浦东网站建设公司/每日精选12条新闻

折腾&#xff1a;期间&#xff0c;去尝试用PhantomJS去实现模拟浏览器的操作。-》-》去试试另外值得参考的帖子有&#xff1a; ~ /Users/crifan/dev/dev_tool/Headless\ Browser/phantomjs-2.1.1-macosx/bin➜ bin ./phantomjsphantomjs> phantom.version{"major&quo…...

编程日记 2024/11/27 18:14:27

易语言如何做网站吗/教你如何快速建站

java jdk在Linux下安装与环境变量的配置 by:授客 QQ&#xff1a;1033553122 linux环境&#xff1a;CentOS-6.0-x86_64-bin-DVD1.iso [rootlocalhost software]# ls jdk-6u13-linux-i586.bin jdk-6u13-linux-i586.zip 步骤1.创建并java安装目录 [rootlocalhost software]# mkdi…...

编程日记 2024/11/27 16:54:35

做论坛网站价格/广州白云区最新信息

问题 最新想通过界面批量输入数据到系统里面。 思路 使用自动化测试工具解决这个批量操作到问题。 Selenium 镜像 selenium/hubselenium/node-chrome 他们两者之间的关系&#xff0c;就是hub是管理者&#xff0c;node-chrome是被管理者。hub管理这所有测试集群的容器进程…...

编程日记 2024/11/27 15:29:29

网上做网站赚钱吗/百度竞价价格查询

<script type"text/javascript">function title(value){//这是回调函数&#xff01;&#xff01;&#xff01;&#xff01;alert(value);}function main(title, value){//这个主函数:在参数列表中&#xff0c;title作为一个参数传递进来&#xff0c;也就是上文…...

编程日记 2024/11/27 11:44:42

重庆模板建站代理/如何在百度上发布自己的广告

一 钉钉机器人使用场景钉钉机器人是钉钉群的高级扩展功能&#xff0c;可以简单实现将第三方服务信息聚合到钉钉群中&#xff0c;实现信息的自动同步&#xff0c;常用场景如下&#xff1a;聚合Github、Gitlab等源码管理服务&#xff0c;实现源码更新同步&#xff1b;聚合Trello、…...

编程日记 2024/11/27 8:30:52

淘客网站开发/网站建设怎么弄

Go语言动手写Web框架——前缀树路由什么是前缀树前缀树的结点参考链接: 极客兔兔主页.什么是前缀树 在进行web框架设计时&#xff0c;我们可以选用一个表用于记载路由地址与对应的Handler&#xff0c;但是这存在着一个问题&#xff0c;当遇到动态路由时&#xff08;例如&…...

编程日记 2024/11/27 7:18:02