XHTML 1.0 Tags 参考之 table
前言
之前每次用table做数据表时,为了让某列整列居于何种位置时,都写了一大堆class来达到效果,结果是造成Xhtml代码的臃肿,于是在一次无意中翻东西看到 colgroup 的效果,顿生让俺感动,虽然这个平常不是太常用,但是却被俺忽略,记得俺以前看到table的相关介绍,当时里面就有介绍到colgroup的应用,但却依然没把它当回事,匆忙描一眼就过去,没想到这个效果用起来也是那么顺手的... 在此谨记录下 ~.~ 2007.07.18
1.表格列的组合(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 的应用
| 排名 | 公司 | 营收(百万美元) | 利润(亿美元) |
|---|---|---|---|
| 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)的应用
| 排名 | 公司 | 营收(百万美元) | 利润(亿美元) |
|---|---|---|---|
| 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 的应用
| 排名 | 公司 | 营收(百万美元) | 利润(亿美元) |
|---|---|---|---|
| 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 指出从上述字符处偏离多少像素开始对齐。目前没有任何主流浏览器支持这个特性。
Copyright ©2007 爱左看右 all rights reserved
7403
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
