前言
之前每次用table做数据表时,为了让某列整列居于何种位置时,都写了一大堆class来达到效果,结果是造成Xhtml代码的臃肿,于是在一次无意中翻东西看到 colgroup 的效果,顿生让俺感动,虽然这个平常不是太常用,但是却被俺忽略,记得俺以前看到table的相关介绍,当时里面就有介绍到colgroup的应用,但却依然没把它当回事,匆忙描一眼就过去,没想到这个效果用起来也是那么顺手的... 在此谨记录下 ~.~ 2007.07.18
1.表格列的组合(colgroup)的应用
table 元素参考 -- 表格列的组合(colgroup)的应用
| 排名
| 公司 |
营收(百万美元) |
利润(亿美元) |
| 1 |
沃尔玛 |
351,139.0 |
11,284.0 |
| 2 |
埃克森美孚公司 |
347,254.0 |
39,500.0 |
| 3 |
通用汽车 |
207,349.0 |
-1,978.0 |
<style type="text/css">
<!--
table { border: 0; margin: 0; padding: 0; border-collapse : collapse; }
.data { color: #000; margin: 0 auto; }
.data td,.data th{ border: 1px solid #000; padding: 5px 20px;}
caption { font-weight:bold; color:#000; }
.data .one_col { background:#f2eada; text-align: center; }
.data .two_col { background:#f47920; text-align: center; }
.data .three_col { background: #00ae9d; text-align: center; }
.data .four_col { color: #ffd400; background: #ed1941; text-align: center; }
-->
</style>
<table class="data" summary="摘要说明summary.摘要是不会显示出来的,通常是给一些其它的工具使用的,比如盲人阅读器等..">
<caption>table 元素参考 -- 表格列的组合(colgroup)的应用</caption>
<colgroup class="one_col"></colgroup>
<colgroup class="two_col"></colgroup>
<colgroup class="three_col"></colgroup>
<colgroup class="four_col"></colgroup>
<tr>
<th>排名</td>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃尔玛</td>
<td>351,139.0</td>
<td>11,284.0</td>
<tr>
<td>2</td>
<td>埃克森美孚公司</td>
<td>347,254.0</td>
<td>39,500.0</td>
</tr>
<tr>
<td>3</td>
<td>通用汽车</td>
<td>207,349.0</td>
<td>-1,978.0</td>
</tr>
</table>
2.表格列的组合(colgroup) 配合 span 的应用
table 元素参考 -- 表格列的组合(colgroup) 配合 span 的应用
| 排名
| 公司 |
营收(百万美元) |
利润(亿美元) |
| 1 |
沃尔玛 |
351,139.0 |
11,284.0 |
| 2 |
埃克森美孚公司 |
347,254.0 |
39,500.0 |
| 3 |
通用汽车 |
207,349.0 |
-1,978.0 |
<style type="text/css">
<!--
table { border: 0; margin: 0; padding: 0; border-collapse : collapse; }
.data { color: #000; margin: 0 auto; }
.data td,.data th{ border: 1px solid #000; padding: 5px 20px;}
caption { font-weight:bold; color:#000; }
.data .one_col { background:#f2eada; text-align: center; }
.data .two_col { background:#f47920; text-align: center; }
-->
</style>
<table class="data" summary="摘要说明summary.摘要是不会显示出来的,通常是给一些其它的工具使用的,比如盲人阅读器等..">
<caption>table 元素参考 -- 表格列的组合(colgroup)的应用</caption>
<colgroup class="one_col"></colgroup>
<colgroup class="two_col" span="2" ></colgroup> <!-- span="2" 相邻2列应用 类two_col -->
<tr>
<th>排名</td>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃尔玛</td>
<td>351,139.0</td>
<td>11,284.0</td>
<tr>
<td>2</td>
<td>埃克森美孚公司</td>
<td>347,254.0</td>
<td>39,500.0</td>
</tr>
<tr>
<td>3</td>
<td>通用汽车</td>
<td>207,349.0</td>
<td>-1,978.0</td>
</tr>
</table>
3.表格列的组合(colgroup)配合表格列(col)的应用
table 元素参考 -- 表格列的组合(colgroup)配合表格列(col)的应用
| 排名
| 公司 |
营收(百万美元) |
利润(亿美元) |
| 1 |
沃尔玛 |
351,139.0 |
11,284.0 |
| 2 |
埃克森美孚公司 |
347,254.0 |
39,500.0 |
| 3 |
通用汽车 |
207,349.0 |
-1,978.0 |
<style type="text/css">
<!--
table { border: 0; margin: 0; padding: 0; border-collapse : collapse; }
.data2 { color: #000; margin: 0 auto; }
.data2 td,.data2 th{ border: 1px solid #000; padding: 5px 20px;}
caption { font-weight:bold; color:#000; }
.data2 .one_col { background:#f2eada; text-align: center; }
.data2 .two_col { background:#f47920; text-align: center; }
.data2 .three_col { background: #00ae9d; text-align: center; }
.data2 .four_col { color: #ffd400; background: #ed1941; text-align: center; }
-->
</style>
<table class="data2" summary="摘要说明summary.摘要是不会显示出来的,通常是给一些其它的工具使用的,比如盲人阅读器等..">
<caption>table 元素参考 -- 表格列的组合(colgroup)的应用</caption>
<colgroup class="one_col"></colgroup>
<colgroup class="one_col"></colgroup>
<!-- colgroup 配合 col 应用 -->
<colgroup>
<col class="two_col"></col>
<col class="three_col"></col>
<col class="four_col"></col>
</colgroup>
<tr>
<th>排名</td>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃尔玛</td>
<td>351,139.0</td>
<td>11,284.0</td>
<tr>
<td>2</td>
<td>埃克森美孚公司</td>
<td>347,254.0</td>
<td>39,500.0</td>
</tr>
<tr>
<td>3</td>
<td>通用汽车</td>
<td>207,349.0</td>
<td>-1,978.0</td>
</tr>
</table>
4.表格列的组合(colgroup) 配合 span 及 col 的应用
table 元素参考 -- 表格列的组合(colgroup) 配合 span 及 col 的应用
| 排名
| 公司 |
营收(百万美元) |
利润(亿美元) |
| 1 |
沃尔玛 |
351,139.0 |
11,284.0 |
| 2 |
埃克森美孚公司 |
347,254.0 |
39,500.0 |
| 3 |
通用汽车 |
207,349.0 |
-1,978.0 |
<style type="text/css">
<!--
table { border: 0; margin: 0; padding: 0; border-collapse : collapse; }
.data { color: #000; margin: 0 auto; }
.data td,.data th{ border: 1px solid #000; padding: 5px 20px;}
caption { font-weight:bold; color:#000; }
.data .one_col { background:#f2eada; text-align: center; }
.data .two_col { background:#f47920; text-align: center; }
-->
</style>
<table class="data" summary="摘要说明summary.摘要是不会显示出来的,通常是给一些其它的工具使用的,比如盲人阅读器等..">
<caption>table 元素参考 -- 表格列的组合(colgroup)的应用</caption>
<colgroup class="one_col"></colgroup>
<colgroup class="two_col" >
<col class="two_col" span="2" ></col> <!-- 2,3列应用.two_col,于是.three_col就应用到第4列之上 -->
<col class="three_col" ></col>
</colgroup>
<tr>
<th>排名</td>
<th>公司</th>
<th>营收(百万美元)</th>
<th>利润(亿美元)</th>
</tr>
<tr>
<td>1</td>
<td>沃尔玛</td>
<td>351,139.0</td>
<td>11,284.0</td>
<tr>
<td>2</td>
<td>埃克森美孚公司</td>
<td>347,254.0</td>
<td>39,500.0</td>
</tr>
<tr>
<td>3</td>
<td>通用汽车</td>
<td>207,349.0</td>
<td>-1,978.0</td>
</tr>
</table>
语义:
表格列的组合。用来给表格的某些列应用特定的属性。一般和col一起使用。
结构:
此元素只能放置在table中，和tr为兄弟节点并放在所有的tr之前。
可选属性:
span 指出此“列组”表示几个列。
align 此“列组”内的单元格内容的水平对齐方式。它的值可以是left，center，right，justify或char。
valign 此“列组”内的单元格内容的垂直对齐方式。它的值可以是top，middle，bottom或baseline。
char 指定一个字符，单元格内容将按这个字符对齐，比如“小数点”。目前没有任何主流浏览器支持这个特性。
charoff 指出从上述字符处偏离多少像素开始对齐。目前没有任何主流浏览器支持这个特性。