zoukankan      html  css  js  c++  java
  • colgroup和col的区别

    转载自:http://blog.csdn.net/carefree31441/article/details/3291397

    colgroup和col一般出现在表格当中
    定义表格单独列的任意属性
    col能覆盖colgroup定义的属性
    具体

    1. <HTML>
    2. <BODY>
    3. <table>
    4. <colgroup span="5" style="color:#666666; >
    5.      <col style="background-color:#FFF">
    6.      <col width="100px">
    7.   <col span="2" width="300px">
    8. </colgroup>
    9. <tbody>
    10.     <tr>
    11.         <td>
    12.            text
    13.         </td>
    14.         <td>
    15.             text
    16.         </td>
    17.         <td>
    18.             text
    19.         </td>
    20.         <td>
    21.             text
    22.         </td>
    23.         <td>
    24.             text
    25.         </td>
    26.     </tr>
    27. </tbody>
    28. </table>
    29. </BODY>
    30. </HTML>

    colgroup 中的 span="1" 是控制style给表格中的前几列(如果后面无col则有效)
    按以上例子 如果没有内部的col 表格的第一列背景为红色
    第一个col定义的也是第一列,按照属性覆盖的原则这个col吧colgroup的背景覆盖了,所以此时效果为白色。
    第二个col定义的则是第二列,定义宽度为100px
    第三个col 的SPAN="2" 则第三个开始两列被定义
    被定义的列为col+col+2col为4列最后一列无定义
    效果图请运行程序

    colgroup 中的 span="1" 是控制style给表格中的前几列(如果后面无col则有效)
    按以上例子 如果没有内部的col 表格的第一列背景为红色
    第一个col定义的也是第一列,按照属性覆盖的原则这个col吧colgroup的背景覆盖了,所以此时效果为白色。
    第二个col定义的则是第二列,定义宽度为100px
    第三个col 的SPAN="2" 则第三个开始两列被定义
    被定义的列为col+col+2col为4列最后一列无定义
    效果图请运行程序

    附录:

    定义

    说明表格中一列或一组列的缺省属性。

    Specifies property defaults for a column or group of columns in a table.

    注释

    嵌套的 COL 属性将覆盖 COLGROUP 属性。

    使用 SPAN 属性可以指定 COLGROUP 定义的表格列数。该属性的缺省值为 1。

    COL 元素可以出现在 COLGROUP 元素之外,这两个元素可用于类似的目的。但是,你必须使用 COLGROUP 元素来决定表格内部分隔线(rules)应该处于的位置。见下面第一个例子。

    若在 COLGROUP 中嵌套了 COL 元素则应该避免在 COLGROUP 中使用 SPAN 标签属性。这是因为属于嵌套的 COL 元素的 SPAN 标签属性将覆盖 COLGROUP 元素中的标签属性。这可能引起代码的混乱及可能并非所愿的结果。参见下面的第二个例子。

    TABLE 对象及其关联元素有一个独立的表格对象模型,该模式使用不同于常规对象模型的方法。要获得关于表格对象模型更多的信息,请参看如何动态生成表格。

    此元素在 Internet Explorer 3.0 及以上版本的 HTML 中可用,在 Internet Explorer 4.0 及以上版本的脚本中可用。

    此元素是块元素。

    此元素需要关闭标签。

  • 相关阅读:
    OneDay!——冲刺日志9(05-06)
    Hail_Hydra2—代码规范
    Hail_Hydra2—凡事预则立
    Alpha冲刺的问题总结
    Hail_Hydra2—冲刺日志集合
    Hail_Hydra2—总结随笔
    Hail_Hydra2—测试随笔
    Hail_Hydra2—冲刺日志(10)
    Hail_Hydra2—冲刺日志(9)
    Hail_Hydra2—冲刺日志(8)
  • 原文地址:https://www.cnblogs.com/jeacy/p/6527696.html
Copyright © 2011-2022 走看看