博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
colgroup和col的区别
阅读量:7086 次
发布时间:2019-06-28

本文共 1443 字,大约阅读时间需要 4 分钟。

转载自:

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

此元素是块元素。

此元素需要关闭标签。

 

转载于:https://www.cnblogs.com/jeacy/p/6527696.html

你可能感兴趣的文章
linux下的apache配置
查看>>
app测试和web端测试的区别
查看>>
一瓶汽水1元,两瓶汽水可换一瓶,现有20元,最多可喝多少瓶汽水
查看>>
图文教程自动登录expect脚本实例
查看>>
2019 第四周 开发笔记
查看>>
CORBA分布式实现
查看>>
第五天的学习
查看>>
微信小程序小技巧系列《二》show内容展示,上传文件编码问题
查看>>
Rancher Kubernetes Engine(RKE)正式发布:闪电般的Kubernetes安
查看>>
$.get()请求返回一个html页面,获取该页面特定id的元素
查看>>
Linux中的加解密实现
查看>>
Java开发GUI之CardLayout卡片布局
查看>>
将自己本地的项目托管到github上
查看>>
yum仓库搭建
查看>>
this怎么用(基础)
查看>>
安装server2008后,提示“Windows无法验证此文件的数字签名”
查看>>
一个中文空格引起的bug
查看>>
vmware用U盘安装win10
查看>>
CSS3内容溢出详解
查看>>
SEO人员如何做内容链接?
查看>>