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

html的表格标签

news 2026/5/19 6:45:39

previewfile_2509430104

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. 表格标签有一些属性，可以用于设置大小边…...

编程日记 2024/2/16 18:12:47

蓝桥杯（Web大学组）2022省赛真题：展开你的扇子

思路： transform-origin: center bottom;使盒子旋转时，以底部的中心为坐标原点（题目已给出） 对每个盒子使用transform: rotate();实现旋转笔记： 设置悬浮旋转时， #box div:hover #item6{ } 为什…...

编程日记 2024/2/16 18:10:45

复习基础知识1

局部变量写程序时，程序员经常会用到局部变量汇编中寄存器、栈，可写区段、堆，函数的局部变量该存在哪里呢？ 注意：局部变量有易失性一旦函数返回，则所有局部变量会失效。考虑到这种特性，人们…...

编程日记 2024/2/16 18:09:44

java8-用流收集数据-6

本章内容口用co1lectors类创建和使用收集器口将数据流归约为一个值口汇总:归约的特殊情况数据分组和分区口口开发自己的自定义收集器我们在前一章中学到，流可以用类似于数据库的操作帮助你处理集合。你可以把Java8的流看作花哨又懒惰的数据集迭代器。它们…...

编程日记 2024/2/16 18:07:42

[前端开发] JavaScript基础知识 [上]

下篇：JavaScript基础知识 [下] JavaScript基础知识 [上] 引言语句、标识符和变量JavaScript引入注释与输出数据类型运算符条件语句与循环语句引言 JavaScript是一种广泛应用于网页开发的脚本语言，具有重要的前端开发和部分后端开发的应用。通过JavaSc…...

编程日记 2024/2/16 18:03:38

初识Qt | 从安装到编写Hello World程序

文章目录 1.前端开发简单分类2.Qt的简单介绍3.Qt的安装和环境配置4.创建简单的Qt项目 1.前端开发简单分类前端开发，这里是一个广义的概念，不单指网页开发，它的常见分类网页开发：前端开发的主要领域，使用HTML、CSS …...

编程日记 2024/2/16 17:57:32

机器学习：过拟合和欠拟合的介绍与解决方法

过拟合和欠拟合的表现和解决方法。其实除了欠拟合和过拟合，还有一种是适度拟合，适度拟合就是我们模型训练想要达到的状态，不过适度拟合这个词平时真的好少见。过拟合过拟合的表现模型在训练集上的表现非常好，但是在测试集…...

编程日记 2024/2/16 17:56:31

变分自编码器（VAE）PyTorch Lightning 实现

✅作者简介：人工智能专业本科在读，喜欢计算机与编程，写博客记录自己的学习历程。 🍎个人主页：小嗷犬的个人主页 🍊个人网站：小嗷犬的技术小站 🥭个人信条：为天地立心&…...

编程日记 2024/2/16 17:55:31

设备驱动开发_1

可加载模块如何工作的主要内容描述可加载模块优势使用模块命令效率使用和定义模块密钥和模块工作1 描述可加载模块优势开发周期优势：静态模块在/boot下的vmlinuz中，需要配置、编译、重启。开发周期长。 LKM 不需要重启。开发周期优于静态模块。 2 使用模块命令效率…...

编程日记 2024/2/16 17:52:27

C语言位域（Bit Fields）知识点精要解析

在C语言中，位域（Bit Field）是一种独特的数据结构特性，它允许程序员在结构体（struct）中定义成员变量，并精确指定其占用的位数。通过使用位域，我们可以更高效地利用存储空间&#xff0…...

编程日记 2024/2/16 17:51:26

离散数学——图论（笔记及思维导图）

离散数学——图论（笔记及思维导图） 目录大纲内容参考大纲内容参考笔记来自【电子科大】离散数学王丽杰...

编程日记 2024/2/16 17:49:22

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…...

编程日记 2024/2/16 17:47:20

Java学习第十四节之冒泡排序

冒泡排序 package array;import java.util.Arrays;//冒泡排序 //1.比较数组中，两个相邻的元素，如果第一个数比第二个数大，我们就交换他们的位置 //2.每一次比较，都会产生出一个最大，或者最小的数字 //3.下一轮则可以少…...

编程日记 2024/2/16 17:44:16

第1章计算机网络体系结构-1.1计算机网络概述

1.1.1计算机网络概念计算机网络是将一个分散的，具有独立功能的计算机系统通过通信设备与路线连接起来，由功能完善的软件实现资源共享和信息传递的系统。(计算机网络就是一些互连的，自治的计算机系统的集合) 1.1.2计算机网络的组成从不同角…...

编程日记 2024/2/16 17:43:16

蓝桥杯：C++排序

排序排序和排列是算法题目常见的基本算法。几乎每次蓝桥杯软件类大赛都有题目会用到排序或排列。常见的排序算法如下。第(3)种排序算法不是基于比较的，而是对数值按位划分，按照以空间换取时间的思路来排序。看起来它们的复杂度更好，但实际…...

编程日记 2024/2/16 17:36:08

数据结构－堆

1.容器容器用于容纳元素集合，并对元素集合进行管理和维护． 传统意义上的管理和维护就是：增，删，改，查． 我们分析每种类型容器时，主要分析其增，删，改&#xff…...

编程日记 2024/2/16 17:33:04

奔跑吧小恐龙（Java）

前言 Google浏览器内含了一个小彩蛋当没有网络连接时，浏览器会弹出一个小恐龙，当我们点击它时游戏就会开始进行，大家也可以玩一下试试，网址：恐龙快跑 - 霸王龙游戏. (ur1.fun) 今天我们也可以用Java来简单的实现一下这…...

编程日记 2024/2/16 17:27:58

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 文件&#xff…...

编程日记 2024/2/16 17:16:47

docker 2：安装

docker 2：安装 ‍ ubuntu 安装 docker sudo apt install docker.io‍ 把当前用户放进 docker 用户组，避免每次运行 docker 命都要使用 sudo 或者 root 权限。 sudo usermod -aG docker $USERid $USER 看到用户已加入 docker 组 ‍ …...

编程日记 2024/2/16 17:15:46

LeetCode Python - 19.删除链表的倒数第N个结点

目录题目答案运行结果题目给你一个链表，删除链表的倒数第 n 个结点，并且返回链表的头结点。示例 1： 输入：head [1,2,3,4,5], n 2 输出：[1,2,3,5] 示例 2： 输入：head [1], n 1 输出&a…...

编程日记 2024/2/16 17:11:43

Webpack优化实战：从配置到性能调优

Webpack优化实战：从配置到性能调优大家好，我是蔓蔓。在大厂工作时，我负责过多个大型项目的Webpack配置和优化。今天我来和大家分享Webpack优化的实战技巧。基础优化合理配置mode // webpack.config.js module.exports {mode: process.env…...

编程新知 2026/5/19 6:35:13