TABLE 的 COL 及 COLGROUP 元素

最新推荐文章于 2022-06-10 15:35:35 发布
最新推荐文章于 2022-06-10 15:35:35 发布
阅读量5.6k 收藏 5
点赞数 1
分类专栏： html

IE8(S) Firefox Chrome Safari 不再支持 COL 及 COLGROUP 元素的部分属性及为其设定的 CSS 特性


COLGROUP 元素指定表格中一列或一组列的默认属性。

COL 指定基于列的表格默认属性


<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>table-colgroup</title>
</head>
<body>
	<table border="1" width="2500" height="500">
		<colgroup>
			<col span="2" style="background:pink;">
			<col width="300">
			<col style="color:blue;">
			<col style="width:300px;">
			<col align="left" >
			<col align="center" style="text-decoration:underline;">
			<col align="right" style="font-size:20px;font-family:Courier New">
			<col align="justify" style="cursor:pointer">
			<col valign="top">
			<col valign="middle">
			<col valign="bottom" style="padding:20px;">
			<col valign="baseline" >
		</colgroup>
		<tr>
			<td>span="2"</td>
			<td>span="2"</td>
			<td>width="300"</td>
			<td>color:blue;</td>
			<td>width:300px</td>
			<td>align="left"</td>
			<td>align="center"</td>
			<td>align="right"</td>
			<td>align="justify"</td>
			<td>valign="top"</td>
			<td>valign="middle"</td>
			<td>valign="bottom"</td>
			<td>valign="baseline"</td>
		</tr>
		<tr>
			<td>span="2"</td>
			<td>span="2"</td>
			<td>width="300"</td>
			<td>color:blue;</td>
			<td>width:300px</td>
			<td>align="left"</td>
			<td>align="center"</td>
			<td>align="right"</td>
			<td>align="justify"</td>
			<td>valign="top"</td>
			<td>valign="middle"</td>
			<td>valign="bottom"</td>
			<td>valign="baseline"</td>
		</tr>
	</table>
</body>
</html>


参考：http://www.w3help.org/zh-cn/causes/HE1004


结论如下：


ps：意思就是想整列的定义样式，只有width和background生效了，尽量不用吧。

BossNoNo
关注
  • 1
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
推荐一篇利用th,colgroup,col定义表格样式
10-30
推荐一篇利用th,colgroup,col定义表格样式
IE bug table元素的innerHTML
01-19
首先时飘忽不定的collapse的border，ie6偏偏有一个地方与其他浏览器表现不同，一条丑陋的border不管怎么样都显示... 同样为只读的元素还有COL, COLGROUP, FRAMESET, HTML, STYLE, TABLE, TBODY, TFOOT, THEAD, TITLE, T
table 表格中 colgroup 和 col 标签
King Saj
01-05 7501
<col>标签是给表格中一个或多个列定义属性值，而<colgroup>标签是对表格中的列进行组合，从而实现对表格的格式化。<col>标签一般会放在<colgroup>标签中使用，对<colgroup>标签组合的列分别设置样式。<colgroup>标签也可以有样式属性，是对组合的列设置相同的样式，<colgroup>标签设置的样式会被<col>标签设置的样式覆盖。 格式: <colgroup span=“跨几
table 中的col和colgroup
weixin_30920513的博客
07-12 636
col和colgroup是table中很有用的两个元素，通过设置“ SPAN='X' ”可以用于定义一列或多列的背景色、宽度等（HTML5 中 只是实验了几种，目前判断仅支持背景色和宽度），这样就省去了把css定义到每一个td或th的麻烦。由于其支持的样式有限，写了一个jquery用于复制col中的class到相应的td中，以便用于动态生成内容样式的控制。插件地址：https://github.c...
【html_table基础】使用colgroup col 设置列共同样式
羊羊羊羊羊羊羊的博客
06-10 1231
HTML 有一种方法可以定义整列数据的样式信息：就是 和 元素。它们存在是因为如果你想让一列中的每个数据的样式都一样，那么你就要为每个数据都添加一个样式，这样的做法是令人厌烦和低效的。...
table & colgroup
weixin_30733003的博客
10-31 246
table & colgroup // <caption>版本信息</caption> table = ` <table class="versions-table"> <colgroup> <col width="20%"> ...
html中table里的col标签
数据库天地
05-07 3022
&lt;html&gt; &lt;body&gt; &lt;table border="2"&gt;&lt;col span="2" style="color:red"&gt; &lt;col style="color:blue"&gt; &lt;tr&gt; &lt;td&gt;红色&lt;/td&
表格标签（table）深入了解
01-21
表格标签主要包含的标签有table、caption、th、tr、td、thead、tfoot、tbody、col、colgroup，针对每个的介绍如下： <table>table标签可定义表格。在 <table> 标签内部，你可以放置表格的标题、表格行、表格列、表格...
HTML.zip_Table
09-14
- `<col>`和`<colgroup>`: 用于设置一列或多列的样式，如宽度。 - `<thead>`: 包含表头行`<tr>`，默认居顶显示。 - `<tbody>`: 包含表格的主体部分，即数据行。 - `<tfoot>`: 用于放置表格底部的行，如总计或注释。 ...
html2.rar_Table
09-24
9. `<colgroup>`和`<col>`：用于对表格的一列或多列进行分组，并可以统一设置样式。 10. `scope`属性：在`<th>`中使用，指定表头单元格的作用范围，例如`scope="row"`表示该表头是为其所在行的数据提供标题。 11. ...
html table colgroup,HTML
weixin_39870413的博客
06-10 134
HTML 标签示例通过两个元素，为表格中的三列分别指定不同的对齐方式与样式(注意第一个元素跨越两列)：ISBNTitlePrice3476896My first HTML$53试一个 »定义及用法标签用于对表格中的列进行分组，以便对各个列组进行统一排版。当需要为多列单元格统一应用样式时(比如，前三列所有单元格垂直居中)，标签很有用，这样就不必为各个单元格一个个设置样式了。标签只能在元素内部使用。浏...
html table colgroup,HTML: <colgroup> 标签
weixin_39943383的博客
06-10 168
HTML: 标签HTML 标签用来定义表中的一组列表，以便您可以将格式应用于应用程序或将类添加到组中，而不是每个单独的单元格。此标记通常也称为 元素。在线示例 和 标签为表格中的四个列设置了背景色：示例html>HTML5colgroup标签的使用(基础教程网nhooo.com)ItemQuantityPriceTotalBananas5$12$60测试看看 ‹/›在此...
html table colgroup,HTML <colgroup> 标签 | 菜鸟教程
weixin_36070568的博客
06-10 247
HTML 标签实例 和 标签为表格中的三个列设置了背景色：ISBNTitlePrice3476896My first HTML$53尝试一下 »浏览器支持所有主流浏览器都支持 标签。标签定义及使用说明 标签用于对表格中的列进行组合，以便对其进行格式化。通过使用 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。注释：只能在 元素之内，在任何一个 元素之后，在任何一个...
html table colgroup,HTML的<colgroup>标签
weixin_36009977的博客
06-10 224
HTML 标签所有主流浏览器都支持 标签。 (推荐学习：HTML入门教程)Firefox、Chrome 以及 Safari 仅支持 colgroup 元素的 span 和 width 属性。定义和用法 标签用于对表格中的列进行组合，以便对其进行格式化。如需对全部列应用样式， 标签很有用，这样就不需要对各个单元和各行重复应用样式了。 标签只能在 table 元素中使用。提示提示：请为 标签添加...
colgroup
hhmmss
10-26 136
 &lt;TABLE   border=1   width=90%&gt;         &lt;COLGROUP     bgcolor=red&gt;             &lt;col   style="display:   none"&gt;             &lt;col   bgcolor=green&gt;             &lt;col &gt;       ...
html table colgroup,关于HTML colgroup标签的用法你知道哪些？colgroup用法和col的详细介绍...
weixin_30670123的博客
06-10 2194
html中colgroup是什么意思？HTML colgroup标签的用法你又知道哪些？在这里，本篇文章就为大家介绍了关于HTML colgroup标签的用法详解，还有colgroup和col元素的详细介绍，还不赶紧看过来。关于HTML colgroup标签的定义和用法： 标签用于对表格中的列进行组合，以便对其进行格式化。如需对全部列应用样式， 标签很有用，这样就不需要对各个单元和各行重复应用样式...
表格table列宽度控制<colgroup>
weixin_30753873的博客
04-28 1132
<colgroup> 标签用于对表格中的列进行组合，以便对其进行格式化。 通过使用 <colgroup> 标签，可以向整个列应用样式，而不需要重复为每个单元格或每一行设置样式。 注释：只能在 <table> 元素之内，在任何一个 <caption> 元素之后，在任何一个 <thead>、<tbody>、<tfoo...
【HTML】table 标签的 colgroup 子标签
weixin_33994429的博客
05-06 201
...<table><tr><td><td><td></tr><tr><td><td><td></tr><tr><td><td>&...
table -- colgroup -----XHTML 1.0 Tags 参考之 table
瞌睡い虫虫
11-19 1401
XHTML 1.0 Tags 参考之 table前言之前每次用table做数据表时,为了让某列整列居于何种位置时,都写了一大堆class来达到效果,结果是造成Xhtml代码的臃肿,于是在一次无意中翻东西看到 colgroup 的效果,顿生让俺感动,虽然这个平常不是太常用,但是却被俺忽略,记得俺以前看到table的相关介绍,当时里面就有介绍到colgroup的应用,但却依然没
colgroup用法col详细
最新发布
05-25
`<colgroup>` 和 `<col>` 标签是用于定义表格列的样式和属性。 `<colgroup>` 标签可用于将一组 `<col>` 标签组合在一起，从而为一组表格列定义共同的样式和属性。 下面是一个 `<colgroup>` 和 `<col>` 的例子，其中 `<colgroup>` 定义了一组表格列的背景颜色和宽度： ```html <table> <colgroup> <col style="background-color: #ccc; width: 50px;"> <col style="background-color: #eee; width: 100px;"> <col style="background-color: #ccc; width: 150px;"> </colgroup> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table> ``` 可以看到，`<colgroup>` 标签中包含三个 `<col>` 标签，每个 `<col>` 标签定义了一个表格列的样式和属性。这些 `<col>` 标签的作用是为 `<colgroup>` 标签内的所有表格列定义共同的样式和属性。 `<col>` 标签也可以单独使用，用于为单个表格列定义样式和属性。下面是一个使用单独的 `<col>` 标签的例子，其中 `<col>` 定义了第一列表格的背景颜色和宽度： ```html <table> <col style="background-color: #ccc; width: 50px;"> <tr> <td>Column 1</td> <td>Column 2</td> <td>Column 3</td> </tr> </table> ``` 可以看到，这个例子中只使用了一个 `<col>` 标签，它定义了第一列表格的样式和属性。 总之，`<colgroup>` 和 `<col>` 标签可以用于为表格列定义样式和属性，可以单独使用，也可以组合使用。`<colgroup>` 标签用于将一组 `<col>` 标签组合在一起，为一组表格列定义共同的样式和属性。而 `<col>` 标签则用于为单个表格列定义样式和属性。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值