`
shania0127
  • 浏览: 25383 次
  • 性别: Icon_minigender_2
  • 来自: 北京
社区版块
存档分类
最新评论

table里放多个tbody得仔细注意

阅读更多
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> table里放多个tbody时,得多仔细! </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>

<BODY>
<div>
   <table>
     <tbody id="One"><tr><td><table id="Table1"><tr><td>tbody-One</td></tr></table><tr><td></tbody>
    <tbody id="Two"><table id="Table2"><tr><td>tbody-Two</td></tr></table></tbody>
     <tbody id="Three"><table id="Table3"><tr><td>tbody-Three</td></tr></table></tbody>
<!-- <tbody id="Two"><tr><td><table id="Table2"><tr><td>tbody-Two</td></tr></table><tr><td></tbody>
     <tbody id="Three"><tr><td><table id="Table3"><tr><td>tbody-Three</td></tr></table><tr><td></tbody> -->
</table>
<SCRIPT LANGUAGE="JavaScript">
<!--
function fc(){
   alert("tbody-One" + (document.getElementById("One")==null?"不存在":"存在")+"!");
   alert("tbody-Two" + (document.getElementById("Two")==null?"不存在":"存在")+"!");
   alert("tbody-Three" + (document.getElementById("Three")==null?"不存在":"存在")+"!");
}
//-->
</SCRIPT>
   </div>
<input type="button" value="test" onclick="javascript:fc();"/>
    总结:
     当1个table下并列放多个tbody,tbody里又各自需要放table时, <br/>
        在IE下,可以在tbody后直接写上table,如第14行、第15行、第16行 --支持 <br/>
        而这在FireFox下只支持一个tbody,不支持多个这样的tbody。<br/>
        需要把table先放到<tr><td>...</td></tr>中,再把这<tr><td><table>...</table></td></tr>跟在tbody后面,如第14行、第17行、第18行<br/>
     这样就可以达到在IE和FireFox下,1个table中同时放多个tbody都能用document.getElementById()语句来获得相应的tbody了。<br/>
-----------------------------------------------------------------------------------------------------------------------------------------
   table里嵌套tbody的好处
     加了tbody后准确来说并不是影响网页表格下载速度,而是呈现速度!<br/>
   因为浏览器对table的解释是等待整个table全部加载完才显示。如果加入tbody,浏览器则一边下载一边显示已经下载的内容。

   下面是其具体用法规范:

    <table>
    <thead><tr>...</tr></thead>
    <tfoot><tr>...</tr></tfoot>
    <tbody><tr>...</tr></tbody>
    </table>
   可以对其中的属性定义css。

   值得注意的是,据W3C标准:常理顺序应该是头--身--脚,但是这种用法中:tfoot是紧跟thead后面的........,得好好注意!

</BODY>
</HTML>


转自:http://hi.baidu.com/%C4%CE%B6%F9nye/blog/item/584f6825fdb6e73b8644f969.html
分享到:
评论

相关推荐

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法

    table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table表格,让thead固定,tbody有滚动条,关键是都对齐的纯css写法。table...

    bootstrap表格固定表头并且tbody部分添加滚动条

    一个基本的Bootstrap表格由`&lt;table&gt;`标签开启,包含`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`等部分。`&lt;thead&gt;`用于定义表格的表头,`&lt;tbody&gt;`则包含表格的主要内容,`&lt;tfoot&gt;`则常用来显示总计或统计信息。 要实现表头固定...

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

    tbody元素支持嵌套的注意方法 在HTML中,tbody元素是table元素的一个子元素,用于定义表格的主体部分。tbody元素可以嵌套其他元素,如tr、td等,以便创建复杂的表格结构。但是,在使用tbody元素时需要注意一些方法...

    基于Bootstrap table组件实现多层表头的实例代码

    多层表头是指在表格中实现多个层次的表头,每个层次可以包含多个列。这种结构常用于展示复杂的数据关系,例如树形结构的数据。Bootstrap Table提供了一个简单的方式来实现多层表头,只需要使用合适的HTML结构和CSS...

    CSS设置table下tbody的滚动条的实现

    CSS设置table下tbody的滚动条实现是一种网页布局技术,能够让HTML表格的tbody部分在内容超出可视区域时显示出垂直滚动条,而thead(表头)则保持固定不动。这种技术在制作具有大量数据内容的网页表格时非常有用,...

    table嵌套table边框样式

    一个HTML表格由`&lt;table&gt;`元素开启,包含`&lt;tr&gt;`(行)元素,`&lt;td&gt;`(单元格)或`&lt;th&gt;`(表头单元格)元素,以及可能的`&lt;thead&gt;`、`&lt;tbody&gt;`和`&lt;tfoot&gt;`部分。当表格嵌套时,一个`&lt;td&gt;`或`&lt;th&gt;`元素内部可以包含另一个...

    FixedTable.7z

    table固定左侧多列,画面中可对多个table进行固定,谷歌、ie都试过没问题;之前实在是网上找不到好的,就自己整合弄了一个,质量没的说,肯定胜过90%其他的;调用简单: 例子是:html+jquery+FixedTable.js $("#...

    html中table固定头部表格tbody可上下左右滑动

    当表格头部固定时,需要分为两个表格来做:一部分是thead,一部分是tbody,具体实现方式如下: html代码: &lt;div class=table_box_big&gt; &lt;div class=table_box&gt; &lt;table&gt; &lt;th&gt;&lt;div&gt;标题一&lt;/div&gt;&lt;/th&gt; &lt;th&gt;&lt;div&gt;...

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

    在网页设计中,Bootstrap是一个非常流行的前端开发框架,它提供了丰富的预定义样式、组件和JavaScript插件,使得创建响应式布局和用户友好的交互变得更加容易。在本例中,我们关注的是如何在Bootstrap的表格(table...

    Boostrap table 列头和内容不对齐问题,终极解决方案

    然而,在实际应用中,我们可能会遇到一个常见的问题:表格的列头(thead)与内容(tbody)在对齐上出现问题,这会严重影响用户体验。本文将深入探讨这个问题的原因,并提供一个终极解决方案。 列头与内容不对齐的...

    table无限循环无缝滚动.zip

    "table无限循环无缝滚动"是一个功能,它能够让用户在浏览长表格时体验到类似轮播的效果,即当表格底部到达时,表格内容会自动重新排列,让顶部的内容再次出现,形成一种无限滚动的视觉效果。这一技术主要依赖...

    Layui组件Table绑定行点击事件和获取行数据的方法

    其中,Table组件是一个常用的数据展示组件,它不仅可以展示数据,还提供了丰富的交互功能,比如行点击事件的绑定和获取行数据。Layui的Table组件的使用是前端开发中非常基础且重要的技能,接下来详细解析如何在Layui...

    JavaScript 实现 Excel数据导出 支持多个Sheet页导出

    然后将这些表格放入一个大的HTML `&lt;table&gt;` 元素中,每个子表格用 `&lt;tbody&gt;` 包裹,并添加一个表头 `&lt;thead&gt;` 来标识Sheet页。最后,将整个大表格转换成Blob并提供下载。 在实际应用中,可以封装一个函数,接受JSON...

    js实现漂亮的table表格

    在网页开发中,表格(Table)是展示数据的重要方式之一,尤其在前端界面设计中,一个美观、功能齐全的表格可以提升用户体验。本教程将详细介绍如何利用JavaScript (JS) 和 Cascading Style Sheets (CSS) 技术来创建...

    tableExport 前端数据导出工具

    1. **多格式支持**:TableExport支持导出为CSV、XLS(Excel)、XLSX、ODS、PDF、TXT、JSON、XML等多种格式,满足不同场景的需求。 2. **自定义样式**:你可以根据项目需求调整导出数据的样式,比如字体、颜色、边框...

    bootstrap集成table样式的总结

    在Bootstrap中,Table组件是一个重要的部分,它允许开发者轻松地创建美观、可定制的表格。本篇文章将深入探讨如何在Bootstrap中集成和使用Table样式。 一、基础样式 Bootstrap的表格默认具有简洁的样式,包括水平...

    pl-table示例代码

    `pl-table`是一个用于创建可定制化表格的前端组件,常在Web开发中用于数据展示。这个组件提供了丰富的功能和自定义选项,使得开发者能够轻松地构建交互式、响应式的表格。下面我们将深入探讨`pl-table`的相关知识点...

    js获取table行 列 的值

    这里的 `&lt;table&gt;` 标签定义了一个表格,并且每个 `&lt;tr&gt;` 元素代表一行,而 `&lt;td&gt;` 元素代表单元格。在这个例子中,每个单元格都包含一个 `&lt;input type="text"&gt;` 元素,用来显示具体的数值。 ### 二、JavaScript ...

    html中table表格导出Excel示例(亲测可用)

    我们将深入探讨这个过程,以及涉及到的关键知识点。 首先,`html`是超文本标记语言,用于构建网页结构。`table`是HTML元素之一,用于创建表格布局。我们可以使用`&lt;table&gt;`, `&lt;tr&gt;`, `&lt;td&gt;`和`&lt;th&gt;`等标签来定义表格...

Global site tag (gtag.js) - Google Analytics