首页 » 编程语言 » html » 正文

html元素colgroup标签的使用方法及作用

html元素colgroup标签的使用方法及作用详解如下:

<colgroup> 标签定义

<colgroup>标签用于对html表格中的列进行组合,以便对其进行格式化;

<colgroup>标签可以向整个列应用样式,而不需要重复为每个单元格或每一行设置样式;

<colgroup>标签只能在<table>元素之内,在任何一个<caption>元素之后,在任何一个 <thead>、<tbody>、<tfoot>、<tr> 元素之前使用;

<colgroup>标签设置的样式会被<col>标签设置的样式覆盖。

浏览器支持情况

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

<colgroup>标签的用法

通过<colgroup>标签设置style样式属性,是对组合的所有列设置相同的样式。

<table  border="1">
<caption>表格的标题<caption>
<colgroup span="2" style="background-color:green"></colgroup>
<colgroup style="background-color:yellow" ></colgroup>
<tr>
<th>表头1</td>
<th>表头2</td>
<th>表头3</td>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
<td>第2行3列</td>
</tr>
<tr>
<td>第3行1列</td>
<td>第3行2列</td>
<td>第3行3列</td>
</tr>
</table>

以上代码在浏览器中显示效果如下:

2020-04-18_010448.png

<colgroup>结合<col>标签

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

<table  border="1">
<caption>表格的标题<caption>
  <colgroup>
      <col span="1" style="background-color:green">
      <col style="background-color:yellow">
  </colgroup>
<tr>
<th>表头1</td>
<th>表头2</td>
<th>表头3</td>
</tr>
<tr>
<td>第2行1列</td>
<td>第2行2列</td>
<td>第2行3列</td>
</tr>
<tr>
<td>第3行1列</td>
<td>第3行2列</td>
<td>第3行3列</td>
</tr>
</table>

以上代码在浏览器中显示效果如下:

2020-04-22_235326.png

<colgroup>标签设置的样式会被<col>标签设置的样式覆盖。

<col>标签一般会放在<colgroup>标签中使用,对<colgroup>标签组合的列分别设置样式

<colgroup>标签属性

在HTML5中不再支持 HTML 4.01 中的大部分属性;

属性描述
spannumber规定列组应该横跨的列数。
alignleft
right
center
justify
char

HTML5 不支持

规定在列组合中内容的水平对齐方式。

charcharacter

HTML5 不支持

规定根据哪个字符来对齐列组中的内容。

charoffnumber

HTML5 不支持

规定第一个对齐字符的偏移量。

valigntop
middle
bottom
baseline

HTML5 不支持

定义在列组合中内容的垂直对齐方式。

widthpixels
%
relative_length

HTML5 不支持

规定列组合的宽度。

在html5中,已经不再支持<colgroup>标签中的align、char、charoff、valign、width属性。



欢迎您发表评论或留言