HTML学习30~37（表格标签）

已于 2022-09-07 21:10:33 修改
阅读量130 收藏
点赞数
分类专栏： HTML&CSS 文章标签： 学习 前端 html5
于 2022-09-06 23:02:49 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_57809042/article/details/126735855
版权

1. 表格标签

1.1 表格的主要作用

表格主要用于显示、展示数据,因为它可以让数据显示的非常的规整,可读性非常好。特别是后台展示数据的时候,能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。

表格不是用来布局页面的，而是用来展示数据的.

1.2 表格的基本语法

  1. <table> </table> 是用于定义表格的标签。
  2. <tr> </tr>标签用于定义表格中的行,必须嵌套在<table> </table>标签中。
  3. <td> </td>用于定义表格中的单元格,必须嵌套在<tr> </tr>标签中。
  4. 字母td指表格数据( table data ) , 即数据单元格的内容。

1.3 表头单元格标签

一般表头单元格位于表格的第一行或第一列,表头单元格里面的文本内容加粗居中显示

<th>标签表示HTML表格的表头部分(table head的缩写) 会加粗

表头单元格也是单元格,常用于表格第一行,突出重要性,表头单元格里面的文字会加粗居中显示。

1.4 表格属性

这部分属性实际开发不常用，后面通过CSS来设置

两个目的：

  1. 记住这些英语单词，后面CSS会使用
  2. 直观感受表格的外观形态

在这里插入图片描述

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表格属性</title>
</head>
<body>
    <!-- 这些属性要写到表格标签table里面去 -->
    <table align="center" border="1" cellpadding="0" cellspacing="0" width="500" height="250"> 
        <tr><th> 姓名 </th> <th> 性别 </th> <th> 年龄 </th></tr>
        <tr><td> 刘德华 </td> <td> 男 </td> <td> 56 </td></tr>
        <tr><td> 张学友 </td> <td> 男 </td> <td> 58 </td></tr>
        <tr><td> 郭富城 </td> <td> 男 </td> <td> 51 </td></tr>
        <tr><td> 黎明 </td> <td> 男 </td> <td> 57 </td></tr>
    </table>
</body>
</html>

1.5 案例分析：小说排行榜

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
        <tr>
            <th>排行</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日搜索</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>⬇</td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td >盗墓笔记</td>
            <td>⬇</td>
            <td>124</td>
            <td>675432</td>
            <td><a href="https://jump2.bdimg.com/f?kw=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0&ie=utf-8&tab=main" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td>⬆</td>
            <td>212</td>
            <td>7654</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>东游记</td>
            <td>⬆</td>
            <td>23</td>
            <td>75645</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td>⬇</td>
            <td>121</td>
            <td>7676</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td>⬆</td>
            <td>576576</td>
            <td>1231421</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td>⬆</td>
            <td>234</td>
            <td>7686</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
    </table>
</body>
</html>

最后效果：
在这里插入图片描述
点击盗墓笔记贴吧后，会跳转页面：
在这里插入图片描述

1.6 表格结构标签

使用场景:因为表格可能很长，为了更好的表示表格的语仪,可以将表格分割成表格头部和表格主体两大部分.

在表格标签中,分别用: 标签表格的头部区域、 标签表格的主体区域这样可以更好的分清表格结构。

  1. <thead> </thead> : 用定义表格的头部。<thead> 内部必须拥有<tr>标签。一般是位于第一行。
  2. <tbody> </tbody> : 用于定义表格的主体,主要用于放数据本体。
  3. 以上标签都是放在<table> </table>标签中。

eg:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>今日小说排行榜</title>
</head>
<body>
    <table align="center" width="500" height="249" border="1" cellspacing="0">
    <thead>
        <tr>
            <th>排行</th>
            <th>关键词</th>
            <th>趋势</th>
            <th>今日趋势</th>
            <th>最近七日</th>
            <th>相关链接</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>1</td>
            <td>鬼吹灯</td>
            <td>⬇</td>
            <td>345</td>
            <td>123</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>2</td>
            <td >盗墓笔记</td>
            <td>⬇</td>
            <td>124</td>
            <td>675432</td>
            <td><a href="https://jump2.bdimg.com/f?kw=%E7%9B%97%E5%A2%93%E7%AC%94%E8%AE%B0&ie=utf-8&tab=main" target="_blank">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>3</td>
            <td>西游记</td>
            <td>⬆</td>
            <td>212</td>
            <td>7654</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>4</td>
            <td>东游记</td>
            <td>⬆</td>
            <td>23</td>
            <td>75645</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>5</td>
            <td>甄嬛传</td>
            <td>⬇</td>
            <td>121</td>
            <td>7676</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>6</td>
            <td>水浒传</td>
            <td>⬆</td>
            <td>576576</td>
            <td>1231421</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
        <tr>
            <td>7</td>
            <td>三国演义</td>
            <td>⬆</td>
            <td>234</td>
            <td>7686</td>
            <td><a href="#">贴吧</a> <a href="#">图片</a> <a href="#">百科</a></td>
        </tr>
    </tbody>
    </table>
</body>
</html>

1.7 合并单元格

特殊情况下，可以把多个单元格合并为一个单元格。

  1. 合并单元格方式
  • 跨行合并：rowspan=“合并单元格的个数”
  • 跨列合并：colspan=“合并单元格的个数”
  1. 目标单元格：（写合并代码）
    • 跨行：最上侧单元格为目标单元格，写合并代码
    • 跨列：最左侧单元格为目标单元格，写合并代码

在这里插入图片描述

  1. 合并单元格三部曲

1.先确定是跨行还是跨列合并

2.找到目标单元格，写上合并方式 = 合并的单元格数量。比如：<td colspan=“2”></td>
3.删除多余的单元格

eg:

  1. 确定是跨列
  2. 目标单元格是第一行第二个
  3. 删除第一行第三个
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>合并单元格</title>
</head>
<body>
    <table width="500" height="249" border="1" cellspacing="0">
        <tr>
            <td></td> 
            <td colspan="2"></td>
        </tr>
        <tr>
            <td rowspan="2"></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <td></td>
            <td></td>
        </tr>
    </table>
</body>
</html>

最后效果
在这里插入图片描述

1.8 表格总结

  1. 表格的相关标签
    我们学习了 table标签 tr行标签 td单元格标签 th表头单元格标签
    在这里插入图片描述

  2. 表格的相关属性
    在这里插入图片描述

  3. 合并单元格

    看例子即可

前进的北极熊
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
HTML中table表格标签的基础学习教程
12-14
表格的标签组成HTML中的表格是由为主体标签，浏览器会将该标签解释为一个表格。表格中的行使用标签进行定义。标签为标签的子类，设置若干个标签可以将表格分割为若干个行。标签用于定义表格的列，标签为又是标签的...
HTML基础（二）
m0_46219714的博客
03-26 317
1. 表格 1.1 表格的主要作用 1.表格主要用于显示、展示数据，因为它可以让数据显示的非常的规整，可读性非常好。特别是后台展示数据的时候，能够熟练运用表格就显得很重要。一个清爽简约的表格能够把繁杂的数据表现得很有条理。 2.表格不是用来布局页面的,而是用来展示数据的。 3.表格的具体用法 <table> <tr> <td>单元格内的文字</td> ... </tr> ... </table> <table&
【攻破html系列——第五天】表格标签和列表标签
命运的左轮的博客
10-27 755
了解表格标签和列表标签的功能和使用。
获取html的table行
jszj的专栏
06-24 2534
有如下表格： <table id="tbLabelList" width="100%" cellpadding="0" cellspacing="0" border="1"> <tr><td>11</td><td>12</td><td>13</td></tr> <tr><td>21</td><td>22</td><td>23&
html一列选择,html – 选择具有rowspan的表的第一列
weixin_39726697的博客
06-03 358
我在行的第一个单元格中有一个带有rowspan的表.我想选择第一个细胞.当我选择第一个子节点时,在rowspan之后的某些行中,第一个子节点将成为不在第一行中的单元格.如何选择表的第一列？table,th,td {border: 1px solid black;border-collapse: collapse;}table{font-size: 18px;color: black;}table ...
XHTML入门学习教程:表格标签的应用
01-19
表格是XHTML中处境尴尬的一个标签，本节只做了解即可. 关于表格 在CSS流行之前，table被广泛应用于定位。在XHTML中，table不被推荐用来定位，W3C希望CSS可以取代在定位方面的地位。...表格标签<t
【前端学习笔记day13】2.9. html表格
01-08
标签：声明一个表格，它的常用属性如下： - border属性 定义表格的边框，设置值是数值 - cellpadding属性 定义单元格内容与边框的距离，设置值是数值 - cellspacing属性 定义单元格与单元格之间的距离，设置值是数值...
XHTML入门学习教程:框架标签使用
12-01
框架结构标签<frameset></frameset> 框架允许你在一个浏览器窗口内打开两个乃至多个页面。你可以这样理解，<frameset>其实就是一个大，只不过整个页面是的主体，而每一个单元格的内容都是一个独立...
学习整理 docker
wonder_dog的博客
05-31 220
nexus。
书籍学习|基于SprinBoot+vue的书籍学习平台(源码+数据库+文档)
JIngJaneIL的博客
05-28 1199
首先,论文一开始便是清楚的论述了平台的研究内容。其次,剖析平台需求分析,弄明白“做什么”,分析包括业务分析和业务流程的分析以及用例分析,更进一步明确平台的需求。然后在明白了平台的需求基础上需要进一步地设计平台,主要包罗软件架构模式、整体功能模块、数据库设计。本项目软件架构选择B/S模式和java技术，总体功能模块运用自顶向下的分层思想。再然后就是实现平台并进行代码编写实现功能。论文的最后章节总结一下自己完成本论文和开发本项目的心得和总结。通过书籍学习平台将会使书籍学习各个方面的工作效率带来实质性的提升。
前端技术入门学习：探索数字世界的奇幻之旅
qwertyhn_0024的博客
05-27 229
HTML定义了网页的结构和内容，CSS负责样式和布局，而JavaScript则实现了网页的交互功能。对于初学者来说，前端技术既是一个充满魅力的新世界，也是一个充满挑战与困惑的领域。本文将引导您从四个方面、五个方面、六个方面和七个方面深入理解前端技术，开启您的学习之旅。在这个过程中，我们需要不断探索、学习和实践，才能逐步掌握这门技艺的精髓。同时，我们也需要保持敏锐的洞察力和开放的心态，不断适应和应对前端技术领域的变化和发展。同时，随着人工智能、大数据等新技术的不断涌现，前端技术也将面临更多的挑战和机遇。
柳州市哪里有学编程的最好：探索编程学习的最佳选择
liyrbtqe_66w的博客
05-30 434
然而，面对市场上琳琅满目的编程培训机构，如何选择最适合自己的学习场所，却成为了一个令人困惑的难题。本文将从四个方面、五个方面、六个方面和七个方面，深入剖析柳州市编程学习的最佳选择，帮助您在众多选项中找到最适合自己的编程学习之路。这包括线上的课程平台、线下的培训机构以及高校的相关专业等。柳州市的编程学习机构各具特色，有的注重实战项目经验，有的强调基础理论学习，还有的则提供个性化的定制课程。通过深入了解各机构的特色与优势，并结合自身的需求和兴趣进行选择，相信您一定能在柳州市找到最佳的编程学习之路。
强化学习——学习笔记
qq_52302919的博客
05-27 1395
强化学习问题通常可以建模为一个马尔可夫决策过程，包括以下几个要素：1、状态集合 (State Set)：S；2、动作集合 (Action Set)：A；Ps′∣saPs′∣sa，描述在状态s下执行动作a后转移到状态s′s^′s′的概率；Rsas′Rsas′，描述在状态s 下执行动作a并转移到状态s′后获得的奖励。πa∣sπ (a∣s)πa∣s，描述智能体在状态s下选择动作a 的概率。
视觉语言大模型llava学习
csuzhaoqinghui的博客
05-31 374
ViLBERT（Vision-and-Language BERT）是一个专为处理视觉和语言信息而设计的模型，通过双流结构分别处理图像和文本输入，然后在顶层通过共注意力机制（Co-Attention）将两种信息结合起来。与ViLBERT类似，它使用单一的Transformer模型来同时处理视觉和语言信息，通过将图像的区域特征与相应的文字描述一起编码，实现了对图像和文本的联合理解。视觉语言模型的不断发展正在推动人工智能领域向更高层次的理解和创造能力迈进，为创建更智能、更互动的系统打开新的可能性。
Android学习之ION memory manager
我的博客
05-28 1057
ion_device是miscdevice的封装，buffers是存放ion_buffer对象的根结点，heaps为存放ion_heap对象的列表，custom_ioctl为自定义的操作函数，clients为客户端根结点。每一种类型的memory都对应一个ion_heap类型的对象，ion_heap的对象存放在dev中，内存的类型存放做type中，ops为内存的操作函数指针。ION 模块是可扩展的（API都是统一的），支持各种形式的内存分配方式，可以表述不同的硬件资源和他们的一些限制。
开利网络参加广州数据交易所学习活动
KLWL_2022的博客
05-31 165
学习内容提现了数字时代企业数字化转型的核之心“发掘数据价值，驱动高速发展”，交易中心组织大家学习如何紧跟国家政策、把握数据资产发展趋势、用好企业数据、做到数据资产增值！开利网络做为南沙广州数据交易所的会员参加了由“广东三会”组织的“数据资产”相关学习活动。（下图为开利董事长付立军先生在签到）4. 基础性：在数字经济时代，成为重要的基础资源，对推动科技创新、经济发展、提升管理效率等方面都有着关键作用。数据要素的合理开发、利用和流通，对于促进产业升级、提升企业竞争力、推动经济高质量发展具有重要意义。
MyBatisPlus学习笔记（二）
qq_43470538的博客
05-29 279
条件构造器：Wrapper的作用就是来封装我们当前的条件的删除用的和查询用的一样：QueryWrapper 和 LambdaQueryWrapper。
TH方程学习（4）
weixin_57997461的博客
05-31 246
在本节将会对TH方程打包成一个函数，通过输入目标星的轨道要素，追踪星在目标星VVLH坐标系下的相对位置和速度，以及预报的时间，得到预报时刻追踪星在VVLH坐标系下的位置和速度，以及整个状态转移矩阵。其中 STKVVLh,STKVVLh2的数据通过STK计算得到的VVLH坐标系，其数据在作者的数据包里可以免费下载，最后得到四个图。合并（1）（2），得到归一化形式的XZ方向的状态转移矩阵。，（3），得到归一化形式的Y方向的状态转移矩阵。根据归一化，可以写成的矩阵形式如下所示。所以合并后的形式可以写为。
EVO轨迹评估工具基本使用教程(学习记录)
最新发布
weixin_66706867的博客
05-31 771
EVO轨迹评估工具基本使用教程(学习记录)
html表格标签怎么使用
05-19
HTML表格标签用于在网页中创建表格。以下是一些常用的HTML表格标签： 1. `<table>` 标签：用于定义表格。 2. `<tr>` 标签：用于定义表格中的行。 3. `<th>` 标签：用于定义表格中的表头单元格。 4. `<td>` 标签：...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值