HTML表格的结构和其它标签

最新推荐文章于 2024-01-18 11:49:12 发布
最新推荐文章于 2024-01-18 11:49:12 发布
阅读量181 收藏
点赞数
分类专栏： 从0蛋学前端 文章标签： html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Duke_Jiang/article/details/108639069
版权 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>24-表格标签的其它标签</title>
</head>
<body>

<!--
1.由于表格中存储的数据比较复杂, 为了方便管理和阅读以及提升语义, 我们可以对表格中存储的数据进行分类
表格中存储的数据可以分为4类
1.1表格的标题
1.2.表格的表头信息
1.3.表格的主体信息
1.4.表格的页尾信息

2.表格的完整结构
<table>
    <caption>表格的标题</caption>
    <thead>
        <tr>
            <th>每一列的标题</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>数据</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>数据</td>
        </tr>
    </tfoot>
</table>

caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息

3.注意点:
3.1.如果我们没有编写tbody, 系统会系统给我们添加tbody
3.2.如果指定了thead和tfoot, 那么在修改整个表格的高度时, thead和tfoot有自己默认的高度, 不会随着表格的高度变化而变化
-->
<table border="1px" width="500px" height="500px">
    <caption>学生信息</caption>
    <thead>
        <tr>
            <th>姓名</th>
            <th>年龄</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>张三</td>
            <td>20</td>
        </tr>
        <tr>
            <td>李四</td>
            <td>40</td>
        </tr>
    </tbody>
    <tfoot>
        <tr>
            <td>2</td>
            <td>30</td>
        </tr>
    </tfoot>
</table>

<!--
1.表格标题
在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中

2.caption标签的注意点:
2.1caption一定要写在table标签中, 否则无效
2.2caption一定要紧跟在table标签后面

3.标题单元格标签
3.1.在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字

3.2.到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的
-->

<table bgcolor="black" cellspacing="1px" width="800px" align="center">
    <caption>
        <h2>今日小说排行榜</h2>
    </caption>
    <tr bgcolor="#a9a9a9">
        <th>排名</th>
        <th>关键词</th>
        <th>趋势</th>
        <th>今日搜索</th>
        <th>最近七日</th>
        <th>相关链接</th>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/down.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/down.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
    <tr bgcolor="white" align="center">
        <td>1</td>
        <td align="left">暴走大事件</td>
        <td>
            <img src="images/up.jpg">
        </td>
        <td>623557</td>
        <td>4088311</td>
        <td>
            <a href="#">贴吧</a>
            <a href="#">图片</a>
            <a href="#">百科</a>
        </td>
    </tr>
</table>
</body>
</html>

 

天才小叮当
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
【11】HTML基础（3）——HTML常用标签⑦
倏存的博客
01-30 1924
表格制作相关标签table/tr/td/th, caption/thead/tbody/tfoot/, 及属性border/style/colspan/rowspan.
表格结构标签
weixin_60542090的博客
08-08 427
Cascading Style Sheets 通常称为CSS样式表或层叠样式表（级联样式表）CSS选择器是CSS规则的第一部分，每个CSS规则都以一个选择器或一组选择器为开始CSS 选择器即用于“查找”（或选取）要设置样式的 HTML 元素的模式选择器可以分为基础选择器、复合选择器。...
Web前端知识点 表格 无序、有序列表 语义化
m0_72686628的博客
07-14 561
每个表格均有若干行（由tr标签定义），每行被分割为若干单元格（由td标签定义）。strat属性开始值写在开始标签中。-自带列表符，去掉自带列表符li{list-stylenone;-自带列表符，去掉自带列表符li{list-stylenone;-独立成行-自带外间距-自带内填充(内间距)-独立成行-自带外间距-自带内填充(内间距)3.在单元格内可以添加任意的标签和内容。...
手拉手一起学HTML(下)——表格标签和列表标签，表单标签
weixin_68773927的博客
11-09 2488
一.表格标签1.1表格的主要作用1.2表格的基本语法 1.3表头单元格标签1.4表格属性1.6合并单元格（把多个单元格合并成一个单元格） 二.列表标签2.1无序列表2.2有序列表2.3自定义列表（重点）3.表单标签3.1为什么需要表单3.2表单的组成 3.3表单域是一个包含扁担元素的区域3.4表单控制(表单元素）3.4.1 input 表单元素 3.4.2 标签3.4.3 select 下拉表单元素3.4.4表单元素 表格是实际开发中非常常用的标签
前端-基础 表格标签 - 表格结构标签 （ ＜thead＞ ＜tbody＞）
最新发布
三毛与海子的博客
01-18 876
表格标签的大体结构
7.表格标签
potato123232的博客
03-11 3497
表格一般用来展示数据，有时也用来布局，表格标签中有六种常用标签，table,tr,td,th,thead和tbody,我们先看前面三个 目录 1基本用法 2表格属性 3表格结构标签 4合并单元格 4.1跨行合并(竖着) rowspan 4.2跨列合并(横着) colspan 1基本用法 table是整个的大表格，tr是一行，td是一行中的一个 我们先简单写个例子 td可以创建后不写内容，再创建时会把前面的格子空过去 这个就是我们一个简单的表格 ...
2022年HTML相关知识点表格标签.pptx
11-02
HTML表格标签是HTML中一种基本的结构元素，用于组织和显示数据。下面是HTML表格标签的相关知识点： 表格的基本语法 在HTML中，表格的建立将运用、、、四个标签完成。 * 标签用于定义一个表格元素，一个表格元素，...
详解HTML表格|l-639642.pdf
11-20
作用：数据的展示，表格应用场景. ...表格结构标签：加载一部分 显示一部分 更加便利. 划分三部分：表头（thead），主体（tbody），脚注（tfoot）这三个标签不能影响布局 　<caption>...</caption>
HTML制作表格.ppt
11-15
本章节将介绍HTML制作表格的相关知识点，以便读者能够快速掌握HTML表格的制作方法和美化技巧。 一、为什么使用表格？ 表格是HTML文档中的一种常见结构，广泛应用于网页上的文本和图像存放。它可以将数据以表格形式...
Lesson02_01 表格标签
10-31
HTML表格标签是HTML语言中的一种基本标签，用于创建表格结构，使得网页内容更加有序和美观。下面是HTML表格标签的详细解释： 1. `<table></table>`：表格标签 `<table>`标签是HTML表格的根标签，用于定义一个...
HTML制作表格ppt课件.ppt
11-12
HTML 表格制作是 HTML 中非常重要的一部分，它可以用来存放网页上的文本和图像。表格可以分成行、列、单元格，使用 TABLE、TR、TD 等标签来定义。 为什么使用表格？ 表格应用场合非常广泛，如论坛、门户网站、购物...
DukeMTMC-attribute-master
10-19
DukeMTMC-attribute-master，DukeMTMC数据集的属性标签部分
HTML表格标签详解
实泽有之，无泽虚之
03-26 8784
本文对HTML表格标签进行详解，大体分为三部分： 第一部分，主要讲解以下标签：table、tr、td、th、caption、colgroup、col、thead、tfoot、tbody；第二部分，主要讲解以下属性：border、rowspan、colspan、cellpadding、cellspacing、width、summary；第三部分，通过HTML样例代码和运行结果进行展示。
HTML表格标签超详细总结
weixin_45904557的博客
02-26 1290
一、表格的基本结构 <table border="" cellspacing="" cellpadding=""> <tr><th>Header</th></tr> <tr><td>Data</td></tr> </table> 1. <table></table> 定义表格的基本框架 2. <tr><...
html基础表格结构标签和合并单元格
weixin_43972159的博客
07-06 246
表格结构标签 thead标签: 用于定义表格的头部,thead内部必须拥有tr标签,一般是位于第一行 tbody标签: 用于定义表格的主体,主要用于存放数据本体 以上的标签都是放在table标签中的,有这两个标签的好处是,语义会更加的清晰,更容易理解 合并单元格 特殊情况下,可以把多个单元格合并为一个单元格 合并单元格的方式 目标单元格 合并单元格的步骤 合并单元格的方式 实现效果: 跨行合并: rowspan=“合并单元格的个数” 跨列合并: colspan=“合并单元格的个数” 目标单元格
HTML表格标签
m0_48289363的博客
04-10 620
HTML表格标签，表格的属性，合并单元格，简单个人简历完整代码
CSS（引入方式、选择器）基础知识
weixin_72553821的博客
07-14 252
全面的CSS、引入方式、选择器的基础知识
html适合表格标题的标签
06-12
在HTML中，适合表格标题的标签有 `<th>` 和 `<caption>`。 1. `<th>` 标签： `<th>` 标签用于定义表格中的表头单元格，通常用于第一行或...以上是适合表格标题的两个标签，具体使用哪个标签取决于表格的结构和需求。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值