睿美印象网络欢迎您的到来,并真诚的希望能与您合作!
睿美印象网络
返回上一页
客服QQ
点击这里给我发消息
客服QQ
点击这里给我发消息
一切从沟通开始……

colgroup、col——几乎被遗忘的标签

作者:睿美印象网站建设工作室  发布日期:2012-10-14
  虽然现在web2.0标准不提倡用table布局,但是很多时候我们在输出数据的时候,还会选择表格,实现起来简单,看起来简洁。但是很多时候我们想个性化表格样式的时候,却发现比较繁琐。colgroup、col这两个几乎被遗忘的标签能帮上不少忙。
利用<colgroup>标签可以把表格按列划分为若干组,每组可包含一列或几列,然后可以对各组分别设置格式。通常一个列组的各列格式是相同的,如果列与列有差异,可通过在组内加入<col>标签进行设置。
功能:colgroup标签用于对表格按列分组。
语法:<colgroup>...</colgroup>
属性: align,设置组内单元格文本水平对齐方式。值:left、right、center、justify。
            valign,设置组内单元格文本水平对齐方式。值:top、middle、bottom、baseline。
            span,设置包含的列数。值:数字。
            width,设置列组合的宽度。值:长度值或者百分比。
功能:col标签用于对表格中的列定义属性。
语法:<col />
属性同上
利用<col>标签是以列为单位设置属性,它可以把一列或几列设置成相同的风格。
<col>标签只能在<table>标签和<colgroup>标签中使用。
从效果上看,<col>标签和<colgroup>标签的功能实际上是几乎相同的。
实例一:按列格式化表格。
 HTML代码

  
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

说明:两个<colgroup>标签把表格按列分为两组,其中第二组占两列,每个列组设置了不同的样式。
实例二:只有表头横线和列线的表格。
 HTML代码

  
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

说明:<thead>和<tbody>标签把表格按行分为两组,三个<colgroup>标签把表格按列分为三组,<table>标签的属性rules="groups"表示只显示组与组间的分界线,属性frame="hsides"表示只显示上下边框。
实例三 有外框线和列线的表格。
 HTML代码

  
[Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

说明:<thead>和<tbody>标签把表格按行分为两组,两个<colgroup>标签把表格按列分为两组,其中第二组占两列,<table>标签的属性rules="groups"表示只显示组与组间的分界线,属性frame="box"表示显示外边框。


转载请注明:睿美印象网站建设工作室www.ruimeiyx.com
分享到:
已有 0 条评论
暂无评论
睿美印象在线客服
客服部小睿:
点击这里给我发消息
设计部小美:
点击这里给我发消息
技术海绵哥:
点击这里给我发消息
在线淘客服:
睿美印象网络
淘客服小睿:
睿美印象小睿
淘客服小美:
睿美印象小美