HTML <colgroup> 标签 的详细用法

colgroup 标签的功能

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

colgroup 标签的用法

<colgroup> 和 <col> 标签为表格中的三个列设置了背景色:

&lt;table border=&quot;1&quot;&gt;
  &lt;colgroup&gt;
    &lt;col span=&quot;2&quot; style=&quot;background-color:red&quot;&gt;
    &lt;col style=&quot;background-color:yellow&quot;&gt;
  &lt;/colgroup&gt;
  &lt;tr&gt;
    &lt;th&gt;网站&lt;/th&gt;
    &lt;th&gt;网址&lt;/th&gt;
    &lt;th&gt;评分&lt;/th&gt;
  &lt;/tr&gt;
  &lt;tr&gt;
    &lt;td&gt;阿西河前端教程&lt;/td&gt;
    &lt;td&gt;www.axihe.com&lt;/td&gt;
    &lt;td&gt;100分&lt;/td&gt;
  &lt;/tr&gt;
&lt;/table&gt;

colgroup 标签的演示

注意:如果您对tr做了background-color设置,会导致 col 的设置失效

<style>
article table tr:nth-child(even){
background-color:transparent;
}
</style>

<colgroup> <col span="2" style="background-color:red"> <col style="background-color:yellow"> </colgroup> 网站 网址 评分
阿西河前端教程 www.axihe.com 100分

浏览器支持

所有主流浏览器都支持 <colgroup> 标签。


注意事项

  • 只能在 &lt;table&gt; 元素之内,在任何一个 &lt;caption&gt; 元素之后,在任何一个 &lt;thead&gt;&lt;tbody&gt;&lt;tfoot&gt;&lt;tr&gt; 元素之前使用 &lt;colgroup&gt; 标签。

  • 如果想对 <colgroup> 中的某列定义不同的属性,请在 <colgroup> 标签内使用 <col> 标签。

  • css 设置的背景色会覆盖当前设置


HTML4 与 HTML5 的用法差异

HTML5 中不再支持 HTML4 中的大部分属性。


属性

属性 描述
align left
right
center
justify
char
HTML5 不支持。规定在列组合中内容的水平对齐方式。 char character HTML5 不支持。规定根据哪个字符来对齐列组中的内容。 charoff number HTML5 不支持。规定第一个对齐字符的偏移量。 span number 规定列组应该横跨的列数。 valign top
middle
bottom
baseline
HTML5 不支持。定义在列组合中内容的垂直对齐方式。 width pixels
%
relative_length
HTML5 不支持。规定列组合的宽度。

全局属性

<colgroup> 标签支持 HTML 全局属性


事件属性

<colgroup> 标签支持 HTML 事件属性

本文参考HTML中文帮助文档

声明:该文章系转载,转载该文章的目的在于更广泛的传递信息,并不代表本网站赞同其观点,文章内容仅供参考。

本站是一个个人学习和交流平台,网站上部分文章为网站管理员和网友从相关媒体转载而来,并不用于任何商业目的,内容为作者个人观点, 并不代表本网站赞同其观点和对其真实性负责。

我们已经尽可能的对作者和来源进行了通告,但是可能由于能力有限或疏忽,导致作者和来源有误,亦可能您并不期望您的作品在我们的网站上发布。我们为这些问题向您致歉,如果您在我站上发现此类问题,请及时联系我们,我们将根据您的要求,立即更正或者删除有关内容。本站拥有对此声明的最终解释权。