html中的<col>标签与<colgroup>标签的区别_随笔

colgroup、col 标签用来定义表格列的分组。

如果一个表格前三列要垂直居上，后两列垂直居下，我们就可以用分组来进行设置。看起来是样式表可以代替的功能，但这的确不是多余的标签，和前面的标签一样，在 XHTML 1.0 Strict 中也是允许的标签。

<tr>

</tr>

</table>

span 用以表示该组包含多少列。

col 的作用是细化 colgroup，因为即使在一个组中，列与列之间也可能会出现一些差别，这时就得用到 col 了。

</colgroup>

可以看到第三列的 valign 覆盖了 colgroup 的 valign 设置。在这里 width、align、valign 都是符合 XHTML 1.0 Strict 的，不过要注意的是：没有 height 属性。

扩展资料

一、html

它其实是文本，它需要浏览器的解释，它的编辑器大体可以分为三种，

1、基本文本、文档编辑软件，使用微软自带的记事本或写字板都可以编写，当然，如果你用WPS来编写，也可以。不过存盘时请使用.htm或.html作为扩展名，这样就方便浏览器认出直接解释执行了。

2、半所见即所得软件，

如：FCK-Editer、E-webediter等在线网页编辑器；

尤其推荐：Sublime Text代码编辑器（由Jon Skinner开发，Sublime Text 2收费但可以无限期试用）。

3、所见即所得软件，使用最广泛的编辑器，完全可以一点不懂HTML的知识就可以做出网页，如：

AMAYA（出品单位：万维网联盟）；

FRONTPAGE（出品单位：微软）；

Dreamweaver（出品单位：Adobe）。

4、所见即所得软件与半所见即所得的软件相比，开发速度更快，效率更高，且直观的表现更强。任何地方进行修改只需要刷新即可显示。缺点是生成的代码结构复杂，不利于大型网站的多人协作和精准定位等高级功能的实现。

二、<col>

HTML<col>标签规定了<colgroup>元素内部的每一列的列属性。

通过使用 <col>标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。

<col>标签为表格中一个或多个列定义属性值。

如需对全部列应用样式，<col>标签很有用，这样就不需要对各个单元和各行重复应用样式了。

您只能在 table 或 colgroup 元素中使用 <col>标签。

提示和注释

提示1：请为 <col>标签添加 class 属性。这样就可以使用 CSS 来负责对齐方式、宽度和颜色等等。

提示2：如果您希望在 colgroup 内部为每个列规定不同的属性值时，请使用此元素。如果没有 col 元素，列会从 colgroup 那里继承所有的属性值。

注释：col 元素是仅包含属性的空元素。如需创建列，您就必须在 tr 元素内部规定 td 元素。

参考资料来源：百度百科：html

百度百科：<col>

1、首先我们打开我们的myeclipse获取idea这样的编辑器，然后在编辑器中写一个table标签，这里注意给出table的值。

2、然后我们可以在页面中看到此时展示的是没有样式的table样板，此时所有的数据没有经过渲染，比较紧凑，也不是一个页面展示。

3、在table中引入样式标签style来设计table的样式，代码为style="width: 100%max-width: 100%margin-bottom: 20px"表示占用屏幕宽度的100%。

4、设置了屏幕展示table宽度后我们可以看到此时展示的样式如下，样式中数据已经充分展开。

5、使用jquery ,在jquery中首先给table一个class属性，然后在JavaScript中通过.class属性获取这个table,然后给出样式设计。

6、根据上面的设计我们再经过背景、宽度、高度的设计我们可以设计出一个比较好看的table。

欢迎分享，转载请注明来源：内存溢出

html中的<col>标签与<colgroup>标签的区别