写html代码的时候,遇到了Tbody这个标记符,这个标记符是对于表格来说的,每个页面都有head ,body两部分,对于比较复杂的页面,页面的排版用到了很多的表格,表格的结构也就相对的复杂了,
所以又将表格分割成三个部分:题头、正文和脚注。而这三部分分别用:thead,tbody,tfoot来标注。
thead用来放标题之类的东西
tbody放数据本体
tfoot放表格的脚注之类……
标签使用其本身所代表的含义。这就是他们的作用。(thead表格的头
tbody表格的身体
tfoot表格的脚)
TBody是在table中使用的,用来指明由它包括的各表格行做为表格的主体部分。
TBody与THead和TFoot在表格中形成三个“块”,THead指明表格的Head部分,TFoot指明表格的脚注部分。而TBody则指明表格的主体部分。
比如:
<TABLE>
<THEAD>
<TR>
<TD>
This text is in the THEAD.
</TD>
</TR>
</THEAD>
<TBODY>
<TR>
<TD>
This text is in the TBODY.
</TD>
</TR>
</TBODY>
<TFOOT>
<TR>
<TD>
This text is in the table footer.
</TD>
</TR>
</TFOOT>
</TABLE>
表格的dom结构象这样的:
<table>
<thead>
<tr>
<td>表头</td>
</tr>
</thead>
<tbody>
<tr>
<td>表体</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>表脚</td>
</tr>
</tfoot>
</table>
如果只有一个tbody的时候经常不写tbody,但是其实这个对象还是存在的,alert一下table的innerHTML就可以看见了。
分享到:
相关推荐
tbody 元素应该与 thead 和 tfoot 元素结合起来使用。 表格的分组显示(Structured Table) (IExplore Only) 一、按行分组 <thead> … </thead> – 表的题头(Header) <tbody> … </tbody> – 表的正文(Body) ...
但是,在使用tbody元素时需要注意一些方法,以避免出现错误。 首先,需要注意tbody元素的嵌套结构。在 HTML 中,tbody元素可以嵌套tr元素,而tr元素可以嵌套td元素。因此,在使用tbody元素时,需要正确地嵌套这些...
表格的分组显示(Structured Table) (IExplore Only) 1)按行分组 <thead> ... </thead> - 表的题头(Header) <tbody> ... </tbody> - 表的正文(Body) <tfoot> ... </tfoot> - 表的脚注(Footer) 例: <table> <thead
为了解决这个问题,可以使用负的 `margin` 或其他 CSS 技巧来调整 `thead` 与 `tbody` 之间的间距,使其看起来更像传统的表格。 此外,这种方法可能不适用于某些旧版浏览器或非主流浏览器,因此在实际应用时,需要...
5. **删除tbody元素**: 使用`removeChild`方法删除指定索引的`<tbody>`元素。 #### 实际应用案例 假设我们有如下HTML结构: ```html <tbody> <td>Row 1, Column 1 <td>Row 1, Column 2 </tbody> <tbody>...
例如,在jQuery中,可以使用`append()`或`html()`方法来插入或替换`<tbody>`的内容。 ```javascript $('tbody').html('<tr><td>新内容</td></tr>'); ``` 总之,由于IE6-IE9浏览器的限制,直接通过`innerHTML`属性...
这样的用法是错误的,不仅违反了W3C的标准,还可能导致浏览器解释和渲染上的问题。在设计表格时,应该只使用一个tbody标签,并把所有的行包含在其中。 在实际项目开发中,前端设计师往往需要在UI原型阶段就考虑交互...
### 网页代码及其使用方法详解 #### 一、网页背景图片的设置方法 网页设计中,背景图片能够极大地提升用户体验与网站的整体美观度。本文将详细介绍如何使用不同的HTML与CSS代码来设置网页背景图片。 ##### 1. 最...
总结来说,这个实例为我们提供了一种实现Bootstrap表格固定表头滚动tbody的方法,这对于处理大量数据的表格是一个实用的解决方案。通过理解这个例子,我们可以更好地掌握Bootstrap的定制能力和JavaScript的动态调整...
### JavaScript 控制 `tbody` 的隐藏与显示 #### 背景介绍 ...这种方法不仅适用于简单的表格操作,还可以扩展到更复杂的场景中。对于 Web 开发者来说,掌握此类技巧对于提高用户体验和页面交互性至关重要。
### HTML中的Table标签使用方法详解 #### 一、Table标签基础概述 `table`标签是HTML中最常用的元素之一,主要用于创建表格。通过合理利用`table`标签及其相关的属性,可以轻松地实现数据的结构化展示。本文将详细...
在本篇文章中,我们将深入探讨这些标签的作用和用法,并通过一个具体的示例来展示如何使用它们。 首先,`<thead>`标签用于定义表格的头部,通常包含表头单元格`<th>`,这些单元格用于提供列的标题或描述。例如,在...
今天帮别人写一个网页,发现:当用javascript动态设置tr.style.display = "block"显示某行时,使用IE浏览没有问题,但使用firefox浏览时该行被移到了其它行的后面,很是诧异。
请注意,以上CSS代码仅适用于基于Webkit内核的浏览器(如Chrome和Safari),对于Firefox和其他非Webkit浏览器,可能需要使用其他方法或者额外的JavaScript库来实现兼容性。然而,随着浏览器对CSS3特性的支持越来越...
本文将深入探讨“table控件”及其用法,基于提供的资源链接——一篇名为“table控件以及用法”的博客文章,尽管描述部分为空,但我们可以根据标题推测文章内容可能涵盖基础概念、实现方法、以及可能涉及到的源码和...
这可以使用`appendChild()`或`insertBefore()`方法完成。 ```javascript let newCell = document.createElement('td'); newCell.textContent = '新内容'; newRow.appendChild(newCell); ``` 4. **插入到现有结构**...