泰州电脑学习网   网上汇款免手续费, 收货满意后卖家才能拿钱,货款都安全
收藏本站
  当前位置 : 首页 >> 网站建设 >> HTML专栏 >>
新手初学:喜欢网页中应用表格的请进来!
来源:本站 日期:2007-7-8 点击:

你认为已经知道怎么制做表格了吧。当然,你已经了解 table、tr、td和th标签了,甚至还在你的口袋里装入了rowspan和colspan。你确实可以制做一个精美小巧的咖啡色三合板桌子(表格),但难道你不想做一个优雅稳固,上面有玻璃的,足以承受一头大笨象的宴会桌(表格)?

列反罢工

表格行简直使表格列看起来很愚蠢。同样的工作,表格由行与行构建,让列感到十分沮丧。

但是很幸运,colgroup和col标签来拯救热心的列了。

这两个标签允许你定义表格列和尽你所需地样式化它们,对于你需要把列排成行或不同着色特别有用,如果没有它们,你需要样式化每一个单独的单元格。

这是一个使用这些标签的例子:

<tr>
<td>This</td>
<td>That</td>
<td>The other</td>
</tr>
<tr>
<td>Ladybird</td>
<td>Locust</td>
<td>Lunch</td>
</tr>
</table>

alternate类的样式将被应用到第二列,或者说每一行的第二个单元格。

你当然可以在colgroup或者col上使用span属性,跟rowspan和colspan有相似的用途

colgroup一起使用可以定义属于列组的行数,比如<colgroup span="2"></colgroup>会组合头两列。当在colgroup使用span时,不应该再使用col标签。

在col里使用span是更明智的,可以,比如,应用在上述例子像这样:

 ...

这将把alternate类应用到最后两列。

注意

哦,但是可能有一个陷井,不是吗?那就是:你仅能样式化列的是边框、背景、宽度和可见性。

Internet Explorer在这方面看起来比其他浏览器表现更好因为它装载有漂亮的CSS属性比如 color,但是,正如结果一样,这是因为它疯狂古怪的行为而已。这种奇特的异常可以让Ian Hixie来解释。

摘要和说明插曲

一个简要和容易的提高易用性的思考是,总是为表格应用摘要和说明。

摘要可以在表格起始标签table中用summary属性应用到表格中。这不会显示,但可以辅助非可视化的表格表现。

caption标签在起始标签table后直接定义说明。它默认直接在表格顶端出现,但可以在CSS属性caption-side中设置top、right、bottom或者left值,尽管IE不会在意。

<caption>Locust mating habits</caption>
...

表头、表注和滚动表格的探讨

thead、tfoot和tbody允许你把表格分为表头、表注和表格主体。对于大表格尤其有用,在打印的时候,表头和表注应该会在每一页都出现。

这些元素必须按thead-tfoot-tbody的顺序定义,像这样:

<td>Header 2</td>
<td>Header 3</td>
</tr>
</thead>
<tfoot>
<tr>
<td>Footer 1</td>
<td>Footer 2</td>
<td>Footer 3</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>Cell 1</td>
<td>Cell 2</td>
<td>Cell 3</td>
</tr>
 ...
</tbody>
</table>

你可以让表格主体tbody在基于Gecko的浏览器(Mozilla、Firefox和Netscape 6+等)滚动,通过应用overflow: auto; max-height: [whatever] 的样式。然后你可以看见表头和表注固定,而表的主体右边有滚动条。你应该谨慎使用max-height属性因为IE不认识,比较安全的做法是使用height属性,IE将为它应用到每一行。

注意:说回浏览器的差异,目前IE遇到表头和表注时还是没有什么线索,尽管还是当作表格来处理,但打印的时候不会在哦每一页都出现表头和表注,只孤零零地传递滚动的表格。

注意

谨慎对待滚动表格。尽管它们提供十分有用的目的,大部分用户不习惯它们并且认为线性数据是唯一的。


责任编辑:不详

打印本文 关闭本页 返回页首
相关文章
·XHTML+CSS的目的和好处(WEB标准的目的和好处... ·网页制作小技巧
·Robots Meta标签及其用法 ·网页标准建站参考:XHTML 1.0 参考
·网页初学者的参考:HTML标记手册 ·网页制作深入学习之重新认识 button 标签
·HTML中DOCTYPE的定义及用法 ·XHTML1.0中允许使用的所有HTML元素列表
·方法汇总 禁止查看网页源代码全攻略 ·网页代码小技巧
·HTML网页制作基础教程(3):常用标记讲解 ·HTML网页制作基础教程(2):标记的写法
·HTML网页制作基础教程(1):认识HTML ·WHATWG发布HTML5标准草案
·如果你想做Web2.0网站应该注意这些问题 ·通过XHTML校验应该注意的6个细节问题
  热点文章
·键盘操作大全
·如何重装xp系统图解
·神奇地加快XP宽带上...
·如何组装一台电脑
·电脑组装全教程
·五笔字型输入法
·让QQ永久在线——挂...
·bios设置图解教程
  推荐文章
·最新驱动下载
·什么是Google优化
·网站备案绕过手机验证...
·电脑无法启动的特殊故...
·启动“黑屏”故障检修...
·几种主板BIOS报警声音...
·网管维护局域网技巧大...
·网络经典命令行
  相关文章
网站首页 | 关于我们 | 在线学习 | 业务联系 | 版权声明 | 联系方式 | 留言/建议/投诉 | 技术交流
客服邮箱:web@0523pc.com  QQ:43957884
 版权所有、肆意抄袭、模仿必究 泰州电脑© 2004 苏ICP备07003435号