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…...
挑战杯推荐项目
“人工智能”创意赛 - 智能艺术创作助手：借助大模型技术，开发能根据用户输入的主题、风格等要求，生成绘画、音乐、文学作品等多种形式艺术创作灵感或初稿的应用，帮助艺术家和创意爱好者激发创意、提高创作效率。 - 个性化梦境…...
第19节 Node.js Express 框架
Express 是一个为Node.js设计的web开发框架，它基于nodejs平台。 Express 简介 Express是一个简洁而灵活的node.js Web应用框架, 提供了一系列强大特性帮助你创建各种Web应用，和丰富的HTTP工具。 使用Express可以快速地搭建一个完整功能的网站。 Expre…...
【算法训练营Day07】字符串part1
文章目录 反转字符串反转字符串II替换数字 反转字符串 题目链接：344. 反转字符串 双指针法，两个指针的元素直接调转即可 class Solution {public void reverseString(char[] s) {int head 0;int end s.length - 1;while(head < end) {char temp …...
项目部署到Linux上时遇到的错误（Redis，MySQL，无法正确连接，地址占用问题）
Redis无法正确连接 在运行jar包时出现了这样的错误 查询得知问题核心在于Redis连接失败，具体原因是客户端发送了密码认证请求，但Redis服务器未设置密码 1.为Redis设置密码（匹配客户端配置） 步骤： 1）.修…...
Springboot社区养老保险系统小程序
一、前言 随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，社区养老保险系统小程序被用户普遍使用，为方…...
Unsafe Fileupload篇补充-木马的详细教程与木马分享（中国蚁剑方式）
在之前的皮卡丘靶场第九期Unsafe Fileupload篇中我们学习了木马的原理并且学了一个简单的木马文件 本期内容是为了更好的为大家解释木马（服务器方面的）的原理，连接，以及各种木马及连接工具的分享 文件木马：https://w…...
BLEU评分：机器翻译质量评估的黄金标准
BLEU评分：机器翻译质量评估的黄金标准 1. 引言 在自然语言处理(NLP)领域，衡量一个机器翻译模型的性能至关重要。BLEU (Bilingual Evaluation Understudy) 作为一种自动化评估指标，自2002年由IBM的Kishore Papineni等人提出以来，…...
Python竞赛环境搭建全攻略
Python环境搭建竞赛技术文章大纲 竞赛背景与意义 竞赛的目的与价值Python在竞赛中的应用场景环境搭建对竞赛效率的影响 竞赛环境需求分析 常见竞赛类型（算法、数据分析、机器学习等）不同竞赛对Python版本及库的要求硬件与操作系统的兼容性问题 Pyth…...
【无标题】湖北理元理律师事务所：债务优化中的生活保障与法律平衡之道
文/法律实务观察组 在债务重组领域，专业机构的核心价值不仅在于减轻债务数字，更在于帮助债务人在履行义务的同时维持基本生活尊严。湖北理元理律师事务所的服务实践表明，合法债务优化需同步实现三重平衡： 法律刚性（债…...
Spring事务传播机制有哪些？
导语： Spring事务传播机制是后端面试中的必考知识点，特别容易出现在“项目细节挖掘”阶段。面试官通过它来判断你是否真正理解事务控制的本质与异常传播机制。本文将从实战与源码角度出发，全面剖析Spring事务传播机制，帮助你答得有…...