html工作中表格<tbody>标签的使用技巧_经验交流

在做页面的时候,经常要根据不同的操作来显示或隐藏一个表格中的部分内容,隐藏一行直接用<tr>标签,隐藏多行时用<tbody>就很方便。
<table>
<tbody id="content1">
<tr><td>表单内容</td></tr>
</tbody>
<tbody id="content2" style="display:none">
<tr><td>多行内容</td></tr>
<tr><td>多行内容</td></tr>
</tbody>
</table>
用js来控制样式display来显示和隐藏,很方便。听说这样还可以控制网页加载时显示的顺序,content1会比content2先显示,而不是等表格加载完后一起显示,没有实验过,在表格数据很多时会有作用。

使用过程中发现<tbody>不能嵌套使用,会出现莫名的问题,<tbody>是用来定义表格主体的,定义多个主体不说,主体里再来个主体确实不符合W3C对其的定义,像下面这样使用看起来好像没错,但实际上是有错误的。
<table>
<tbody id="all">
<tbody id="content1">
<tr><td>表单内容</td></tr>
</tbody>
<tbody id="content2">
<tr><td>多行内容</td></tr>
<tr><td>多行内容</td></tr>
</tbody>
</tobdy>
</tbale>

做原型页面时会为了实现交互效果才这样用<tbody>,实际的后台编程中用不着,只要根据判断输出相应的表体就行了。
页面制作时表格的设计用<thead><tbody><tfoot><th><caption>等以前不常用的标签加上CSS的定义可以实现很多不错的效果,标准又语义,很强大,看过相关的一篇文章,找到收藏起来。

时间: 2024-09-23 04:25:51

html工作中表格&amp;lt;tbody&amp;gt;标签的使用技巧_经验交流的相关文章

表格标签table深入了解_经验交流

前不久为了寻找表格(table)所包含的主要标签,一直在寻找着,找到当然就是跟大家一起来分享一下. 表格标签主要包含的标签有table.caption.th.tr.td.thead.tfoot.tbody.col.colgroup,针对每个的介绍如下: <table> table标签可定义表格.在 <table> 标签内部,你可以放置表格的标题.表格行.表格列.表格单元以及其他的表格. <caption> caption 元素可定义一个表格标题.caption 标签必须

在DW中CSS编码需要注意和掌握的一些技巧_经验交流

由于"可视化"和操作简便,在DW中编写CSS的朋友很多,今天我们介绍一些在DW中编写CSS的"最佳习惯",希望对大家有所帮助. CSS正在改变网站设计的进程.为迎合不断增长的倾向于CSS的设计人员的需求,Macromedia DW MX引进了一些新的及改善过的CSS相关的特性.有了这些新的特性,你可以为未来的更新作好计划,开发与W3C标准更加兼容的站点.本文讨论在DW MX中使用CSS以及突出某一特定CSS特性时的一些建议. 一般地讲,样式表(style sheet

固定表格的高度超过指定高度就隐藏的方法_经验交流

经常做网页,可发现原理只用控制<td>的高度,超过了就隐藏是不能用的,应该还有其它的方法,后来发现,原理,只需要在<td>...</td>中加个<div style="height:80px; overflow:hidden"> </div>就可以了,唉

做网页中需要掌握的八个CSS布局技巧_经验交流

1.若有疑问立即检测 在出错时若能对原始代码做简单检测可以省去很多头痛问题.W3C对于XHTML与CSS 都有检测工具可用,请见 http://validator.w3.org .请注意,在文件开头的错误,可能因为不当的结构等因素造成更多错误:我们建议先修正一些最明显的错误之后重新检测,这样也许会让错误数量爆减. 2.使用浮动功能时记得适当清除指令  浮动是个危险的功能,未必会产生您所期望的结果.如果您遇到浮动元素延伸到外围容器的边框或者其他不正常情况,请先确定您的做法是正确的.请参阅Eric 

用&amp;amp;lt;TABLE&amp;amp;gt;语句来实现圆角表格可以省去制作圆角图片之苦!_经验交流

语句:  <DIV align=center> <TABLE style="TABLE-LAYOUT: fixed" height=28 cellSpacing=0 cellPadding=0 width="100%"> <TBODY> <TR height=1> <TD width=1></TD><TD width=1></TD><TD width=1>&l

xhtml+css网页制作中常见问题解决方法_经验交流

无论是谁,在制作页面的过程都是会碰到这样或者那样的问题,出了问题就肯定要解决.解决问题的前提是要知道问题出在什么地方,对于新手来说不一定一看到问题就知道问题出在哪里.比如在IE6中"多了一只猪"的问题,对于一些问题需要更多的经验交流分享吸收后才能更好的成长. 在网络中我想大家都有提过问题,需要别人解答的时候,但往往是你的一个问题却得不到任何人给你的解答,或者说是完全被无视了.对于这个时候的你,是不是在想"难道是因为我这个问题太简单了,他们都不想回答""他们

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解决方案_经验交流

IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值,重现代码如下 复制代码 代码如下: <!DOCTYPE html><html>    <head>        <meta charset="utf-8"/>        <title>IE6-IE9中tbody的innerHTML不能复制bug</title>    </head>    <body style=&quo

工作中常用到的JS表单验证代码(包括例子)_表单特效

复制代码 代码如下: ////----------------Author Teng------------- //验证是否为空 function check_blank(obj, obj_name){ if(obj.value != ''){ return true; }else{ alert(obj_name + "所填不能为空!"); obj.value = ""; return false; } } //过滤输入字符的长度 function check_st

JAVASCRIPT IE 与 FF 中兼容写法记录_经验交流

png透明 AlphaImageLoaderfilter:progid:DXImageTransform.Microsoft.AlphaImageLoader(enabled=bEnabled,sizingMethod=sSize,src=sURL) enabled:可选项.布尔值(Boolean).设置或检索滤镜是否激活.true:默认值.滤镜激活.false:滤镜被禁止.sizingMethod:可选项.字符串(String).设置或检索滤镜作用的对象的图片在对象容器边界内的显示方式.cro