table表格的thead、tbody和tfoot应用代码实例

最新推荐文章于 2024-01-18 11:49:12 发布
最新推荐文章于 2024-01-18 11:49:12 发布
阅读量553 收藏
点赞数
原文链接：https://yq.aliyun.com/articles/573363
版权

可能很多朋友对于table标签的使用比较熟悉，但是对于thead、tbody和tfoot不够熟悉，因为不使用这三个标签基本上不影响使用，其实如果能够合理的使用这三个标签，可以是对表格的操作或者美化更为轻松便捷，下面就是一段使用上述三个标签的代码实例和大家分享一下，希望能够给需要的朋友带来一定的帮助，代码如下:

 
 
 
  
 
   
 
    
 
        

          01 
        
 
        

          02 
        
 
        

          03 
        
 
        

          04 
        
 
        

          05 
        
 
        

          06 
        
 
        

          07 
        
 
        

          08 
        
 
        

          09 
        
 
        

          10 
        
 
        

          11 
        
 
        

          12 
        
 
        

          13 
        
 
        

          14 
        
 
        

          15 
        
 
        

          16 
        
 
        

          17 
        
 
        

          18 
        
 
        

          19 
        
 
        

          20 
        
 
        

          21 
        
 
        

          22 
        
 
        

          23 
        
 
        

          24 
        
 
        

          25 
        
 
        

          26 
        
 
        

          27 
        
 
        

          28 
        
 
        

          29 
        
 
        

          30 
        
 
        

          31 
        
 
        

          32 
        
 
        

          33 
        
 
        

          34 
        
 
        

          35 
        
 
        

          36 
        
 
        

          37 
        
 
        

          38 
        
 
        

          39 
        
 
        

          40 
        
 
        

          41 
        
 
        

          42 
        
 
        

          43 
        
 
        

          44 
        
 
        

          45 
        
 
        

          46 
        
 		 
        
 
         
 
          <!DOCTYPE html>< 
          html 
          > 
         
 
         
 
          < 
          head 
          > 
         
 
         
 
          < 
          meta 
          charset 
          = 
          "utf-8" 
          > 
         
 
         
 
          < 
          meta 
          name 
          = 
          "author" 
          content 
          = 
          "http://www.softwhy.com/" 
          /> 
         
 
         
 
          < 
          title 
          >蚂蚁部落</ 
          title 
          > 
         
 
         
 
          < 
          style 
          type 
          = 
          "text/css" 
          > 
         
 
         
 
          .table{ 
         
 
         
 
             
          width:300px; 
         
 
         
 
             
          height:100px; 
         
 
         
 
             
          border:1px solid #ccc; 
         
 
         
 
             
          border-collapse:collapse; 
         
 
         
 
          } 
         
 
         
 
          .table td, .table th{ 
         
 
         
 
             
          border:1px solid #ccc; 
         
 
         
 
             
          padding:5px; 
         
 
         
 
          } 
         
 
         
 
          .table tfoot{color:red} 
         
 
         
 
          </ 
          style 
          > 
         
 
         
 
          </ 
          head 
          > 
         
 
         
 
          < 
          body 
          > 
         
 
         
 
          < 
          table 
          class 
          = 
          "table" 
          > 
         
 
         
 
             
          < 
          thead 
          > 
         
 
         
 
               
          < 
          tr 
          > 
         
 
         
 
                 
          < 
          th 
          >考试科目</ 
          th 
          > 
         
 
         
 
                 
          < 
          th 
          >相关分数</ 
          th 
          > 
         
 
         
 
               
          </ 
          tr 
          > 
         
 
         
 
             
          </ 
          thead 
          > 
         
 
         
 
             
          < 
          tbody 
          > 
         
 
         
 
               
          < 
          tr 
          > 
         
 
         
 
                 
          < 
          td 
          >计算机数学</ 
          td 
          > 
         
 
         
 
                 
          < 
          td 
          >80</ 
          td 
          > 
         
 
         
 
               
          </ 
          tr 
          > 
         
 
         
 
               
          < 
          tr 
          > 
         
 
         
 
                 
          < 
          td 
          >操作系统</ 
          td 
          > 
         
 
         
 
                 
          < 
          td 
          >85</ 
          td 
          > 
         
 
         
 
               
          </ 
          tr 
          > 
         
 
         
 
             
          </ 
          tbody 
          > 
         
 
         
 
             
          < 
          tfoot 
          > 
         
 
         
 
               
          < 
          tr 
          > 
         
 
         
 
                 
          < 
          td 
          >总分数</ 
          td 
          > 
         
 
         
 
                 
          < 
          td 
          >165</ 
          td 
          > 
         
 
         
 
               
          </ 
          tr 
          > 
         
 
         
 
             
          </ 
          tfoot 
          > 
         
 
         
 
          </ 
          table 
          > 
         
 
         
 
          </ 
          body 
          > 
         
 
         
 
          </ 
          html 
          > 
         
 
        
 
 
   
 
  
 
 
 
 
上面的代码演示了三个标签的的用法，用三个标签将table表格的三个功能区域分隔，非常便于对于相关内容进行设置样式和进行其他不同的操作，更多内容可以参阅相关阅读。
 
 

 
 
原文发布时间为：2017-2-17
 
 
本文作者：admin
 
 
本文来自云栖社区合作伙伴“蚂蚁部落”，了解相关信息可以关注蚂蚁部落
 
 
 
 
原文链接：table表格的thead、tbody和tfoot应用代码实例
 


                

        

        




    

  


    

      

        

            

              
                
                  weixin_34323858
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                    0
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
【Bootstrap】表格的CSS布局

				
			

			

				

					Wendy
				

				

					06-14
					
					6790
					
				

			

		

		

			
				
      表格在开发中经常会用到，尤其是在展示数据的时候，一个美观的表格设计非常重要。Bootstrap提供了表格组件，其中包括1种基础.table样式，4种附加样式（.table-striped，.table-bordered，.table-hover，.table-condensed）以及一个支持响应式布局的.table-responsive容器样式。需要注意的是每种样式都是在.table样...

			
		

	



                

              
                



	

		

			

				
					
HTML表格布局实例讲解

				
			

			

				

					09-28
				

			

		

		

			
				
HTML表格布局是指使用HTML中的<table>元素及其相关标签(, , , <thead>, <tbody>, <tfoot>)来创建和控制网页中的表格化数据展示和页面布局。这种方法在网页设计的早期阶段非常流行，但随着CSS和现代网页布局技术的...

			
		

	



                


  
              

                


	

		

			

				
					
thead tbody tfoot的用法

				
			

			

				

					ios0213的专栏
				

				

					05-31
					
					562
					
				

			

		

		

			
				
thead tbody tfoot  IE浏览器低版本中支持不是很完善，现在HTML5支持教好，可以参考（得意生活网） 源代码，里面有这三个标签的具体使用。

			
		

	





	

		

			

				
					
table的使用，及caption，thead，tbody，tfoot的用法

				
			

			

				

					wan123456789789的博客
				

				

					07-18
					
					1652
					
				

			

		

		

			
				
以及最后一行的==表格脚注（tfoot）==相对而言脚注不重要，可以不写。2.4 align可以居中但不建议使用，已废弃，支持用CSS进行书写样式。2.1 表格的标题，自动在表格顶部居中，语义也便于浏览器解读。2.3 表格标题标签是成对出现的，以为开始标签，以为结束标签。3.3 在其中可以进行列合并 colspan，写在th标签中。3.1 thead是表格的头部，建议在其中书写tr和th。3.1 tbody表格的主体部分，表格主要内容的书写位置。一个完整的表格应该具有。

			
		

	



		

			
		



	

		

			

				
					
table thead tfoot 分页，每页显示表头 表尾

				
			

			

				

					qb170217的博客
				

				

					07-16
					
					1210
					
				

			

		

		

			
				
test-page.html


<!DOCTYPE html>
<html lang="en">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>验收单</title>
    <style>
        * {
            margin: 0;
            p

			
		

	





	

		

			

				
					
对表格使用thead/tbody/tfoot

				
			

			

				

					weixin_30631587的博客
				

				

					08-14
					
					284
					
				

			

		

		

			
				
　　table 用于对页面布局。常与form表单一起使用，在对table使用时，如果要用thead来单独操作表头，那么tbody
/tfoot标签也要一起使用。并且使用的位置可以发生变化。比如tfoot 在head 和 foot 之间。如果需要打印该表格，那么表头跟注脚也都会在每页纸张上显示。
　　遇到个问题，页脚设置了为什么会在表格最上面呢？
转载于:https://www.cnblogs....

			
		

	





	

		

			

				
					
HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列

				
			

			

				

					weixin_33991727的博客
				

				

					03-30
					
					763
					
				

			

		

		

			
				
在HTML中表格是作为一个整体来解析的，解析完才会在页面显示，如果表格很复杂很长，加载时间很长，用户体验就不好。所以这里就要用到表格结构标签，解析一部分就显示一部分，不用等表格全部加载完再显示。
表格结构标签（添加这三个标签时，要注意不能影响网页布局）： <thead></thead> 表头部（放表格的标题之类） <tbody></tbod...

			
		

	





	

		

			

				
					
Table显示你要显示的边框代码

				
			

			

				

					12-14
				

			

		

		

			
				
在实际应用中，可以通过调整这些属性和参数来定制表格的外观和布局，以适应不同的设计需求。记住，虽然现代CSS提供了更强大的样式控制，但HTML表格属性仍然是创建基础表格布局的快速方式。在优化可访问性和兼容性时...

			
		

	





	

		

			

				
					
table 表格宽度拖动demo

				
			

			

				

					09-08
				

			

		

		

			
				
`<table>`包含`<thead>`（表头）、`<tbody>`（表格主体）和`<tfoot>`（表尾）等子元素。在`<thead>`中，`<th>`元素用于定义表头单元格，而在`<tbody>`中，`<tr>`表示行，`<td>`表示数据单元格。  在CSS层面上，我们...

			
		

	





	

		

			

				
					
实现table实用的图文表格UI布局样式.zip

				
			

			

				

					11-10
				

			

		

		

			
				
在HTML中，`<table>`元素用于创建表格，包括`<thead>`（表头）、`<tbody>`（主体）、`<tfoot>`（页脚）、`<tr>`（行）、`<th>`（表头单元格）和`<td>`（数据单元格）等子元素。然而，仅仅使用基础的HTML表格元素可能...

			
		

	





	

		

			

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

				
			

			

				

					zhiqingxue的博客
				

				

					04-15
					
					1157
					
				

			

		

		

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

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

话不多说，先上效果图:

具体使用看见代码演示:
<html>
<head>
<style type="text/css">            /* 下方表格的css文件,也可以自己写到一个css文件里，这里只设置了颜色，你也可以设置其它。*/
thead {color:green}
tbody {color:blue;height:50px}
tf

			
		

	





	

		

			

				
					
html table tfoot 跨列,HTML表格,table,thead,tbody,tfoot,th,tr,td,的属性以及跨行，跨列

				
			

			

				

					weixin_29251337的博客
				

				

					06-22
					
					526
					
				

			

		

		

			
				
在HTML中表格是作为一个整体来解析的，解析完才会在页面显示，如果表格很复杂很长，加载时间很长，用户体验就不好。所以这里就要用到表格结构标签，解析一部分就显示一部分，不用等表格全部加载完再显示。表格结构标签(添加这三个标签时，要注意不能影响网页布局)： 表头部(放表格的标题之类)  表主体(放表格主体数据) 表脚注　　(放表格脚注)在写代码时：不论上面，，顺序如何，在页面显示时，总是按照...

			
		

	





	

		

			

				
					
html table th分层,html中 table的结构 彻底搞清 caption th thead等

				
			

			

				

					weixin_32513585的博客
				

				

					06-24
					
					413
					
				

			

		

		

			
				
https://www.cnblogs.com/bkylee/p/5918219.html正因为有太多 随意 称呼的 教法, 所以 感到很困惑, 如, 很多人把th叫标题. 那人家 caption怎么想, th只是一个跟td一样的角色, 只是对他进行加粗 加黑了而已, 用于某些单元格的内容 具有 "总起, 总领, 总结, 总计 "之类的语义时...在html中写table的时候,要注意它的结构, ...

			
		

	





	

		

			

				
					
HTML---表格table标签中thead、tbody、tfoot的作用

					
热门推荐

				
			

			

				

					weixin_45729253的博客
				

				

					04-17
					
					1万+
					
				

			

		

		

			
				
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成。下载一块显示一块，表格巨大时有比较好的效果。
tbody、tfoot、thead一般来说用得不是很多，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂...

			
		

	





	

		

			

				
					
tbody、thead

				
			

			

				

					DEF网络安全爱好者技术博客
				

				

					07-01
					
					821
					
				

			

		

		

			
				
tbody和thead是table当中的一个内部的内部头和内部内容。
代码如下：



window.onload = function(){
var table = document.getElementById('table');
alert(table.getElementsByTagName('tbody')[1].getElementsByTagName('tr')[0].

			
		

	





	

		

			

				
					
前端-基础 表格标签 - 表格结构标签 （ ＜thead＞ ＜tbody＞）

					
最新发布

				
			

			

				

					三毛与海子的博客
				

				

					01-18
					
					1210
					
				

			

		

		

			
				
表格标签的大体结构      

			
		

	





	

		

			

				
					
table标签中thead、tbody、tfoot的作用

				
			

			

				

					weixin_34092370的博客
				

				

					10-20
					
					110
					
				

			

		

		

			
				
为了让大表格(table)在下载的时候可以分段的显示,就是说在浏览器解析HTML时，table是作为一个整体解释的，使用TBODY可以优化显示。如果表格很长，用tbody分段，可以一部分一部分地显示，不用等整个表格都下载完成
 TBODY包含行的内容下载完优先显示，不必等待表格结束.另外，还需要注意一个地方。表格行本来是从上向下显示的。但是，应用了thead/tbody/tfoot以后，就“从...

			
		

	





	

		

			

				
					
html Thead、Tbody、Tfoot的作用

				
			

			

				

					weixin_34352449的博客
				

				

					09-06
					
					120
					
				

			

		

		

			
				
如果你的表格非常大，内容非常多，那么这个表格就要等表格内容全部下载完才会显示。
如果你要下载一部分显示一部分的话，你就得把它拆分成多个表格，这样每下载一个表格就会显示一个表格。
但如果因为某种原因你不想拆分表格，那就将一部分<tr></tr>用<tbody></tbody>来分开，
这样的话每个<tbody>下载完后就会显示，而不必...

			
		

	





	

		

			

				
					
thead、tbody标签的用法

				
			

			

				

					ginue999的专栏
				

				

					06-04
					
					4179
					
				

			

		

		

			
				
  thead、tbody都是成对出现的标签，即和、和。它们都应用到表格，用于整体规划表格的行列属性。应用这两个标签的优点是，我们只要对thead、tbody标签的属性进行修改，就能对表格的整行单元格的属性进行修改，从而剩去了逐一修改单元格属性的麻烦。 
　　thead标签的属性有：align bgcolor class dir id lang style title valign等。


...

			
		

	





	

		

			

				
					
使用JS实现HTML表格行列锁定的示例代码

				
			

			

				

					
				

			

		

		

			
				
1. 创建HTML结构：一个标准的HTML表格包含`<table>`元素，以及内部的`<thead>`（表头）、`<tbody>`（主体内容）和`<tfoot>`（表脚）等部分。在这个实例中，我们主要关注`<thead>`和`<tbody>`，因为它们是实现锁定...

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值