中资源
中国设计秀设计资源站
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
广州网站设计 维美网站建设 域名注册 虚拟主机 广州网站建设 广州网页设计 虚拟主机 域名注册 素材下载 广告服务 中国品牌形象设计 网站推广 家具中国
求创科技
中国设计秀
中国福网
金视觉
中国设计秀欢迎你
中国品牌形象设计网
中国设计秀
当前位置:网络学院首页 >> 设计教程 >> Dreamweaver >> Table中的几个不常用的标签和属性值

Table中的几个不常用的标签和属性值

来源:中国设计秀    作者:dodo    点击:228     加入收藏
关键字:标签 Table WEB标准 css
中资源
  今天看了快乐笛子的博客中《Table 的几种呈现方式》一文,作者说到的这几个属性以前都见到过,但在实际中却从来没有留意过这些属性的用处,现在想来,以前的很多关于表格边框的棘手问题如果使用了table的rules和frames属性,问题会变得相当简单。而且自己测了一下,这几个属性在IE/FF等浏览器中都是支持的。
结合笛子的文章和自己以前对表格的使用,总结了以下一些属性。

Table中的几个特殊标记和属性主要包括:

1、caption标记:这个标记是用于设定表格的描述或大标题的。很多时候我们都会用一个占一整行的td来作为描述这个表格【大标题】,但实际上table本身就为表格提供了这个功能标签,就是这个caption,其显示样式默认居中,并显示在表格的头部(可调整valign为bottom使其显示在表格底部)。

如:
<table border="1">
  <caption>这个是表格标题</caption>
  <tr>
    <td>单元格</td>
    <td>单元格</td>
  </tr>
  </table>


另外:caption有一个valign属性,可以通过设置为:top或bottom,使描述出现在表格的顶部或底部。

2、thead、tbody、tfoot标记:这几个html标记看了名字也该明白各自的含义了。
thead:是表格头部,一般可以用于实现表格数据的列标题,如grid的标题行。
tbody:这里就是数据区域了,可以在一个表格中定义多个,用于对数据进行分组。
tfoot:这个是表格的底部区域,一般用于显示表格信息,统计等。如Grid下部的分页信息等。
如:

<table border="1">
  <caption valign="bottom">表格标题</caption>
    <thead>
        <tr>
            <td>表头区</td><td>表头区</td>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr><td>表尾区</td><td>表尾区</td></tr>
    </tfoot>
  </table>


3、th标记:th的使用位置和td一样,用于描述一个单元格,但td(thead的缩写?)代表的一般是标题类型的单元格,用于表格任意的tr中,其默认显示样式为:黑体居中。
如:
<table border="1" width="500">
  <caption>表格标题</caption>
    <thead>
        <tr>
            <th>表头区</th><th>表头区</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>单元格</td>
            <td>单元格</td>
        </tr>
    </tbody>
    <tfoot>
        <tr><td>表尾区</td><td>表尾区</td></tr>
    </tfoot>
</table>


4、frame和rules属性:这两个属性比较特殊,是用于定义表格边框显示方式的。
frame:该属性定义表格最外层表格线的显示方式,有以下可选值:
void:不显示表格外层的边框线。
box:显示四周的边框线
border:和box相同
above:只显示顶部的边框线
below:只显示底部的边框线
lhs:只显示左侧的边框线
rhs:只显示右侧的边框线
hsides:只显示顶部和底部的边框线
vsides:只显示左侧和右侧的边框线

rules:该属性定义单元格边框显示方式,有以下可选值:none:不显示单元格边框
all:显示所有单元格边框线
cols:只显示纵向边框线,及单元格左右侧的边框线。
rows:只显示横向边框线,即单元格上下两侧的边框线。rows和cols在实际中有时是很有用的。
groups:分组显示,只显示thead/tbody/tfoot的边框线。

看这些结识可能有些迷茫,看看效果吧:
table.border =
table.frame=
table.rules=

TableCaption
Weekday Date Manager
Monday 09/11/2000 Kelsey
Tuesday 09/12/2000 Lindsey
Wednesday 09/13/2000 Randy
Thursday 09/14/2000 Susan
Friday 09/15/2000 Randy
Wednesday 09/20/2000 Symphony
Thursday 09/21/2000 Starflower
Friday 09/22/2000 Miko
Saturday 09/23/2000 Cleo
Sunday 09/24/2000 Alyx
Weekday Date Manager
0
顶一下
2008-02-04 17:49:09    出处:中国设计秀cnwebshow.com
关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口