`
bruce198
  • 浏览: 236301 次
  • 性别: Icon_minigender_1
社区版块
存档分类
最新评论

tbody的解释及用法

    博客分类：
  • java
数据结构 
阅读更多
  1. 写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的，每个页面都有head ,body两部分，对于比较复杂的页面，页面的排版用到了很多的表格，表格的结构也就相对的复杂了，所以又将表格分割成三个部分：题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。    
  2. thead用来放标题之类的东西    
  3.   
  4. tbody放数据本体    
  5.   
  6. tfoot放表格的脚注之类……    
  7.   
  8. 标签使用其本身所代表的含义。这就是他们的作用。(thead表格的头    
  9. tbody表格的身体    
  10. tfoot表格的脚)    
  11. TBody是在table中使用的，用来指明由它包括的各表格行做为表格的主体部分。    
  12. TBody与THead和TFoot在表格中形成三个“块”，THead指明表格的Head部分，TFoot指明表格的脚注部分。而TBody则指明表格的主体部分。    
  13. 比如:    
  14.     <TABLE>      
  15.         <THEAD>      
  16.             <TR>      
  17.                 <TD>This text is in the THEAD.</TD>      
  18.            </TR>      
  19.        </THEAD>      
  20.         <TBODY>      
  21.             <TR>      
  22.                 <TD>This text is in the TBODY.</TD>      
  23.             </TR>      
  24.         </TBODY>      
  25.         <TFOOT>      
  26.             <TR>      
  27.                 <TD>This text is in the table footer.</TD>      
  28.            </TR>      
  29.         </TFOOT>      
  30.     </TABLE>      
  31.   
  32. 表格的dom结构象这样的：   
  33.     <table>      
  34.         <thead>      
  35.             <tr>      
  36.                 <td>表头</td>      
  37.             </tr>      
  38.        </thead>      
  39.         <tbody>      
  40.             <tr>      
  41.                 <td>表体</td>      
  42.            </tr>      
  43.        </tbody>      
  44.         <tfoot>      
  45.             <tr>      
  46.                 <td>表脚</td>      
  47.             </tr>      
  48.         </tfoot>      
  49.     </table>      
  50. 如果只有一个tbody的时候经常不写tbody，但是其实这个对象还是存在的，alert一下table的innerHTML就可以看见了。     
  51.   
  52. ---------------------------------------------------------------     
  53.   
  54. <tbody>的好处就是可以先显示<tbody></tbody>之间的内容,     
  55. 而不必等整个表格都下载完成后再显示,       
  56. 这对于那些喜欢用表格来排版式网页的人来说尤其重要,     
  57. 不然的话,      用户半天没看到反应就会以为该网页出错了.     
  58. ---------------------------------------------------------------     
  59. <thead><tbody><tfoot>无论前后顺序如何改变，<thead>内的元素总是在表的最上面，<tfoot>总在表的最下面，所以     
  60.     <table>      
  61.         <tfoot>      
  62.             <tr>      
  63.                 <td>表脚</td>      
  64.             </tr>      
  65.         </tfoot>      
  66.         <thead>      
  67.             <tr>      
  68.                 <td>表头</td>      
  69.             </tr>      
  70.         </thead>      
  71.         <tbody>      
  72.             <tr>      
  73.                 <td>表体</td>      
  74.             </tr>      
  75.         </tbody>      
  76.     </table>     
  77. 与上面的sorce运行结果是一样的。     
  78. ---------------------------------------------------------------     
  79.   
  80. 它是表格的正文部分，就像HTML的<body>一样.    
  81.     <TABLE>      
  82.         <THEAD>      
  83.             <TR>      
  84.                 <TD>这是 THEAD 中的文本。</TD>      
  85.             </TR>      
  86.         </THEAD>      
  87.         <TBODY>      
  88.             <TR>      
  89.                 <TD>这是 TBODY 中的文本。</TD>      
  90.             </TR>      
  91.         </TBODY>      
  92.     </TABLE>     
  93. 大家一定曾经把别人的网页另存下来看过，特别是用dw打开时，你会看到，很多网页上面都加了<tbody>这个标签，在dw中黄黄的很是显眼，那么<tbody>是个什么东东呢？   
  94. 　　用TBODY这个标签可以控制表格分行下载，可以让其中的内容比网页中别的东东（如图片）先下载下来，这样可以让别人先看到网页的实质性的内容，不用等那么久了，在需要分行下载处加上<tbody>和</tbody>，比如：</P><P><table>  
  95.     <tbody>      
  96.         <tr>      
  97.             <td>飞鸥岛</td>      
  98.         </tr>      
  99.         <tr>      
  100.             <td>飞鸥岛</td>      
  101.         </tr>      
  102.     </tbody>      
  103.     <tbody>      
  104.         <tr>      
  105.             <td>飞鸥岛</td>      
  106.         </tr>      
  107.         <tr>      
  108.             <td>飞鸥岛</td>      
  109.         </tr>      
  110.     </tbody>      
  111.     </table>     
  112.   
  113.     
分享到：
| mysql 时间函数用法 集合
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    HTML标签tbody的用法与说明

    tbody 元素应该与 thead 和 tfoot 元素结合起来使用。 　表格的分组显示(Structured Table) （IExplore Only） 一、按行分组 &lt;thead&gt; … &lt;/thead&gt; – 表的题头(Header) &lt;tbody&gt; … &lt;/tbody&gt; – 表的正文(Body) ...

    tbody元素支持嵌套的注意方法

    但是，在使用tbody元素时需要注意一些方法，以避免出现错误。 首先，需要注意tbody元素的嵌套结构。在 HTML 中，tbody元素可以嵌套tr元素，而tr元素可以嵌套td元素。因此，在使用tbody元素时，需要正确地嵌套这些...

    html tbody 用法

    表格的分组显示(Structured Table) （IExplore Only） 1）按行分组 &lt;thead&gt; ... &lt;/thead&gt; - 表的题头(Header) &lt;tbody&gt; ... &lt;/tbody&gt; - 表的正文(Body) &lt;tfoot&gt; ... &lt;/tfoot&gt; - 表的脚注(Footer) 例： &lt;table&gt; &lt;thead

    用css给tbody加垂直滚动条的具体思路及样式代码

    为了解决这个问题，可以使用负的 `margin` 或其他 CSS 技巧来调整 `thead` 与 `tbody` 之间的间距，使其看起来更像传统的表格。 此外，这种方法可能不适用于某些旧版浏览器或非主流浏览器，因此在实际应用时，需要...

    用js删除tbody的代码

    5. **删除tbody元素**: 使用`removeChild`方法删除指定索引的`&lt;tbody&gt;`元素。 #### 实际应用案例 假设我们有如下HTML结构： ```html &lt;tbody&gt; &lt;td&gt;Row 1, Column 1 &lt;td&gt;Row 1, Column 2 &lt;/tbody&gt; &lt;tbody&gt;...

    IE6-IE9中tbody的innerHTML不能赋值的解决方法

    例如，在jQuery中，可以使用`append()`或`html()`方法来插入或替换`&lt;tbody&gt;`的内容。 ```javascript $('tbody').html('&lt;tr&gt;&lt;td&gt;新内容&lt;/td&gt;&lt;/tr&gt;'); ``` 总之，由于IE6-IE9浏览器的限制，直接通过`innerHTML`属性...

    html工作中表格&amp;lt;tbody&amp;gt;标签的使用技巧

    这样的用法是错误的，不仅违反了W3C的标准，还可能导致浏览器解释和渲染上的问题。在设计表格时，应该只使用一个tbody标签，并把所有的行包含在其中。 在实际项目开发中，前端设计师往往需要在UI原型阶段就考虑交互...

    网页代码及使用方法

    ### 网页代码及其使用方法详解 #### 一、网页背景图片的设置方法 网页设计中，背景图片能够极大地提升用户体验与网站的整体美观度。本文将详细介绍如何使用不同的HTML与CSS代码来设置网页背景图片。 ##### 1. 最...

    BootStrap的table表头固定tbody滚动的实例代码

    总结来说，这个实例为我们提供了一种实现Bootstrap表格固定表头滚动tbody的方法，这对于处理大量数据的表格是一个实用的解决方案。通过理解这个例子，我们可以更好地掌握Bootstrap的定制能力和JavaScript的动态调整...

    js tr控制下面的tbody隐藏和显示

    ### JavaScript 控制 `tbody` 的隐藏与显示 #### 背景介绍 ...这种方法不仅适用于简单的表格操作，还可以扩展到更复杂的场景中。对于 Web 开发者来说，掌握此类技巧对于提高用户体验和页面交互性至关重要。

    table标签使用方法

    ### HTML中的Table标签使用方法详解 #### 一、Table标签基础概述 `table`标签是HTML中最常用的元素之一，主要用于创建表格。通过合理利用`table`标签及其相关的属性，可以轻松地实现数据的结构化展示。本文将详细...

    使用thead、tfoot、 tbody制作一个表格

    在本篇文章中，我们将深入探讨这些标签的作用和用法，并通过一个具体的示例来展示如何使用它们。 首先，`&lt;thead&gt;`标签用于定义表格的头部，通常包含表头单元格`&lt;th&gt;`，这些单元格用于提供列的标题或描述。例如，在...

    firefox TBODY 用js显示和隐藏时出现错位的解决方法

    今天帮别人写一个网页，发现：当用javascript动态设置tr.style.display = "block"显示某行时，使用IE浏览没有问题，但使用firefox浏览时该行被移到了其它行的后面，很是诧异。

    纯CSS实现的表格滚动条效果

    请注意，以上CSS代码仅适用于基于Webkit内核的浏览器（如Chrome和Safari），对于Firefox和其他非Webkit浏览器，可能需要使用其他方法或者额外的JavaScript库来实现兼容性。然而，随着浏览器对CSS3特性的支持越来越...

    table控件以及用法

    本文将深入探讨“table控件”及其用法，基于提供的资源链接——一篇名为“table控件以及用法”的博客文章，尽管描述部分为空，但我们可以根据标题推测文章内容可能涵盖基础概念、实现方法、以及可能涉及到的源码和...

    js动态添加行

    这可以使用`appendChild()`或`insertBefore()`方法完成。 ```javascript let newCell = document.createElement('td'); newCell.textContent = '新内容'; newRow.appendChild(newCell); ``` 4. **插入到现有结构**...

Magicbox
Global site tag (gtag.js) - Google Analytics