table -- colgroup -----XHTML 1.0 Tags 参考之 table
来源:互联网 发布:网络云端 编辑:程序博客网 时间:2024/05/18 00:46
XHTML 1.0 Tags 参考之 table
前言
之前每次用table做数据表时,为了让某列整列居于何种位置时,都写了一大堆class来达到效果,结果是造成Xhtml代码的臃肿,于是在一次无意中翻东西看到 colgroup 的效果,顿生让俺感动,虽然这个平常不是太常用,但是却被俺忽略,记得俺以前看到table的相关介绍,当时里面就有介绍到colgroup的应用,但却依然没把它当回事,匆忙描一眼就过去,没想到这个效果用起来也是那么顺手的... 在此谨记录下 ~.~ 2007.07.18
1.表格列的组合(colgroup)的应用
table 元素参考 -- 表格列的组合(colgroup)的应用
排名 公司 营收(百万美元) 营收(百万美元) 1沃尔玛351,139.011,284.02埃克森美孚公司347,254.039,500.03通用汽车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.011,284.02埃克森美孚公司347,254.039,500.03通用汽车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.011,284.02埃克森美孚公司347,254.039,500.03通用汽车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.011,284.02埃克森美孚公司347,254.039,500.03通用汽车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
- table -- colgroup -----XHTML 1.0 Tags 参考之 table
- XHTML 1.0 Tags 参考
- table隐藏列与colgroup标签
- TABLE 的 COL 及 COLGROUP 元素
- Table HTML Tags from
- 表格(TABLE)标记(TAGS)
- 表格(TABLE)标记(TAGS)
- 表格(TABLE)标记(TAGS)
- 表格(TABLE)标记(TAGS)
- <html>table、tr/td、thead、tbody、tfoot、col、colgroup
- HTML-表格(TABLE)标记(TAGS)
- XHTML Tags
- HTML--表格(TABLE)标记(TAGS)
- div+css - XHTML标准 - 5.6. Table Modules - Table模块
- html标签的表格的tbody、tfoot、thead、colgroup、th、tr、td、table
- XHTML 1.0 中文参考
- TABLE
- table
- Linux改变文件或目录的访问权限命令
- 异步编程(1)
- C++中最全的图像显示及处理类CxImage
- 泛型
- Delphi中分隔字符串函数的使用
- table -- colgroup -----XHTML 1.0 Tags 参考之 table
- C++学习要点
- 硅谷新生代 可怕的美国
- 注册框验证的问题(JSP)
- CLR基础
- VC中OnPaint()的工作原理
- UML TOOLS COMPARE
- C++堆、栈、自由存储区、全局/静态存储区和常量存储区
- 《Eclipse从入门到精通》中软件的下载地址