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/12087.shtml

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

相关文章

数据结构之动态顺序表（附带完整程序）

数据结构之动态顺序表（附带完整程序）

&#x1f388;基本概念 &#x1f308;一.线性表、顺序表的定义 ☀️&#xff08;1&#xff09;线性表&#xff1a; 是n个具有相同特性的数据元素的有限序列。线性表在逻辑上是线性结构&#xff0c;但在物理上存储时&#xff0c;通常以数组和链式结构的形式存储。 ☀️&…
阅读更多...
c# 此程序集中已使用了资源标识符

c# 此程序集中已使用了资源标识符

严重性 代码 说明 项目 文件 行 禁止显示状态 错误 CS1508 此程序集中已使用了资源标识符“BMap.NET.WindowsForm.BMapControl.resources” BMap.NET.WindowsForm D:\MySource\Decompile\BMap.NET.WindowsForm\CSC 1 活动 运行程序时&a…
阅读更多...
Mock-MOCO使用过程

Mock-MOCO使用过程

一、jar包下载&#xff1a;https://github.com/dreamhead/moco 二、准备mock的json文件 data.json内容&#xff1a; ####GET请求 [{"description": "response使用Content-Type为charsetGBK编码格式来查看返回信息为中文的内容","request": {&q…
阅读更多...
《Elasticsearch 源码解析与优化实战》第5章：选主流程

《Elasticsearch 源码解析与优化实战》第5章：选主流程

《Elasticsearch 源码解析与优化实战》第5章&#xff1a;选主流程 - 墨天轮 一、简介 Discovery 模块负责发现集群中的节点&#xff0c;以及选择主节点。ES 支持多种不同 Discovery 类型选择&#xff0c;内置的实现称为Zen Discovery ,其他的包括公有云平台亚马逊的EC2、谷歌…
阅读更多...
Ansible单yaml文件部署Zabbix5.0监控平台

Ansible单yaml文件部署Zabbix5.0监控平台

文章目录 Ansible单yaml文件部署Zabbix5.0监控平台节点规划案例实施基础环境准备编写剧本文件ZabbixWeb界面(1)改中文(2)添加监控主机 Ansible单yaml文件部署Zabbix5.0监控平台 节点规划 IP主机名节点192.168.200.10ansibleAnsible节点192.168.200.20zabbix-serverZabbix-ser…
阅读更多...
深度学习入门（一）：神经网络基础

深度学习入门（一）：神经网络基础

一、深度学习概念 1、定义 通过训练多层网络结构对位置数据进行分类或回归&#xff0c;深度学习解决特征工程问题。 2、深度学习应用 图像处理语言识别自然语言处理 在移动端不太好&#xff0c;计算量太大了&#xff0c;速度可能会慢 eg.医学应用、自动上色 3、例子 使用…
阅读更多...
Effective Java 案例分享（八）

Effective Java 案例分享（八）

39、使用注解而不是通过命名规则分类 如果需要对定义class&#xff0c;property&#xff0c;或者method进行分类管理&#xff0c;推荐的做法是使用注解对其添加类别&#xff0c;而不是通过命名规则分类。这里以JUnit为例&#xff1a; 在JUnit 3中&#xff0c;如果要写测试的方…
阅读更多...
linux环境安装mysql数据库

linux环境安装mysql数据库

一&#xff1a;查看是否自带mariadb数据库 命令&#xff1a;rpm -qa | grep mariadb 如果自带数据库则卸载掉重新安装 命令&#xff1a;yum remove mariadb-connector-c-3.1.11-2.el8_3.x86_64 二&#xff1a;将压缩文件上传到/user/local/mysql文件夹 或者直接下载 命令&a…
阅读更多...
基于ssm+mysql+html道路养护管理系统

基于ssm+mysql+html道路养护管理系统

基于ssmmysqlhtml道路养护管理系统 一、系统介绍二、功能展示1.道路信息管理2.损害类型信息管理3.损害类型信息管理4.评定等级信息管理5.日常巡查信息管理6.定期检查信息管理 四、获取源码 一、系统介绍 系统主要功能&#xff1a;道路信息管理、损害类型信息管理、评定等级信息…
阅读更多...
【网络原理】 (1) (应用层 传输层 UDP协议 TCP协议 TCP协议段格式 TCP内部工作机制 确认应答 超时重传 连接管理)

【网络原理】 (1) (应用层 传输层 UDP协议 TCP协议 TCP协议段格式 TCP内部工作机制 确认应答 超时重传 连接管理)

文章目录 应用层传输层UDP协议TCP协议TCP协议段格式TCP内部工作机制确认应答超时重传 网络原理部分我们主要学习TCP/IP协议栈这里的关键协议(TCP 和 IP),按照四层分别介绍.(物理层,我们不涉及). 应用层 我们需要学会自定义一个应用层协议. 自定义协议的原因? 当前的软件(应用…
阅读更多...
【JAVASE】顺序和选择结构

【JAVASE】顺序和选择结构

⭐ 作者&#xff1a;小胡_不糊涂 &#x1f331; 作者主页&#xff1a;小胡_不糊涂的个人主页 &#x1f4c0; 收录专栏&#xff1a;浅谈Java &#x1f496; 持续更文&#xff0c;关注博主少走弯路&#xff0c;谢谢大家支持 &#x1f496; 顺序和选择 1. 顺序结构2. 分支结构2.1 …
阅读更多...
Ubuntu18.04 下配置Clion

Ubuntu18.04 下配置Clion

配置Clion 安装gcc、g、make Ubuntu中用到的编译工具是gcc©&#xff0c;g&#xff08;C&#xff09;&#xff0c;make(连接)。因此只需安装对应的工具包即可。Ubuntu下使用命令安装这些包&#xff1a; &#xff08;1&#xff09;安装gcc sudo apt install gcc&am…
阅读更多...
解决Cannot resolve plugin org.apache.maven.plugins:xxxxxxxx

解决Cannot resolve plugin org.apache.maven.plugins:xxxxxxxx

解决Cannot resolve plugin org.apache.maven.plugins:xxxxxxxx 方法一、检查配置设置 下图中三个方框圈出来的地方设置为自己的下载的maven地址&#xff0c;配置文件地址&#xff0c;仓库地址。刷新maven。 我个人试过没用&#xff0c;不过网上有的朋友用这个方法解决了。 …
阅读更多...
Day 69-70：矩阵分解

Day 69-70：矩阵分解

代码&#xff1a; package dl;import java.io.*; import java.util.Random;/** Matrix factorization for recommender systems.*/public class MatrixFactorization {/*** Used to generate random numbers.*/Random rand new Random();/*** Number of users.*/int numUsers…
阅读更多...
FANUC机器人实现2个RO输出信号互锁关联（互补）的具体方法

FANUC机器人实现2个RO输出信号互锁关联（互补）的具体方法

FANUC机器人实现2个RO输出信号互锁关联（互补）的具体方法 一般情况下，为了方便用户控制工装夹具上的电磁阀等控制工具，FANUC机器人出厂时给我们提供了8个RO输出信号，如下图所示，这8个RO信号可以各自单独使用。 那么，如果为了安全控制，需要将2个RO信号成对的进行安全互锁…
阅读更多...
linux服务器安装redis

linux服务器安装redis

一、安装下载 下载安装参考文章 下载安装包地址&#xff1a;https://download.redis.io/releases/ 亲测有效&#xff0c;但是启动的步骤有一些问题 安装完成&#xff01;&#xff01;&#xff01; 二、启动 有三种启动方式 默认启动指定配置启动开机自启 说明&#xff1a…
阅读更多...
下载JMeter的历史版本——个人推荐5.2.1版本

下载JMeter的历史版本——个人推荐5.2.1版本

官网地址&#xff1a;https://archive.apache.org/dist/jmeter/binaries/
阅读更多...
JVM-提问纯享版

JVM-提问纯享版

一、内存区域 介绍下 Java 内存区域&#xff08;运行时数据区&#xff09;内存分配方式内存分配并发问题对象的访问定位的两种方式&#xff08;句柄和直接指针两种方式&#xff09; 二、垃圾回收 如何判断对象是否死亡&#xff08;两种方法&#xff09;。简单的介绍一下强引…
阅读更多...
POI 导出 树形结构

POI 导出 树形结构

参考文章&#xff1a;(327条消息) Excel树状数据绘制导出_excel导出树形结构_Deja-vu xxl的博客-CSDN博客https://blog.csdn.net/weixin_45873182/article/details/120132409?spm1001.2014.3001.5502 Overridepublic void exportPlus(String yearMonth, HttpServletRequest re…
阅读更多...
【C语言】从零开始学习数组

【C语言】从零开始学习数组

&#x1f341; 博客主页:江池俊的博客 &#x1f4ab;收录专栏&#xff1a;C语言——探索高效编程的基石 &#x1f4bb; 其他专栏&#xff1a;数据结构探索 &#x1f4a1;代码仓库&#xff1a;江池俊的代码仓库 &#x1f3aa; 社区&#xff1a;C/C之家社区 &#x1f341; 如果觉…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023