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

HTML5-3-表格

news 2026/2/10 22:54:29

文章目录

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

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

AI-调查研究-01-正念冥想有用吗？对健康的影响及科学指南

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

编程新知 2026/2/8 5:11:39

Xshell远程连接Kali（默认 | 私钥）Note版

前言:xshell远程连接&#xff0c;私钥连接和常规默认连接 任务一 开启ssh服务 service ssh status //查看ssh服务状态 service ssh start //开启ssh服务 update-rc.d ssh enable //开启自启动ssh服务 任务二 修改配置文件 vi /etc/ssh/ssh_config //第一…...

编程新知 2026/1/28 2:18:42

JavaScript 中的 ES|QL：利用 Apache Arrow 工具

作者&#xff1a;来自 Elastic Jeffrey Rengifo 学习如何将 ES|QL 与 JavaScript 的 Apache Arrow 客户端工具一起使用。 想获得 Elastic 认证吗&#xff1f;了解下一期 Elasticsearch Engineer 培训的时间吧&#xff01; Elasticsearch 拥有众多新功能&#xff0c;助你为自己…...

编程新知 2026/1/23 7:23:58

基于ASP.NET+ SQL Server实现（Web）医院信息管理系统

医院信息管理系统 1. 课程设计内容 在 visual studio 2017 平台上&#xff0c;开发一个“医院信息管理系统”Web 程序。 2. 课程设计目的 综合运用 c#.net 知识&#xff0c;在 vs 2017 平台上&#xff0c;进行 ASP.NET 应用程序和简易网站的开发&#xff1b;初步熟悉开发一…...

编程新知 2026/2/10 13:19:02

dedecms 织梦自定义表单留言增加ajax验证码功能

增加ajax功能模块&#xff0c;用户不点击提交按钮&#xff0c;只要输入框失去焦点&#xff0c;就会提前提示验证码是否正确。 一&#xff0c;模板上增加验证码 <input name"vdcode"id"vdcode" placeholder"请输入验证码" type"text&quo…...

编程新知 2026/2/5 17:51:52

css3笔记 （1） 自用

outline: none 用于移除元素获得焦点时默认的轮廓线 broder:0 用于移除边框 font-size&#xff1a;0 用于设置字体不显示 list-style: none 消除<li> 标签默认样式 margin: xx auto 版心居中 width:100% 通栏 vertical-align 作用于行内元素 / 表格单元格&#xff…...

编程新知 2025/10/11 5:18:43

【HarmonyOS 5 开发速记】如何获取用户信息（头像/昵称/手机号）

1.获取 authorizationCode&#xff1a; 2.利用 authorizationCode 获取 accessToken&#xff1a;文档中心 3.获取手机&#xff1a;文档中心 4.获取昵称头像&#xff1a;文档中心 首先创建 request 若要获取手机号&#xff0c;scope必填 phone&#xff0c;permissions 必填 …...

编程新知 2025/9/17 2:39:21

Element Plus 表单(el-form)中关于正整数输入的校验规则

目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入&#xff08;联动&#xff09;2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...

编程新知 2025/11/10 19:08:45

python执行测试用例，allure报乱码且未成功生成报告

allure执行测试用例时显示乱码&#xff1a;‘allure’ &#xfffd;&#xfffd;&#xfffd;&#xfffd;&#xfffd;ڲ&#xfffd;&#xfffd;&#xfffd;&#xfffd;ⲿ&#xfffd;&#xfffd;&#xfffd;Ҳ&#xfffd;&#xfffd;&#xfffd;ǿ&#xfffd;&am…...

编程新知 2026/2/7 4:21:44

基于TurtleBot3在Gazebo地图实现机器人远程控制

1. TurtleBot3环境配置 # 下载TurtleBot3核心包 mkdir -p ~/catkin_ws/src cd ~/catkin_ws/src git clone -b noetic-devel https://github.com/ROBOTIS-GIT/turtlebot3.git git clone -b noetic https://github.com/ROBOTIS-GIT/turtlebot3_msgs.git git clone -b noetic-dev…...

编程新知 2026/2/6 11:54:58