虽然现在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