table -- colgroup -----XHTML 1.0 Tags 参考之 table

于 2007-11-19 10:30:00 发布
阅读量1.4k 收藏
点赞数
文章标签： table tags class border xhtml 工具
本文介绍XHTML中table元素的colgroup用法，包括基本应用、配合span使用、结合col元素使用等多种情景，帮助简化表格样式设置。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

XHTML 1.0 Tags 参考之 table

前言

之前每次用table做数据表时,为了让某列整列居于何种位置时,都写了一大堆class来达到效果,结果是造成Xhtml代码的臃肿,于是在一次无意中翻东西看到 colgroup 的效果,顿生让俺感动,虽然这个平常不是太常用,但是却被俺忽略,记得俺以前看到table的相关介绍,当时里面就有介绍到colgroup的应用,但却依然没把它当回事,匆忙描一眼就过去,没想到这个效果用起来也是那么顺手的... 在此谨记录下   ~.~ 2007.07.18

1.表格列的组合(colgroup)的应用


table 元素参考 -- 表格列的组合(colgroup)的应用
排名 公司营收(百万美元)营收(百万美元)
1沃尔玛351,139.011,284.0
2埃克森美孚公司347,254.039,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.011,284.0
2埃克森美孚公司347,254.039,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.011,284.0
2埃克森美孚公司347,254.039,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.011,284.0
2埃克森美孚公司347,254.039,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    指出从上述字符处偏离多少像素开始对齐。目前没有任何主流浏览器支持这个特性。
 
qianhuajuan
关注
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值