新手初学:喜欢网页中应用表格的请进来!

初学|网页

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

列反罢工

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

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

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

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

<table>
<colgroup> <col /> <col class="alternate" /> <col /> </colgroup>
<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是更明智的,可以,比如,应用在上述例子像这样:

<table>
<colgroup> <col /> <col span="2" class="alternate" /> </colgroup>
 ...

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

注意

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

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

摘要和说明插曲

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

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

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

<table summary="The mating habits of locust, showing how many use protection and how many have a cigarette afterwards">
<caption>Locust mating habits</caption>
...

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

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

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

<table>
<thead>
<tr>
<td>Header 1</td>
<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遇到表头和表注时还是没有什么线索,尽管还是当作表格来处理,但打印的时候不会在哦每一页都出现表头和表注,只孤零零地传递滚动的表格。

注意

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

时间: 2024-11-03 04:49:26

新手初学:喜欢网页中应用表格的请进来!的相关文章

新手问题(在js中实现表格效果)

问题描述 新手问题(在js中实现表格效果) 这种表格在js中用循环怎么实现?在HTML中一行一行的敲很累 解决方案 <script> var data = [ ['星期一上午第1节课', '星期一上午第2节课', '星期一上午第3节课', '星期一上午第4节课', '星期一上午第5节课', '星期一上午第6节课'], [],//星期二的依次类推,下面的也是,注意课程位置,没有放个空字符或者false占位 [], [], [], []]; </script> <table bo

图片-新手求教,网页中的大图轮播(翻书)效果

问题描述 新手求教,网页中的大图轮播(翻书)效果 最好是jquery写的大图轮播效果,但是图片滚动效果是翻书的样子,左翻和右翻都要能实现 解决方案 http://www.jb51.net/article/71301.htm 解决方案二: 苏小喵的有点生硬,要是能想flash那样很自然的翻页就好了

详解用Dreamweaver制作网页中的表格

dreamweaver|网页|详解 表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实

用Dreamweaver制作网页中的表格详解

表格是现代网页制作的一个重要组成部分.表格之所以重要是因为表格可以实现网页的精确排版和定位.虽然现在都提倡WEB标准建立网站,但是有时在网页中还是会应用到表格的. 这个教程我们给大家讲解表格操作的基本方法.在开始制作表格之前,我们首先对表格的各部分的名称做一个介绍.(看下图) 一张表格横向叫行,纵向叫列.行列交叉部分就叫做单元格. 单元格中的内容和边框之间的距离叫边距.单元格和单元格之间的距离叫间距.整张表格的边缘叫做边框. 下面看看我们使用表格制作的页面的实例 这幅页面的排版格式,如果用以前我

关于将WORD内容读到网页中的问题,请帮忙

问题描述 我的WORD文档是图文并茂的文档,我想把文档的内容原封不动的读到网页中的一个tr里,请问高手们能实现么,能否给点代码或者是思想也行啊,谢谢大家了!!! 解决方案 解决方案二:怎么没有人呢解决方案三:顶!!!解决方案四:试试用WordApplication把文档在服务端转换成HTML.然后再显示.直接在网页上显示WORD文档,又不使用WordActivateX.是不可能的.解决方案五:可不可以把WORD里的内容都读成二进制,然后在转换呢,只要能把WORD里的内容包括图片都提取出来就可以,

javascript动态向网页中添加表格实现代码_javascript技巧

//此段代码在IE9.Firefox.Chorme.safair中测试显示没有问题,给该表格添加了一些简单的样式,基本功能可以实现,还有少量问题有待改进! 效果图如下:  以下是代码: 复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <

网页中防止表格被撑破的css代码_应用技巧

按照网上大多数文章的说法,只要在CSS中加入:  代码  table {  table-layout:fixed;  word-break:break-all;  word-wrap:break-word;  }  div {  word-break:break-all;  word-wrap:break-word;  }  就可以解决表格和层被撑破,最初我也是这样做的.不过这样的代码会造成一个问题,你会发现英文词全部被截断了,这不符合英语的书写习惯也不利于阅读.  后来我发现上述代码改写一下就

求教如何通过python抓取网页中表格信息

问题描述 求教如何通过python抓取网页中表格信息 刚刚开始学习python 不清楚如何通过python抓取网页中的表格信息 比如给定一个student.html 里面有学号.姓名.性别等信息 怎么样写才能够输入学号 读出其他信息? 解决方案 用正则表达式,表格数据放在table->tr->td中 解决方案二: 输入学号然后服务器在给你其他数据,应该是一个post的过程-你可以抓包看一下整个过程-至于提取特定的信息,你可以先看下整个表格的结构,再有针对性的写个正则表达式来提取出信息- 解决方

Excel2013如何导入网页上的表格?

  Excel2013如何导入网页上的表格? 1.首先打开Excel2013,新建一张空白工作表,选中A1单元格,然后切换到"数据"选项卡,单击"获取外部数据"组中的"自网站"按钮. Excel2013 Excel2013 2.此时会弹出一个"新建Web查询"窗口,我们将之前网页的网址复制,然后粘贴到窗口的"地址"栏中,并单击"转到"按钮. 3.我们单击"外币小额存款利率表&q