`

colgroup和col

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

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

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 及以上版本的脚本中可用。

此元素是块元素。

此元素需要关闭标签
分享到:
评论

相关推荐

    推荐一篇利用th,colgroup,col定义表格样式

    推荐一篇利用th,colgroup,col定义表格样式

    layui表格内容溢出的解决方法

    引言,我做文章管理的时候,引入的是layui的表格样式,但是里面的内容溢出... &lt;colgroup&gt; &lt;col width=100&gt; &lt;col width=150&gt; &lt;col&gt; &lt;/colgroup&gt; 序号 文章标题 文章内容 发布时间 发布人 操作 &lt;/t

    在Z-Blog中运行代码[html][/html](纯JS版)

    昨天的《利用th,colgroup,col定义表格样式》中,细心点的朋友会发现加了一个“运行代码”的链接:直接点击可以运行Textarea中的内容。其实本身蓝色理想、51JS上也有相关介绍,Z-Blog官方论坛上也有类似帖子,因为...

    jQuery实现动态给table赋值的方法示例

    本文实例讲述了jQuery实现动态给table赋值的方法。分享给大家供大家参考,具体如下: ... &lt;colgroup&gt; &lt;col width=150&gt; &lt;col width=200&gt; &lt;col&gt; &lt;/colgroup&gt; 昵称 加入时间 签名 &lt;/thead&gt;

    CSS 网页布局 表格制作实例

    相反,该用TABLE的地方是提倡使用TABLE的。 例如下面的的布局,你需要用几个DIV来浮动?... &lt;col u00a0class=col1&gt; &lt;col u00a0class=col2&gt; &lt;col u00a0class=col3&gt; &lt;/colgroup&gt; 游客类别&lt;/th&gt;

    TinyButStrong模板引擎 3.10.1.zip

    增强功能:增强参数“平行= TBS:表”现在支持,,&lt;COLGROUP&gt;和&lt;COL&gt;。在&lt;COL&gt;标签必须关闭,即使HTML实际上允许未关闭的标签。通过参数“ATT”当一组其他字段,字段的增强更好地管理移动。参数“ATT”可以使TBS领域...

    三联打印样式图

    &lt;colgroup&gt; &lt;col style="width: 80px;" /&gt; &lt;col /&gt; &lt;/colgroup&gt; ,font-size:18px" &gt; ,font-size:18px" &gt;送 货 单 ,font-size:18px"&gt; ...

    HTML开发王

    9.6 表格的按列分组显示(colgroup元素、col元素) 9.6.1 创建列分组(colgroup元素) 9.6.2 使用span属性指定列分组 9.6.3 为列分组定义列宽(width属性) 9.7 表格边框和分隔线的呈现(frame属性、rules属性) 9.7.1 表格...

    HTML5标签大全

    不允许写结束标记的标签:area(定义图像映射中的区域)、base(为页面上的所有链接规定默认地址或默认目标)、br、col(为表格中一个或多个列定义属性值)、embed(定义嵌入的内容,比如插件–5)、hr、img、input、keygen...

    IE bug table元素的innerHTML

    首先时飘忽不定的collapse的border,ie6偏偏有一个地方与其他浏览器表现不同,一条丑陋的border不管怎么样都显示... 同样为只读的元素还有COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, T

    HTML5标签小集

    HTML标签; &lt;meta&gt;属性Content,name,scheme &lt;!DOCTYPE&gt; 属性coords,shape, 属性 属性 &lt;area&gt;属性 属性 属性 &lt;...&lt;col&gt;属性 &lt;colgroup&gt; &lt;command&gt; &lt;datalist&gt; &lt;d

    表格标签(table)深入了解

    表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup,针对每个的介绍如下: &lt;table&gt;table标签可定义表格。在 &lt;table&gt; 标签内部,你可以放置表格的标题、表格行、表格列、表格...

    object_dom:HTML对象声明性Dom

    表,thead,tfoot,tbody,th,tr,td,col,colgroup,标题 html,头,正文,脚本,样式,链接,元,标题 可用班级 按钮,中断,自定义 跨度,段落 粗体,强壮,斜体,强调 标记,较小,已删除,已插入 下标,上标...

    HTML减肥 精简HTML标记制作网页

    HTML 4 HTML (非XHTML),MIME type ...&lt;/area&gt; &lt;/base&gt; &lt;...&lt;/col&gt; &lt;/colgroup&gt; &lt;head&gt; &lt;/head&gt; &lt;html&gt; &lt;/html&gt; &lt;/input&gt; &lt;/link&gt; &lt;/meta&gt; &lt;/

    Html5中文手册(程序员必备手册)

    20、&lt;colgroup&gt; 定义表格列的分组。 21、&lt;command&gt; 定义命令按钮。 22、&lt;datalist&gt; 定义下拉列表。 23、&lt;dd&gt; 定义定义的描述。 24、&lt;del&gt; 定义删除文本。 25、&lt;details&gt; 定义元素的细节。 声明:本电子书内容源于...

    浮点vfdsfJAVA实现链表,双向链表.txtJAVA实现链表,双向链表.txt

    &lt;colgroup&gt;&lt;col width="110" /&gt;&lt;col /&gt;&lt;/colgroup&gt; &lt;th&gt;&nbsp; &lt;dt&gt;&lt;a href="javascript:void(0);" class="btn files"&gt; ();" /&gt; (未选择文件) ...

Global site tag (gtag.js) - Google Analytics