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

1.frame属性:

frame="border" 普通边框:

第一单元格第二单元格
第三单元格第四单元格

frame="box" 区块:

第一单元格第二单元格
第三单元格第四单元格

frame="void" 无边框:

第一单元格第二单元格
第三单元格第四单元格

frame="above" 仅上边框:

第一单元格第二单元格
第三单元格第四单元格

frame="below" 仅下边框:

第一单元格第二单元格
第三单元格第四单元格

frame="hsides" 仅横向边框:

第一单元格第二单元格
第三单元格第四单元格

frame="vsides" 仅纵向边框:

第一单元格第二单元格
第三单元格第四单元格

frame="lhs" 仅左边框:

第一单元格第二单元格
第三单元格第四单元格

frame="rhs" 仅右边框:

第一单元格第二单元格
第三单元格第四单元格

 

framevoid
above
below
hsides
lhs
rhs
vsides
box
border
Specifies how the outer borders should be displayed.
指定向外的边框应该如何显示

Note: Must be used in conjunction with the "border" attribute!
注意:必须结合"border"属性一起使用

STF
rulesnone
groups
rows
cols
all
Specifies the horizontal/vertical divider lines.
指定水平/垂直分隔线

Note: Must be used in conjunction with the "border" attribute!
注意:必须结合"border"属性一起使用

STF

2.rules属性:

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

 

3.caption标记:

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

如:

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


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

4.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>


 

  • 1
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值