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…...
利用最小二乘法找圆心和半径
#include <iostream> #include <vector> #include <cmath> #include <Eigen/Dense> // 需安装Eigen库用于矩阵运算 // 定义点结构 struct Point { double x, y; Point(double x_, double y_) : x(x_), y(y_) {} }; // 最小二乘法求圆心和半径 …...
css实现圆环展示百分比，根据值动态展示所占比例
代码如下 <view class""><view class"circle-chart"><view v-if"!!num" class"pie-item" :style"{background: conic-gradient(var(--one-color) 0%,#E9E6F1 ${num}%),}"></view><view v-else …...
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする
日语学习-日语知识点小记-构建基础-JLPT-N4阶段（33）：にする 1、前言（1）情况说明（2）工程师的信仰2、知识点（1） にする1，接续：名词＋にする2，接续：疑问词＋にする3，（A）は（B）にする。（2）復習：（1）复习句子（2）ために ＆ ように（３）そう（４）にする3、…...
【C语言练习】080. 使用C语言实现简单的数据库操作
080. 使用C语言实现简单的数据库操作 080. 使用C语言实现简单的数据库操作使用原生APIODBC接口第三方库ORM框架文件模拟1. 安装SQLite2. 示例代码：使用SQLite创建数据库、表和插入数据3. 编译和运行4. 示例运行输出：5. 注意事项6. 总结080. 使用C语言实现简单的数据库操作 在…...
今日科技热点速览
🔥 今日科技热点速览 🎮 任天堂Switch 2 正式发售 任天堂新一代游戏主机 Switch 2 今日正式上线发售，主打更强图形性能与沉浸式体验，支持多模态交互，受到全球玩家热捧 。 🤖 人工智能持续突破 DeepSeek-R1&…...
中关于正整数输入的校验规则)
Element Plus 表单(el-form)中关于正整数输入的校验规则
目录 1 单个正整数输入1.1 模板1.2 校验规则 2 两个正整数输入（联动）2.1 模板2.2 校验规则2.3 CSS 1 单个正整数输入 1.1 模板 <el-formref"formRef":model"formData":rules"formRules"label-width"150px"…...
Reasoning over Uncertain Text by Generative Large Language Models
https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829https://ojs.aaai.org/index.php/AAAI/article/view/34674/36829 1. 概述 文本中的不确定性在许多语境中传达，从日常对话到特定领域的文档（例如医学文档）（Heritage 2013；Landmark、Gulbrandsen 和 Svenevei…...
视觉slam十四讲实践部分记录——ch2、ch3
ch2 一、使用g++编译.cpp为可执行文件并运行(P30) g++ helloSLAM.cpp ./a.out运行 二、使用cmake编译 mkdir build cd build cmake .. makeCMakeCache.txt 文件仍然指向旧的目录。这表明在源代码目录中可能还存在旧的 CMakeCache.txt 文件，或者在构建过程中仍然引用了旧的路…...
JVM 内存结构 详解
内存结构 运行时数据区： Java虚拟机在运行Java程序过程中管理的内存区域。 程序计数器： 线程私有，程序控制流的指示器，分支、循环、跳转、异常处理、线程恢复等基础功能都依赖这个计数器完成。 每个线程都有一个程序计数…...
日常一水C
多态 言简意赅：就是一个对象面对同一事件时做出的不同反应 而之前的继承中说过，当子类和父类的函数名相同时，会隐藏父类的同名函数转而调用子类的同名函数，如果要调用父类的同名函数，那么就需要对父类进行引用&#…...