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

此元素是块元素。

此元素需要关闭标签。

colgroup和col的区别的更多相关文章

  1. 使用 colgroup 和 col 实现响应式表格

    Table 在项目使用中十分频繁,特别是在后台管理系统中,table 无疑是数据展示的第一公民,在早些年的网页中,table 也是网页布局的第一选择,然后使用好 table 并不容易,其它有很多子元素 ...

  2. colgroup中col定义表格单元格宽度

    colgroup中可以使用col来定义表格单元格宽度,可以使用像素(数字),百分比,我们来具体看看有什么不同. 先看一个最基本的:用像素(数字)表示,因为table有个宽度,这里表示占比 <ht ...

  3. MySQL中count(1),count(*),count(col)的区别

    count(*)返回行数的时候不管列中的值是不是null,在MyISAM表中,count(*)被优化,因为在MyISAM表中,行数被额外存储了,所以会很快,但是这个时候不能有where条件.innod ...

  4. count(1), count(*), count(col) 的区别

    1.count(1)和count(*)都是统计表的总行数,两者执行结果相同.表没有主键或者唯一键索引时,两者都进行全表扫描:表上主键或者唯一键索引时,使用主键或者唯一键索引. 2.count(col) ...

  5. 表格table列宽度控制<colgroup>

    <colgroup> 标签用于对表格中的列进行组合,以便对其进行格式化. 通过使用 <colgroup> 标签,可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式. ...

  6. MySQL COUNT(*) & COUNT(1) & COUNT(col) 比较分析

    在面试的时候我们会经常遇到这个问题: MySQL 中,COUNT(*).COUNT(1).COUNT(col) 有区别吗? 有区别. 接下来我们分析一下这三者有什么样的区别. 一.SQL Syntax ...

  7. HTML学习笔记Day6

    一.元素类型 1.元素类型分类依据和元素类型分类 根据css显示分类,XHTML元素被分为三种类型:块状元素.内联元素.行内块元素.可变元素 2.块状元素 1)块状元素在网页中就是以块的形式显示,所谓 ...

  8. web前端整套面试题(一)--js相关

    一.单选 1.以下哪条语句会产生运行:(A) A.var obj = ( ); B.var obj = [ ]; C.var obj = { }; D.var obj = / /; B代表数组,C代表 ...

  9. HTML表格属性及简单实例

    这里主要总结记录下表格的一些属性和简单的样式,方便以后不时之需. 1.<table> 用来定义HTML的表格,具有本地属性 border 表示边框,border属性的值必须为1或空字符串( ...

随机推荐

  1. [转载]css3的一个控制背景的属性,background-size可以缩放大小啦

    background-size需要两个值,它的类型可以是像素(px).百分比(%)或是auto,还可以是cover和contain.第一个值为背景图的width,另外一个值用于指定背景图上的heigh ...

  2. Kattis之旅——Prime Reduction

    A prime number p≥2 is an integer which is evenly divisible by only two integers: 1 and p. A composit ...

  3. python之块包导入

    一.模块 1.什么是模块 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用python编写 ...

  4. 嵌入式 Linux 对内存的直接读写(devmem)

    https://blog.csdn.net/xy010902100449/article/details/47028497[摘要] 在Linux开发中着实用到的调试工具并不是很多.devmem的方式是 ...

  5. Error: php71w-common conflicts with php-common-5.4.16-46.el7.x86_64

    Centos7.3 阿里云主机 安装zabbix报错 问题: [root@lvhanzhi code]# yum install -y zabbix-web-mysql zabbix-agent ma ...

  6. Python3 tkinter基础 grid(row,column) 窗体的布局

             Python : 3.7.0          OS : Ubuntu 18.04.1 LTS         IDE : PyCharm 2018.2.4       Conda ...

  7. Git冲突与解决方法【转】

    本文转载自:https://www.cnblogs.com/gavincoder/p/9071959.html Git冲突与解决方法 1.git冲突的场景 情景一:多个分支代码合并到一个分支时: 情景 ...

  8. 从0开始安装fedora23的笔记-- 以及使用fedora的常规问题-3

    关于sys的目录有: /etc/sys/, 和 /proc/sys fedora的桌面背景图片默认的在: /usr/share/backgrounds/, 里面有f23, gnome, images等 ...

  9. 【做题】CF239E. k-d-sequence——线段树

    首先,容易得到判断一个子串为"good k-d sequence"的方法: 子串中没有重复元素,且所有元素模d相等. 记mx为除以d的最大值,mn为除以d的最小值,则\(mx-mn ...

  10. 给斐讯K1刷机并拨号e信(湖北地区测试无问题)

    ◆购买斐讯k1路由器 路由器在天猫京东斐讯旗舰店都有售卖,我买的价格是159,不过有一张铃铛卡,一个月之后返还160元,相当于0元购 ◆路由器刷不死Breed 1.路由与电脑有线连接好,输入192.1 ...