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

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

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

<col>标签的定义

<col>标签的“col”是“column”英文单词的缩写,中文有“列”的意思;

<col>标签是给表格中一个或多个列应用样式,而不需要重复为每个单元格或每一行设置样式;

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

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

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

浏览器支持

 <col> 标签已被所有主流浏览器都支持。

<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>标签组合的列分别设置样式。

<col>标签的属性

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

在html中,<col>标签是单标签,可以没有结束标签;

在xhtml中,<col>标签必须使用“/”关闭,如:<col span = "2"/>

属性描述
spannumber规定 <col> 元素应该横跨的列数。
alignleft
right
center
justify
char

HTML5 不支持

规定与 <col> 元素相关的内容的水平对齐方式。

charcharacter

HTML5 不支持

规定根据哪个字符来对齐与 <col> 元素相关的内容。

charoffnumber

HTML5 不支持

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

valigntop
middle
bottom
baseline

HTML5 不支持

规定与 <col> 元素相关的内容的垂直对齐方式。

width%
pixels
relative_length

HTML5 不支持

Specifies the width of a <col> element

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



欢迎您发表评论或留言