20.3 HTML 表格

2023-07-29_00006

1. table表格

table标签是HTML中用来创建表格的元素. table标签通常包含以下子标签: 
- th标签: 表示表格的表头单元格(table header), 用于描述列的标题.
- tr标签: 表示表格的行(table row).
- td标签: 表示表格的单元格(table data), 通常位于tr标签内, 用于放置单元格中的数据.
通常情况下, table, tr和td(或th)标签是一起使用的, 它们共同构成了一个完整的表格结构.

<table><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr>
</table>

2023-07-28_00007

2. 边框属性

<table>表格标签有一个border边宽的属性值, 这个属性决定了边框的宽度, 默认情况下这个属性值是0px, 所以看不见边框.
border属性可以设置整个表格的边框宽度, 样式和颜色.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table1</title>
</head>
<body>
<table border="1px"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr>
</table>
</body>
</html>

image-20230728172642930

3. 宽高属性

默认情况下, 表格的宽度和高度会根据表格中内容的尺寸自动调整, 以适应内容的大小. 表格会尽量缩小或扩展以容纳单元格中的内容.
width和height属性: 来指定表格的宽度和高度.table标签中设置作用与全部的单元格, td标签中设置作用于当前单元格(优先).

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table2</title>
</head>
<body>
<table border="1px" height="300" width="300"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>25</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr>
</table>
</body>
</html>

image-20230728174047893

table设置的长宽会平分给每行每列, 但有一个最低标准, 如果平分后, tr标签长宽不能够完整的显示内容,
会增加长宽来保证内容能够完整的显示(HTML会优先显示文本信息), 同时会抢占其他单元格的空间.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table4</title>
</head>
<body>
<table border="1px" height="300" width="300"><tr><th>姓名</th><th>年龄</th><th>性别</th></tr><tr><td>张三</td><td>2513213132132132123131312312312123132132132132132132132132131</td><td>男</td></tr><tr><td>李四</td><td>30</td><td>女</td></tr>
</table>
</body>
</html>

image-20230728175328697

table中设置的宽高限制td的宽高上限, 不会超过table设置的长宽.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table5</title>
</head>
<body>
<table border="1px" width="100"><tr><td width="100">1</td><td width="100">2</td><td>3</td></tr>
</table>
</body>
</html>

2023-07-28_00012

同一行固定一个高, 一列中固定一个宽, 谁先设置就以谁为准.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table6</title>
</head>
<body>
<table border="1px"><tr><td height="150">1</td><td height="100">2</td></tr>
</table>
</body>
</html>

image-20230728184852273

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table7</title>
</head>
<body>
<table border="1px"><tr><td width="150">1</td>
</tr>
<tr ><td width="200">2</td>
</tr>
</table>
</body>
</html>

image-20230728185014373

4. 文字对齐方式

4.1 水平对齐

在table, tr和td, 标签中align属性可以用于控制水平对齐方式.
* 1. 在table中设置align属性控制表格在水平方向的对齐方式(参照位置-->页面 )。
* 2. 在tr中设置align属性控制当前行中所有单元格中的内容在水平方向的对齐方式(参照位置-->table标签)。
* 3. 在td中设置align属性控制单元格内容在水平方向的对齐方式(参照位置-->table标签)。align属性值:
left: 左对齐.
center: 居中对齐.
right:  右对齐.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table8</title>
</head>
<body>
<table border="1" width="600" align="center"><tr align="center"><td>姓名</td><td>性别</td><td>年龄</td></tr><tr align="left"><td align="left">qq</td><td align="center">男</td><td align="right">18</td></tr><tr align="center"><td>kid</td><td>男</td><td>19</td></tr><tr align="right"><td>qz</td><td>女</td><td>20</td>
</table>
</table>
</body>
</html>

image-20230728190300058

4.2 垂直对齐

在tr和td, 标签中valign属性可以用于控制垂直对齐方式(不能用于table标签).
* 1. 在tr中设置valign属性可以控单前行中所有单元格中的内容在垂直方向的对齐方式.
* 2. 在td中设置valign属性可以控制单元格内容在垂直方向的对齐方式.垂直设置valign属性：
top: 向上对齐.
middle: 居中对齐.
bottom: 向下对齐.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>垂直方向对齐</title>
</head>
<body>
<table border="1" height="300" valign="bottom"><tr valign="top"><td>姓名</td><td valign="middle">性别</td><td valign="bottom">年龄</td></tr><tr><td valign="top">qq</td><td>男</td><td valign="bottom">18</td></tr><tr valign="bottom"><td valign="top">kid</td><td valign="middle">男</td><td>19</td></tr>
</table>
</body>
</html>

image-20230728190813656

5. 外边距与内边距

外边距与内边距距属性只能在table标签使用.外边距: 单元格与单元格之间的距离, cellspacing属性默认为2px.
内边距: 单元格与文本之间的距离,   cellpadding属性默认为1px.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>外边距</title>
</head>
<body>
<table border="1" height="400" width="400" cellspacing="20"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>qq</td><td>男</td><td>18</td></tr><tr><td>kid</td><td>男</td><td>19</td></tr></table></body>
</html>

image-20230728192210733

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table11</title>
</head>
<body>
<table border="1" height="300" width="300" cellpadding="30"><tr><td>姓名</td><td>性别</td><td>年龄</td></tr><tr><td>qq</td><td>男</td><td>18</td></tr><tr><td>kid</td><td>男</td><td>19</td></tr></table></body>
</html>

image-20230728192315509

6. 背景颜色

在table, tr, td中可以使用bgcolor属性设置背景颜色.
table标签中设置: 作用于整个表格, 包含表单元格内外边距.
tr标签中设置: 作用于当前行所有单元格, 包含内间距.
td标签中设置: 作用于当前单元格，包含内间距。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>细线表格</title>
</head>
<body><table bgcolor="black"   cellpadding="50px" cellspacing="0.4"><tr bgcolor="white"><td bgcolor="red">1</td><td>2</td></tr><tr bgcolor="white"><td>3</td><td>4</td></tr></table>
</body>
</html>

不设置边框, 以背景颜色设置一个细线表格:表格设置为黑色的, 外间距也是黑色了, 将外边距设置为0.4或以上px(太小就会看不见, 需要缩放网页去看...).
所有的行设置为白色, 某个单元格设置为红色.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table13</title>
</head>
<body>
<table bgcolor="black" cellspacing="0.4px"><tr bgcolor="white"><td>1</td><td>2</td></tr><tr><td bgcolor="white">3</td><td bgcolor="red">4</td></tr>
</table>
</body>
</html>

image-20230728194553432

7. 标题

在table标签中可以使用caption标签设置表格的标题, 标题处于表格的中间.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格标题</title>
</head>
<body><table border="1"><caption>信息统计</caption><tr><th>姓名</th><th>性别</th><th>年龄</th></tr><tr><td>kid</td><td>男</td><td>19</td></tr><tr><td>qz</td><td>nv</td><td>18</td></tr></table>
</body>
</html>

image-20230728201446789

8. 表格的完整结构

由于表格中存储的数据比较复杂, 为类似方标管理和阅读以及提升语义, 对表格中存储的数据进行分类:
* 1. 表格标题 --> caption标签.
* 2. 表格表头的信息 --> thead标签.
* 3. 表格主体的信息 --> tbody标签.
* 4. 表格的尾页信息(脚注或表注) --> tfoot标签.注意点:
* 1. 如果表格没有编写tbody, 浏览器会自动添加.
* 2. thead标签和tfoot标签有自己的默认高度, 不会随着表格的高度标化而变化.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>表格的结构</title>
</head>
<body>
<table border="1" align="center" height="400px" width="500px"><caption>学生信息</caption><thead><tr><th>姓名</th><th>年龄</th><th>身高</th></tr></thead><tbody><tr><td>kid</td><td>19</td><td>175</td></tr><tr><td>qz</td><td>18</td><td>170</td></tr><tr><td>qq</td><td>18</td><td>165</td></tr></tbody><tfoot><tr><td>平均值</td><td>18.33</td><td>160</td></tr></tfoot>
</table>
</body>
</html>

image-20230728231127123

9. 单元格合并

colspan属性: 水平方向合并单元格.
rowspan属性: 垂直方向合并单元格.例:
<td colspan="2"></td> 水平合并两个单元格.
<td rowspan="2"></td> 垂直合并两个单元格.
<td colspan="2" rowspan="2"></td> 多行多列合并四个单元格.注意点:
合并的单元格是新建的, 不是合并原有的, 合并单元格的方向是向下或向后合并的.
这样会导致单元格会多出, 单元格会被插入的单元挤到后面去→, 不需要删除多余的部分.

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table16</title>
</head>
<body><table bgcolor="black" height="300px" width="300px" align="center"><tr bgcolor="white"><td colspan="2"></td><td rowspan="2"></td></tr><tr bgcolor="white"><td rowspan="2"></td><td></td></tr><tr bgcolor="white"><td colspan="2"></td></tr></table>
</body>
</html>

image-20230728232304658

10. 练习

使用html实现图片的内容.

10.1 小说排行榜练习

image-20230729000738720

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table17</title>
</head>
<body>
<table border="1" align="center" bgcolor="black" cellspacing="0"><caption>百度热搜小说排行榜</caption><tr bgcolor="#ff4500"><th>排名</th><th>书名</th><th>作者</th><th>趋势</th><th>热度指数</th><th>相关链接</th></tr><tr bgcolor="white" align="center"><td>1</td><td>万古神帝</td><td>飞天鱼</td><td><img src="https://fyb-pc-static.cdn.bcebos.com/static/asset/icon-up_c8c420c124133a8eafa34b36d89cc92a.png"alt="↑" height="20px"></td><td>803180</td><td><a href="#">图片</a><a href="#">贴吧</a><a href="#">百科</a></td><tr bgcolor="white" align="center"><td>2</td><td>伏天氏</td><td>净无痕</td><td><img src="https://fyb-pc-static.cdn.bcebos.com/static/asset/icon-down_7631dbf23c7a55f2216e4406b5d4adcf.png"alt="↓" height="20px"></td><td>531725</td><td><a href="#">图片</a><a href="#">贴吧</a><a href="#">百科</a></td><tr bgcolor="white" align="center"><td>3</td><td>武炼巅峰</td><td>莫默</td><td><img src="https://fyb-pc-static.cdn.bcebos.com/static/asset/icon-up_c8c420c124133a8eafa34b36d89cc92a.png"alt="↑" height="20px"></td><td>396670</td><td><a href="#">图片</a><a href="#">贴吧</a><a href="#">百科</a></td><tr bgcolor="white" align="center"><td>4</td><td>逆天邪神</td><td>火星引力</td><td><img src="https://fyb-pc-static.cdn.bcebos.com/static/asset/icon-down_7631dbf23c7a55f2216e4406b5d4adcf.png"alt="↓" height="20px"></td><td>381596</td><td><a href="#">图片</a><a href="#">贴吧</a><a href="#">百科</a></td></table>
</body>
</html>

10.2 单元格合并练习

2023-07-29_00001

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>table18</title>
</head>
<body>
<!--第一个练习-->
<table bgcolor="black" height="300px" width="200px" cellspacing="1px" align="center"><tr bgcolor="white"><td></td><td></td><td></td></tr><tr bgcolor="white"><td colspan="3"></td></tr><tr bgcolor="white"><td></td><td></td><td></td></tr><tr bgcolor="white"><td></td><td></td><td></td></tr>
</table><br><br><br>
<hr>
<br><br><br><!--第二个练习-->
<table bgcolor="black" height="300px" width="200px" cellspacing="1px" align="center"><tr bgcolor="white"><td></td><td rowspan="4"></td><td></td></tr><tr bgcolor="white"><td></td><td></td></tr><tr bgcolor="white"><td></td><td></td></tr><tr bgcolor="white"><td></td><td></td></tr>
</table><br><br><br>
<hr>
<br><br><br><!--第三个练习-->
<table bgcolor="black" height="300px" width="200px" cellspacing="1px" align="center"><tr bgcolor="white"><td></td><td></td><td></td></tr><tr bgcolor="white"><td colspan="2"></td><td></td></tr><tr bgcolor="white"><td></td><td rowspan="2"></td><td></td></tr><tr bgcolor="white"><td></td><td></td></tr>
</table><br><br><br>
<hr>
<br><br><br><!--第四个练习-->
<table bgcolor="black" height="300px" width="200px" cellspacing="1px" align="center"><tr bgcolor="white"><td></td><td></td><td></td></tr><tr bgcolor="white"><td></td><td colspan="2" rowspan="2"></td></tr><tr bgcolor="white"><td></td></tr><tr bgcolor="white"><td></td><td></td><td></td></tr>
</table></body>
</html>

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/17392.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

奥迪A3：最新款奥迪A3内饰设计及智能科技应用

奥迪A3：最新款奥迪A3内饰设计及智能科技应用

奥迪A3一直以来都是奥迪的入门级车型&#xff0c;但这并不意味着它在科技和内饰方面会有所退步。最新款奥迪A3的内饰设计和智能科技应用让人们再次惊叹奥迪的创新能力。 内饰设计 奥迪A3最新款的内饰设计引入了奥迪最新的设计元素&#xff0c;比如8.8英寸的中控显示屏&#xf…
阅读更多...
干货 ，ChatGPT 4.0插件Review Reader，秒杀一切选品神器

干货 ，ChatGPT 4.0插件Review Reader，秒杀一切选品神器

Hi! 大家好&#xff0c;我是专注于AI项目实战的赤辰&#xff0c;今天继续跟大家介绍另外一款GPT4.0插件Review Reader&#xff08;评论阅读器&#xff09;。 做电商领域的小伙伴们&#xff0c;都知道选品分析至关重要&#xff0c;可以说选品决定成败&#xff0c;它直接关系到产…
阅读更多...
【深度学习】High-Resolution Image Synthesis with Latent Diffusion Models，论文

【深度学习】High-Resolution Image Synthesis with Latent Diffusion Models，论文

13 Apr 2022 论文&#xff1a;https://arxiv.org/abs/2112.10752 代码&#xff1a;https://github.com/CompVis/latent-diffusion 文章目录 PS基本概念运作原理 AbstractIntroductionRelated WorkMethodPerceptual Image CompressionLatent Diffusion Models Conditioning Mec…
阅读更多...
申请软件著作权都有什么好处？

申请软件著作权都有什么好处？

随着社会的发展&#xff0c;知识产权保护意识对于公司而言尤为重要&#xff0c;对自己的权利进行最大限度的保护&#xff0c;以防止被别有用心的人侵权。那么&#xff0c;申请软著的好处到底是什么?软著有什么用呢? 无形资产软著是一种无形的知识产权&#xff0c;是开发者智慧…
阅读更多...
Spark-对RDD的理解

Spark-对RDD的理解

RDD是分布式弹性数据集。 RDD有五大特性&#xff1a; 一组分区&#xff0c;每个RDD都会被分为多个分区&#xff0c;这些分区运行在集群的不同节点上&#xff0c;分区数决定并行计算的数量。一个计算每个分区的函数&#xff0c;就是计算逻辑。RDD之间的依赖关系&#xff0c;就…
阅读更多...
大数据技术之Clickhouse---入门篇---数据类型、表引擎

大数据技术之Clickhouse---入门篇---数据类型、表引擎

星光下的赶路人star的个人主页 今天没有开始的事&#xff0c;明天绝对不会完成 文章目录 1、数据类型1.1 整型1.2 浮点型1.3 布尔型1.4 Decimal型1.5 字符串1.6 枚举类型1.7 时间类型1.8 数组 2、表引擎2.1 表引擎的使用2.2 TinyLog2.3 Memory2.4 MergeTree2.4.1 Partition by分…
阅读更多...
简单分享婚宴预订小程序怎么做

简单分享婚宴预订小程序怎么做

婚宴预订小程序需要具备一些功能&#xff0c;通过这些功能&#xff0c;新人可以更方便地选择婚宴场地、预订服务&#xff0c;并且更好地规划自己的婚礼。 1. 场地浏览与选择 婚宴预订小程序可以展示多个婚宴场地的照片和详细信息&#xff0c;包括容纳人数、场地设施、价格等。…
阅读更多...
无涯教程-Lua - Arrays(数组)

无涯教程-Lua - Arrays(数组)

数组是对象的有序排列&#xff0c;可以是包含行集合的一维数组&#xff0c;也可以是包含多行和多列的多维数组。 在Lua中&#xff0c;数组是使用带有整数的索引表实现的。数组的大小不是固定的&#xff0c;并且可以根据无涯教程的要求(取决于内存限制)来增长。 一维数组 一维…
阅读更多...
8.1作业

8.1作业

文件IO函数实现拷贝文件。子进程先拷贝后半部分&#xff0c;父进程再拷贝前半部分&#xff0c;允许使用sleep函数 #include<stdio.h> #include<string.h> #include<stdlib.h> #include<head.h> int main(int argc, const char *argv[]) {pid_t cpidfo…
阅读更多...
指针初阶（1）

指针初阶（1）

文章目录 目录1. 指针是什么2. 指针变量的类型2.1 指针变量-整数2.2 指针变量的解引用 3. 野指针3.1 野指针成因3.2 如何规避野指针 4. 指针运算4.1 指针-整数4.2 指针-指针4.3 指针的关系运算 附&#xff1a; 目录 指针是什么指针变量的类型野指针指针运算指针和数组二级指针…
阅读更多...
面试总结（三）

面试总结（三）

1.进程和线程的区别 根本区别&#xff1a;进程是操作系统分配资源的最小单位&#xff1b;线程是CPU调度的最小单位所属关系&#xff1a;一个进程包含了多个线程&#xff0c;至少拥有一个主线程&#xff1b;线程所属于进程开销不同&#xff1a;进程的创建&#xff0c;销毁&…
阅读更多...
【Vue组件eval方法的使用】

【Vue组件eval方法的使用】

Vue页面中条件可以放在当前vue页面中而无需影响到组件 如 这是我的表格操作列按钮&#xff0c;需求是第四个按钮如果表格当前数据的is_execl字段为0则显示否则隐藏 这种条件判断很频繁 如果像之前一样给一个标识&#xff0c;页面多了就难以维护&#xff0c;而且判断条件如果不…
阅读更多...
【硬件设计】模拟电子基础一--元器件介绍

【硬件设计】模拟电子基础一--元器件介绍

模拟电子基础一--元器件介绍 一、半导体&#xff08;了解&#xff09;1.1 基础知识1.2 PN结 二、二级管2.1 定义与特性2.2 二极管的分类 三、三级管四、MOS管三、其他元器件管3.1 电容3.2 光耦3.3 发声器件3.4 继电器3.5 瞬态电压抑制器 前言&#xff1a;本章为知识的简单复习&…
阅读更多...
【Spring框架】SpringBoot创建和使用

【Spring框架】SpringBoot创建和使用

目录 什么是SpringBoot&#xff1f;SpringBoot优点创建SpringBootSpringBoot使用 什么是SpringBoot&#xff1f; Spring 的诞⽣是为了简化 Java 程序的开发的&#xff0c;⽽ Spring Boot 的诞⽣是为了简化 Spring 程序开发的。 SpringBoot优点 1.起步依赖(创建的时候就可以方…
阅读更多...
Python爬虫遇到URL错误解决办法大全

Python爬虫遇到URL错误解决办法大全

在进行Python爬虫任务时&#xff0c;遇到URL错误是常见的问题之一。一个错误的URL链接可能导致爬虫无法访问所需的网页或资源。为了帮助您解决这个问题&#xff0c;本文将提供一些实用的解决方法&#xff0c;并给出相关代码示例&#xff0c;希望对您的爬虫任务有所帮助。 一、…
阅读更多...
玩转顺序表——【数据结构】

玩转顺序表——【数据结构】

在C语言学习中&#xff0c;我们经常会遇见增删查改等一系列操作&#xff0c;而这些操作全都与线性表关联&#xff0c;没有线性表将会对这些操作完成的十分艰难&#xff01;那今天就让我们来了解一下顺序表如何增删查改&#xff01;&#xff01;&#xff01; 目录 1.线性表 2…
阅读更多...
运算放大器（二）：恒流源

运算放大器（二）：恒流源

一、实现原理 恒流源的输出电流能够在一定范围内保持稳定&#xff0c;不会随负载的变化而变化。 通过运放&#xff0c;将输入的电压信号转换成满足一定关系的电流信号&#xff0c;转换后的电流相当一个输出可调的简易恒流源。 二、电路结构 常用的恒流源电路如…
阅读更多...
C语言每日一题：11.《数据结构》链表分割。

C语言每日一题：11.《数据结构》链表分割。

题目一&#xff1a; 题目链接&#xff1a; 思路一&#xff1a;使用带头链表 1.构建两个新的带头链表&#xff0c;头节点不存储数据。 2.循环遍历原来的链表。 3.小于x的尾插到第一个链表。 4.大于等于x尾插到第二个链表。 5.进行链表合并&#xff0c;注意第二个链表的尾的下一…
阅读更多...
【【STM32学习-3】】

【【STM32学习-3】】

STM32学习-3 下面是对c语言的稍微复习 这个是我们设置好的文件 以后拖出去用就可以了 这里加入关于指针的感想 关于指针数组和数组指针的想法 常规的东西是int a10; int * p&a; &#xff08;p指向了a元素&#xff0c;意思是p等于a的地址 类型是int*&#xff09;就是 整型指…
阅读更多...
二十三种设计模式第二十篇--备忘录模式

二十三种设计模式第二十篇--备忘录模式

备忘录模式&#xff0c;备忘录模式属于行为型模式。它允许在不破坏封装的情况下捕获和恢复对象的内部状态。保存一个对象的某个状态&#xff0c;以便在适当的时候恢复对象&#xff0c;该模式通过创建一个备忘录对象来保存原始对象的状态&#xff0c;并将其存储在一个负责管理备…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023