`

colgroup和col

脚本HTML 
阅读更多
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 及以上版本的脚本中可用。

此元素是块元素。

此元素需要关闭标签
分享到：
| JSON （JavaScript Object Notation）一种 ...
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

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

    利用th、colgroup、col定义表格样式 在HTML中，定义表格样式可以使用多种方式，其中一种方式是使用th、...使用th、colgroup、col元素来定义表格样式可以使我们的表格变得更加美观和灵活，可以提高用户体验和美观性。

    js控制隐藏显示table特定列

    JavaScript 控制隐藏显示 TABLE 特定列 在 HTML 中，我们经常需要控制 TABLE 的显示和隐藏，特别是在数据表格中，需要根据用户...通过使用 Checkbox、COLGROUP 和 COL 元素，我们可以轻松地控制 TABLE 的显示和隐藏。

    bc1998录制的css视频教程推荐新手看下

    代码片段展示了CSS样式表的一部分，它包含了对body、table、thead、th、td等元素的定义，以及使用colgroup和col来设置列的样式。这段代码展示了如何通过CSS来定制表格的背景色、字体大小、颜色、边距和悬停效果，...

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

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

    javascript笔试题目附答案@20081025_jb51.net

    - **选项A** 至 **选项E**: 表格中的 TBODY、CAPTION、COLGROUP 和 COL 等元素都有特定的作用，例如定义表格体、标题、列组和列的样式等。 #### 10. IE 的 window 对象 - **选项A**: `window.opener` 属性指的是...

    js COL能很好的控制表格的列

    例如，`&lt;col&gt;`和`&lt;colgroup&gt;`在Firefox（FF）和Internet Explorer（IE）中的表现可能不同。在本例中，提到“在IE下，明显不如FF下好用”，这可能指的是在IE中应用的样式或效果不如Firefox中理想，可能是由于浏览器...

    FF下 用 col 隐藏表格列的方法详解！

    在讨论如何在Firefox浏览器（以下简称FF）中使用`&lt;col&gt;`标签隐藏表格列的方法之前，需要明确一些基本的HTML和CSS知识。...此外，掌握`colgroup`和`col`标签在表格布局中的应用，对于创建更加结构化的网页布局至关重要。

    列元素所用属性之谜.pdf

    在表格元素中，`&lt;col&gt;` 和 `&lt;colgroup&gt;` 是两个特殊元素，它们用于定义表格中列的样式和行为。然而，关于这两个元素的属性使用存在一定的误解。在 W3C 标准中，`&lt;col&gt;` 元素被称为列元素，它与 `&lt;colgroup&gt;` 一起...

    小书匠语法说明之表格1

    小书匠的增强型表格功能提供了更强大的表格编辑能力，包括行和列的合并、多表头和多表身的支持，以及通过元数据控制开启和关闭增强型表格。这些特性使得用户在编写Markdown文档时，能够更灵活地展示复杂的数据结构。...

    CSS制作好看的表格

    利用`&lt;col&gt;`和`&lt;colgroup&gt;`标签可以对表格中的列进行单独的样式控制，如设置不同的背景色、字体颜色等。 ```html &lt;colgroup&gt; &lt;col style="background-color: #f0f0f0;"&gt; &lt;col style="background-color: #e0e0e0;"&gt;...

    HTML table 直列化格式详解

    同时，通过合理使用`&lt;col&gt;`和`&lt;colgroup&gt;`，可以在不修改表格数据的情况下，实现对整个列或部分列的样式统一设置，提高页面设计的效率。 总之，HTML表格的直列化格式是通过`&lt;colgroup&gt;`和`&lt;col&gt;`标签实现的，它们...

    在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;

    HTML table的使用

    为了使表格更具可读性，可以使用`&lt;caption&gt;`标签添加表格标题，`&lt;colgroup&gt;`和`&lt;col&gt;`用于设置整列的样式，例如宽度。同时，`&lt;tbody&gt;`和`&lt;tfoot&gt;`可以分别用于包裹主体数据和页脚数据。例如： ```html 员工信息表...

    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;

    某马机构----表格.rar

    6. 行和列合并：`&lt;colgroup&gt;`和`&lt;col&gt;`可以用来合并列，`&lt;th&gt;`或`&lt;td&gt;`的`rowspan`和`colspan`属性用于合并行和列。例如： ```html &lt;colgroup&gt; &lt;col span="2"&gt; &lt;/colgroup&gt; 合并两行的表头 ... ``` 7. ...

    table固定行和列

    &lt;col class="fixed-column" /&gt; &lt;!-- 其他列 --&gt; &lt;/colgroup&gt; &lt;!-- ... --&gt; ``` ```css .fixed-column { position: absolute; left: 0; width: 200px; /* 自定义宽度 */ } table { overflow-x: auto...

    CSS+TABLE固定行列表

    对于固定列，可以通过创建一个包含列标题的`&lt;colgroup&gt;`元素，然后在CSS中设置相应的宽度和`position: fixed`。例如： ```html &lt;colgroup&gt; &lt;col style="width: 100px; position: fixed;"&gt; &lt;col&gt; ... &lt;/...

Magicbox
Global site tag (gtag.js) - Google Analytics