web前端表格css三个t的使用（thead，tbody，tfoot）

最新推荐文章于 2023-12-12 15:23:32 发布
最新推荐文章于 2023-12-12 15:23:32 发布
阅读量1k 收藏 2
点赞数
分类专栏： web前端开发 文章标签： css html 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhiqingxue/article/details/115731763
版权

其实从这三个词的翻译上，也可以知道他们的使用用途：

thead（表格头）tbody（表格主体）tfoot （表尾）

话不多说，先上效果图:
运行结果

具体使用看见代码演示:

<html>
<head>
<style type="text/css">            /* 下方表格的css文件,也可以自己写到一个css文件里，这里只设置了颜色，你也可以设置其它。*/
thead {color:green}
tbody {color:blue;height:50px}
tfoot {color:red}
</style>
</head>
<body>

<table border="1">
  <thead>
    <tr>
      <th>Month</th>
      <th>Savings</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>January</td>
      <td>$100</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
    </tr>
  </tbody>
  <tfoot>
    <tr>
      <td>Sum</td>
      <td>$180</td>
    </tr>
  </tfoot>
</table>

</body>
</html>

路漫漫求修远兮，吾将上下而求索。

练过几年代码，有备而来
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
「HTML和CSS入门指南」thead 标签详解
a451319296的博客
06-05 1694
thead 标签是一个重要的标签，在 HTML 中用于标识表格的表头。使用 thead 标签可以帮助您提高表格的可读性和理解性。在使用 thead 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能，并避免兼容性问题。
「HTML和CSS入门指南」tfoot 标签详解
a451319296的博客
06-05 897
tfoot 标签是一个重要的标签，在 HTML 中用于标识表格的页脚。使用 tfoot 标签可以帮助您提高表格的可读性和理解性。在使用 tfoot 标签时，请注意选择正确的属性和方法、提供适当的标签、描述文本和无障碍功能，并避免兼容性问题。
css 清除浏览器默认样式
04-14
/* reset */ html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;outline:0;font-size:100%;vertical-align:baseline;background:transparent}body{line-height:1}ol,ul{list-style:none}blockquote,q{quotes:none}blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}:focus{outline:0}ins{text-decoration:none}del{text-decoration:line-through}table{border-collapse:collapse;border-spacing:0}a img {border:none;} /* container,clearfix */ .container:after, .clearfix:after {clear:both;content:' ';display:block;font-size:0;line-height:0;visibility:hidden;width:0;height:0;}.container, .clearfix {display:inline-block;}* html .container,* html .clearfix {height:1%;}.container, .clearfix {display:block;}
Web前端高级作业一.txt
02-24
一.html 1.html是超文本标记语言，通过浏览器响应标签来表现标签 2.html标签，标签由标签加属性组成，html有自己的标签树 <html> <head></head> <body></body> </html> 标签举例 <a>标签，属性是它的“装备”，可以给它添加功能，如href属性可以使它在被点击的情况下跳到对应网址 2.1重要标签 2.1.1表格标签<table>,常常用于显示内容 表格标题：<caption></caption> 表格头：<thead><tr><th></th></tr></thead> 表格体：<tbody><tr><td></td></tr></tbody> 表格尾：<tfoot><tfoot> table标签里还可以设置很多属性 2.1.2表单标签<form>,常常用于提交数据 <form> <input > </form> 当input的type为submit时可以点击提交表单数据 <select></select>标签是选项标签，里面加入option可以作为选项 2.1.3框架<frame>和框架集<frameset>` 二.css 1.这个用来设置标签样式有好处 采用外部样式设置页面一来可以减少代码的瘫肿；二来可以时开发页面分离，使得不同的界面设计师可以设置同一个界面 每一个属性由属性加冒号加属性组成，样式之间用分号隔开 2.有各种选择器 2.1基本选择器 标签选择器，通过标签加大括号来选择 类名选择器，通过点加类名来选择 id选择器，通过#加id名来选择 2.2组合选择器 直接子类选择器，用> 子类选择器，用空格 兄弟选择器，用~ 相邻兄弟选择器：用+ 多元素选择器：用，隔开 2.3属性选择器 根据元素的属性来选取元素，元素加方括号加大括号 2.3.1存在选择器 例：p[id]，指的是含有id属性的p标签 2.3.2相等选择器 例：p[id="id"]，指的是id属性为id的p标签 2.3.3包含选择器 例：p[attribute~=value]，指的是attribute中包含value的值以及，并与其他内容通过空格隔开的p标签 2.3.4连字符标签 例：|=，属性为value或以value开头的 2.3.5前缀选择器 例：^=，属性以value开头的 2.3.6子串选择器 例：*=，属性值包含value的 2.3.7后缀选择器 例：$=，属性值以value结束的 2.4DIV+CSS组合选择器 注意box-sizing 三.JavaScript 用<script></script>标签包围，这里面的代码如同java里面的代码一样有操作性 这里面的数据是弱数据类型 有顺序结构、循环结构、条件结构 还可以写函数，外还可以写拼接，点击按钮给表格加一行 BOM和DOM内置元素 还有封装的jQuery，里面也有选择器 还有各种数据库用来存储数据 Ajax
HTML_CSS学习笔记.docx
07-15
基本的HTML操作，来自IMOOC的学习笔记。 1 1. HTML介绍 4 1.1. HTML与CSS的关系 4 1.2. 标签 4 1.3. HTML5文档结构 5 1.4. head标签 7 1.5. body标签 8 1.6. html注释 8 2. HTML5语义化标签 8 2.1. 语义化 8 2.2. 标签：段落标签 8 2.3. 标签：DIY一个标签 8 2.4. 标签：添加标题 9 2.5. 标签：自定义块 10 2.6. 标签：定义头部区域 11 2.7. 标签：定义底部区域 12 2.8. 标签：定义区段 12 2.9. 标签：定义侧边栏区域 13 3. HTML5效果标签 14 3.1. 标签：换行效果 14 3.2. 特殊字符&nbsp；实现空格效果 14 3.3. 标签：水平线效果 15 4. HTML5列表标签 15 4.1. 标签：实现无序列表 15 4.2. 标签：实现有序列表 16 5. HTML5图片，链接&表格标签 16 5.1. 标签：为网页添加图片 16 5.2. 标签：为网页添加超链接 17 5.3. 标签 target属性：在窗口中打开链接 17 5.4. 家族：为网页添加表格 18 5.5. 、、标签：定义表格的表头、表身、表尾 19 6. HTML5表单标签 20 6.1. 标签：创建表单，与用户交互 20 6.2. 输入框：文本输入框、密码输入框 22 6.3. :placeholder属性：输入框占位符——输入提示 23 6.4. number类型：数字输入框 23 6.5. url类型：网址输入框 24 6.6. email类型：邮箱输入框 24 6.7. 标签：创建文本域 25 6.8. 标签：为鼠标用户改进可用性 25 6.9. radio/checkbox：单选框、复选框 26 6.10. &标签：创建下拉菜单 27 6.11. submit类型：提交按钮 27 6.12. reset类型：重置表单信息 28 7. CSS3介绍 29 8. CSS3选择器 29 9. CSS3的继承、优先级&重要性 29 10. CSS3字体样式 29 11. CSS3文本样式 29 12. CSS3盒模型 29 13. CSS3布局模型 29 14. flex弹性盒模型 29 15. CSS3样式设置小技巧 29
table CSS制作好看的网页表格
12-12
幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性. 1.summary 和 caption 第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素,但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签,用来描述表格的内容.与image的alt文本属性相似. 2.thead, tbody, tfoot thead, tbody, tfoot使网页设计人员能够将表格划分为罗辑部分.例如,可以将所有列标题放在thead元素中,这样就能够对这个特殊区域单独应用样式.如果选择使用thead或tfoot元
table表格的thead固定，tbody展示出滚动条
最新发布
m0_66226018的博客
12-12 998
我也是做了两次的table表格的thead固定，tbody展示出滚动条，第一次因为是存在有表头合并的原因没有做出来完好的效果，第二次是不仅有表头的合并，还有tbody中的rowspan的合并。
HTML---表格table标签中thead、tbody、tfoot的作用
weixin_45729253的博客
04-17 1万+
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。 tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂...
HTML 之 thead/tbody/tfoot
Roger★L☆M☆J★
08-02 1048
  定义和用法 标签定义表格的表头。该标签用于组合 HTML 表格的表头内容。  他们三个搭配使用结合起来使用。 tbody: 标签表格主体（正文）。该标签用于组合 HTML 表格的主体内容 tfoot : 标签定义表格的页脚（脚注或表注）。该标签用于组合 HTML 表格的表注内容 tbody 元素用于对 HTML 表格中的主体内容进行分组，而 tfoot 元素用于对
table的使用，及caption，thead，tbody，tfoot的用法
wan123456789789的博客
07-18 1058
以及最后一行的==表格脚注（tfoot）==相对而言脚注不重要，可以不写。2.4 align可以居中但不建议使用，已废弃，支持用CSS进行书写样式。2.1 表格的标题，自动在表格顶部居中，语义也便于浏览器解读。2.3 表格标题标签是成对出现的，以为开始标签，以为结束标签。3.3 在其中可以进行列合并 colspan，写在th标签中。3.1 thead是表格的头部，建议在其中书写tr和th。3.1 tbody表格的主体部分，表格主要内容的书写位置。一个完整的表格应该具有。
CSS基础-05-表格（表格边框、 折叠边框 border-collapse、水平对齐 text-align、垂直对齐 vertical-align 、表格填充 padding）
运维玄德公
04-07 4043
1. 边框（border） 1.1 添加边框 示例（table 边框） 示例（th边框） 示例（td 边框） 1.2 折叠边框（border-collapse） 2. 高度和宽度（width/height） 示例（表头高度设置为百分比） 3. 对齐 3.1 水平对齐（text-align） 3.2 垂直对齐（vertical-align） 4. 表格填充（padding）...
HTML5和CSS3价格表翻转切换动画特效.zip
07-11
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, ...
css中table的caption，thead
ojb98K的博客
05-22 532
<style> table { /* 设置边框宽度 线段类型 颜色 */ border: 1px solid #000; /* 将边框合并 */ border-collapse: collapse; /* 居中 */ margin: 0 auto; } /* th默认加粗 */ ...
css让footer始终位于页面的最底部
热门推荐
Hling's Blog
03-23 2万+
html代码结构为：<div class="container"> <div cass="header"></div> <div class="body"></div> <div class="footer"></div> </div>第一种情况：footer随着进度条的滚动而滚动.container{width:100%;min-height:100%;position:relative;} .b
前端实践小项目(二)表格隔行换色与秒表
程序猿追的博客
04-21 1万+
准备表格：表头（thead）和表体（tbody） 绑定事件：加载事件 onload() 获取元素：获取表格 document.getElementById() 获取行的长度：表体中tr的数量len 遍历：for 判断：判断奇偶行 设置背景颜色：css
thead,tbody,tfoot标签的用法
Carey
04-06 1331
1.标签<thead>用于定义表格的表头，用CSS便于改变表格的外观。 2.thead tfoot tbody 必须用于table内。 3.当长的表格被打印时，表格的表头（thead）和页脚（tfoot）可被打印在包含表格数据的每张页面上。 4.<thead> 内部必须拥有 <tr> 标签！ 5.IE、Firefox、Chrome浏览器支持。
Web前端开发 table标签相关用法和属性
m0_52841254的博客
05-27 4543
table标签 html中的<table>标签，通常用于对页面布局的规划。 一、<table>标签简介 table标签用于在网页中建立表格布局，其子标签有<tr></tr> <th></th> <td></td> <thead></thead> <tbody></tbody> <tfoot></tfoot> 我们用如下代...
html中tbody标签什么意思,tbody标签什么意思
weixin_39548776的博客
06-20 4060
tbody标签什么意思tbody标签主要定义一段表格主体(正文)，使用tbody标签，可以将表格分为一个单独的部分，tbody标签可将表格中的一行或几行合成一组。html tbody标签 语法作用：组合 HTML 表格的主体内容。说明：tbody 元素应该与 thead 和 tfoot 元素结合起来使用。如果您使用 thead、tfoot 以及 tbody 元素，您就必须使用全部的元素。它们的出现...
前端Table小技巧—基本用法和样式
qq_44552416的博客
06-10 2339
描述：写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的，每个页面都有head ,body两部分，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。标签使用其本身所代表的含义。这就是他们的作用。(thead表格的头 tbody表格的身体 tfoot表格的脚) TBody是在table中使用的，用来指明由它包括的各表格行做为表格的主体部分。 TBody与
这段代码是一个表单，它的作用是展示商品信息并进行结算。以下是一些可能的优化方法： 使用CSS来美化表格样式，使其更加易读易用。 将商品信息从后端动态获取，并使用模板引擎来渲染页面，这样就可以避免硬编码商品信息的问题。 使用AJAX来实现局部刷新，这样可以在不刷新整个页面的情况下更新商品数量和合计金额等信息。 使用表格的thead,tbody,tfoot标签，分别来表示表头、表体和表尾，这样既能优化代码结构，也能提高可读性。 在商品数量和合计金额处添加输入框，使用户可以直接修改数量，从而提高用户体验 这些代码如何实现
06-01
1. 使用CSS来美化表格样式，可以通过添加class并在CSS文件中定义样式来实现。例如： HTML代码： ``` <table class="my-table"> <!-- 表格内容 --> </table> ``` CSS代码： ``` .my-table { border-collapse: collapse; width: 100%; } .my-table th, .my-table td { padding: 8px; text-align: left; border-bottom: 1px solid #ddd; } .my-table th { background-color: #f2f2f2; font-weight: bold; } ``` 2. 将商品信息从后端动态获取，并使用模板引擎来渲染页面，可以使用类似于JSP、PHP的后端技术来实现。例如： ``` <table> <tr> <th>商品名称</th> <th>商品单价</th> <th>商品数量</th> <th>合计金额</th> <th>操作</th> </tr> <% for (Product product : products) { %> <tr> <td><%= product.getName() %></td> <td><%= product.getPrice() %></td> <td><%= product.getQuantity() %></td> <td><%= product.getQuantity() * product.getPrice() %></td> <td><button>删除</button></td> </tr> <% } %> </table> ``` 3. 使用AJAX来实现局部刷新，可以使用jQuery等前端框架或原生JavaScript来实现。例如： ``` function updateCart(productId, quantity) { $.ajax({ url: "/api/cart", type: "PUT", data: { productId: productId, quantity: quantity }, success: function(response) { // 更新页面中的商品数量和合计金额 } }); } // 监听商品数量输入框的变化事件 $(".quantity-input").on("change", function() { var productId = $(this).data("productId"); var quantity = $(this).val(); updateCart(productId, quantity); }); ``` 4. 使用表格的thead,tbody,tfoot标签，可以直接在HTML代码中使用。例如： ``` <table> <thead> <tr> <th>商品名称</th> <th>商品单价</th> <th>商品数量</th> <th>合计金额</th> <th>操作</th> </tr> </thead> <tbody> <!-- 表格内容 --> </tbody> <tfoot> <tr> <td colspan="3">总计</td> <td>100.00</td> <td></td> </tr> </tfoot> </table> ``` 5. 在商品数量和合计金额处添加输入框，可以直接在HTML代码中添加。例如： ``` <table> <tr> <td>商品A</td> <td>10.00</td> <td><input type="number" value="1"></td> <td>10.00</td> <td><button>删除</button></td> </tr> <tr> <td>商品B</td> <td>20.00</td> <td><input type="number" value="2"></td> <td>40.00</td> <td><button>删除</button></td> </tr> </table> ```

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值