html的表格标签
html的表格标签
table标签:表示整个表格tr:表示表格的一行td:表示一个单元格th:表示表头单元格.会居中加粗thead:表格的头部区域 (注意和th区分,范围是比th要大的).tbody:表格得到主体区域.
table包含tr , tr包含td或者th.
表格标签有一些属性，可以用于设置大小边框等，但是一般使用CSS方式来设置，这些属性都要放到 table标签中.
. align是表格相对于周围元素的对齐方式.align="center"(不是内部元素的对齐方式)border表示动框。1表示有边框(数字越大,边框越粗)，""表示没边框.cellpadding:内容距离边框的距离，默认1像素cellspacing:单元格之间的距离，默认为2像素width / height:设置尺寸.
注意,这几个属性, vscode都提示不出来.
样例如下
| 姓名 | 性别 | 年龄 |
|---|---|---|
| 张三 | 男 | 13 |
| 李四 | 男 | 14 |
| 王五 | 女 | 15 |
用html代码实现上述的表格
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="500" height="300" cellspacing ="0" cellpadding = "80" align="center"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>张三</td><td>男</td><td>13</td></tr><tr><td>李四</td><td>男</td><td>14</td></tr><tr><td>王五</td><td>女</td><td>15</td></tr></table>
</body>
</html>
代码在浏览器运行效果
thead里面的内容居中并且加粗展示
对表头进行代码改进
通常情况下，我们把表头相关的信息放在thead中，表格内容相关的信息放在tbody中
运行效果
进行单元格合并
代码
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><table border="1" width="500" height="300" cellspacing ="0" cellpadding = "80" align="center"><thead><tr><th>姓名</th><th>性别</th><th>年龄</th></tr></thead><tbody><tr><td>张三</td><td rowspan="2">男</td><td>13</td></tr><tr><td>李四</td><!-- <td>男</td> --><td>14</td></tr><tr><td colspan="2">王五/女</td><!-- <td>女</td> --><td>15</td></tr></tbody></table>
</body>
</html>
最终运行效果
相关文章：
html的表格标签
html的表格标签 table标签:表示整个表格tr:表示表格的一行td:表示一个单元格th:表示表头单元格.会居中加粗thead:表格的头部区域 (注意和th区分,范围是比th要大的).tbody:表格得到主体区域. table包含tr , tr包含td或者th. 表格标签有一些属性，可以用于设置大小边…...
蓝桥杯（Web大学组）2022省赛真题：展开你的扇子
思路： transform-origin: center bottom;使盒子旋转时，以底部的中心为坐标原点（题目已给出） 对每个盒子使用transform: rotate();实现旋转 笔记： 设置悬浮旋转时， #box div:hover #item6{ } 为什…...
复习基础知识1
局部变量 写程序时，程序员经常会用到局部变量 汇编中寄存器、栈，可写区段、堆，函数的局部变量该存在哪里呢？ 注意：局部变量有易失性 一旦函数返回，则所有局部变量会失效。 考虑到这种特性，人们…...
java8-用流收集数据-6
本章内容口用co1lectors类创建和使用收集器 口将数据流归约为一个值 口汇总:归约的特殊情况 数据分组和分区口 口 开发自己的自定义收集器 我们在前一章中学到，流可以用类似于数据库的操作帮助你处理集合。你可以把Java8的流看作花哨又懒惰的数据集迭代器。它们…...
[前端开发] JavaScript基础知识 [上]
下篇：JavaScript基础知识 [下] JavaScript基础知识 [上] 引言语句、标识符和变量JavaScript引入注释与输出数据类型运算符条件语句与循环语句 引言 JavaScript是一种广泛应用于网页开发的脚本语言，具有重要的前端开发和部分后端开发的应用。通过JavaSc…...
初识Qt | 从安装到编写Hello World程序
文章目录 1.前端开发简单分类2.Qt的简单介绍3.Qt的安装和环境配置4.创建简单的Qt项目 1.前端开发简单分类 前端开发，这里是一个广义的概念，不单指网页开发，它的常见分类 网页开发：前端开发的主要领域，使用HTML、CSS …...
机器学习：过拟合和欠拟合的介绍与解决方法
过拟合和欠拟合的表现和解决方法。 其实除了欠拟合和过拟合，还有一种是适度拟合，适度拟合就是我们模型训练想要达到的状态，不过适度拟合这个词平时真的好少见。 过拟合 过拟合的表现 模型在训练集上的表现非常好，但是在测试集…...
变分自编码器（VAE）PyTorch Lightning 实现
✅作者简介：人工智能专业本科在读，喜欢计算机与编程，写博客记录自己的学习历程。 🍎个人主页：小嗷犬的个人主页 🍊个人网站：小嗷犬的技术小站 🥭个人信条：为天地立心&…...
设备驱动开发_1
可加载模块如何工作的 主要内容 描述可加载模块优势使用模块命令效率使用和定义模块密钥和模块工作1 描述可加载模块优势 开发周期优势： 静态模块在/boot下的vmlinuz中，需要配置、编译、重启。 开发周期长。 LKM 不需要重启。 开发周期优于静态模块。 2 使用模块命令效率…...
C语言位域（Bit Fields）知识点精要解析
在C语言中，位域（Bit Field）是一种独特的数据结构特性，它允许程序员在结构体（struct）中定义成员变量，并精确指定其占用的位数。通过使用位域，我们可以更高效地利用存储空间࿰…...
离散数学——图论（笔记及思维导图）
离散数学——图论（笔记及思维导图） 目录 大纲 内容 参考 大纲 内容 参考 笔记来自【电子科大】离散数学 王丽杰...
opencv图像像素的读写操作
void QuickDemo::pixel_visit_demo(Mat & image) {int w image.cols;//宽度int h image.rows;//高度int dims image.channels();//通道数 图像为灰度dims等于一 图像为彩色时dims等于三 for (int row 0; row < h; row) {for (int col 0; col < w; col) {if…...
Java学习第十四节之冒泡排序
冒泡排序 package array;import java.util.Arrays;//冒泡排序 //1.比较数组中，两个相邻的元素，如果第一个数比第二个数大，我们就交换他们的位置 //2.每一次比较，都会产生出一个最大，或者最小的数字 //3.下一轮则可以少…...
第1章 计算机网络体系结构-1.1计算机网络概述
1.1.1计算机网络概念 计算机网络是将一个分散的，具有独立功能的计算机系统通过通信设备与路线连接起来，由功能完善的软件实现资源共享和信息传递的系统。(计算机网络就是一些互连的，自治的计算机系统的集合) 1.1.2计算机网络的组成 从不同角…...
蓝桥杯：C++排序
排序 排序和排列是算法题目常见的基本算法。几乎每次蓝桥杯软件类大赛都有题目会用到排序或排列。常见的排序算法如下。 第(3)种排序算法不是基于比较的，而是对数值按位划分，按照以空间换取时间的思路来排序。看起来它们的复杂度更好，但实际…...
数据结构－堆
1.容器 容器用于容纳元素集合，并对元素集合进行管理和维护． 传统意义上的管理和维护就是：增，删，改，查． 我们分析每种类型容器时，主要分析其增，删，改ÿ…...
奔跑吧小恐龙（Java）
前言 Google浏览器内含了一个小彩蛋当没有网络连接时，浏览器会弹出一个小恐龙，当我们点击它时游戏就会开始进行，大家也可以玩一下试试，网址：恐龙快跑 - 霸王龙游戏. (ur1.fun) 今天我们也可以用Java来简单的实现一下这…...
Ubuntu 1804 And Above Coredump Settings
查看 coredump 是否开启 # 查询， 0 未开启， unlimited 开启 xiaoUbuntu:/var/core$ ulimit -c 0# 开启 xiaoUbuntu:/var/core$ ulimit -c unlimited查看 coredump 保存路径 默认情况下，Ubuntu 使用 apport 服务处理 coredump 文件ÿ…...
docker 2：安装
docker 2：安装 ubuntu 安装 docker sudo apt install docker.io 把当前用户放进 docker 用户组，避免每次运行 docker 命都要使用 sudo 或者 root 权限。 sudo usermod -aG docker $USERid $USER 看到用户已加入 docker 组 …...
LeetCode Python - 19.删除链表的倒数第N个结点
目录 题目答案运行结果 题目 给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。 示例 1： 输入：head [1,2,3,4,5], n 2 输出：[1,2,3,5] 示例 2： 输入：head [1], n 1 输出&a…...
IPD实战指南：CBB模块化设计如何加速产品创新与资源整合
1. CBB模块化设计的本质与价值 第一次接触CBB这个概念时，我正负责一款智能家居产品的研发。当时团队为了赶进度，每个新产品都从零开始设计电路板，结果发现80%的功能模块都是重复的。这种低效的开发方式让我开始思考：能不能像搭积木…...
OpenClaw任务编排：GLM-4.7-Flash驱动复杂工作流
OpenClaw任务编排：GLM-4.7-Flash驱动复杂工作流 1. 为什么需要任务编排？ 去年我接手了一个重复性极高的数据整理工作——每周需要从十几个不同来源收集数据，清洗后生成可视化报告。最初尝试用Python脚本自动化，但随着需求变化&a…...
Milvus向量数据库Docker安装避坑指南：从配置到可视化工具Attu的完整流程
Milvus向量数据库Docker安装避坑指南：从配置到可视化工具Attu的完整流程 当开发者第一次接触向量数据库时，往往会遇到各种意想不到的"坑"。作为一款开源的向量数据库，Milvus因其高性能和易用性而广受欢迎，但在Docker环境…...
OpenClaw多模态探索：Qwen3-32B+RTX4090D镜像截图转报告实践
OpenClaw多模态探索：Qwen3-32BRTX4090D镜像截图转报告实践 1. 为什么选择这个技术组合 上周团队头脑风暴时，我遇到了一个典型痛点：会议室白板上写满了讨论要点，但拍照后整理成电子版纪要需要手动誊写半小时。作为技术负责人&…...
D-Net：动态大内核与特征融合如何革新三维医学影像分割？
1. 为什么医学影像分割需要动态大内核？ 医学影像分割就像给CT或MRI照片上的器官、肿瘤画精确边界线。传统方法像用固定倍数的放大镜观察——要么看不清细节（小内核），要么错过整体结构（大内核）。我在处理腹…...
实战构建c盘清理桌面应用，快马ai生成可部署完整解决方案
今天想和大家分享一个实战项目：用Python开发一个C盘清理桌面应用。这个工具不仅能解决日常C盘空间不足的烦恼，还具备完整的图形界面和实用功能。最近在InsCode(快马)平台上尝试了快速生成和部署，整个过程特别顺畅。 项目背景与核心功能 开发这…...
Spring Boot 3.2项目实战：5分钟搞定Tomcat虚拟线程配置，让你的接口吞吐量翻倍
Spring Boot 3.2虚拟线程实战：Tomcat配置优化与性能飞跃指南 当你的电商大促接口突然面临每秒上万请求，或者文件上传服务在高并发下响应缓慢时，传统线程池往往成为性能瓶颈。Spring Boot 3.2与Java 21的虚拟线程组合，正在重新定义…...
Matlab中的QRBiGRU分位数回归双向门控循环单元模型：多图输出与多指标评估的时间序列区间预测
Matlab实现基于QRBiGRU分位数回归双向门控循环单元的时间序列区间预测模型： 1.Matlab实现基于QRBiGRU分位数回归双向门控循环单元的时间序列区间预测模型 2.多图输出、多指标输出(MAE、RMSE、MSE、R2)，多输入单输出，含不同置信区间图、概率密…...
零代码也能构建智能登录系统？Dify工作流让你告别繁琐的前端开发
零代码也能构建智能登录系统？Dify工作流让你告别繁琐的前端开发 【免费下载链接】Awesome-Dify-Workflow 分享一些好用的 Dify DSL 工作流程，自用、学习两相宜。 Sharing some Dify workflows. 项目地址: https://gitcode.com/GitHub_Trending/aw/Awes…...
如何通过BewlyBewly实现B站界面的个性化焕新体验？
如何通过BewlyBewly实现B站界面的个性化焕新体验？ 【免费下载链接】BewlyBewly Improve your Bilibili homepage by redesigning it, adding more features, and personalizing it to match your preferences. 项目地址: https://gitcode.com/gh_mirrors/be/Bewly…...