html中colgroup标签的详细介绍

原创 国哥笔记  2019-04-19 20:42  阅读 235 views 次

本篇将介绍的是html中<colgroup>标签的用法,感兴趣的朋友可以一起学习一下!

在网页中,表格是用的很多的,而它的样式各种各样。接下来介绍的标签就和表格的样式有关,即<colgroup>标签,我们就一起来看看该标签怎么使用吧!

“colgroup”作为英文是“columngroup”的缩写,有“列群”的意思,那作为html中的标签又有什么意思呢?接下来我们一起来看看吧!

一、<colgroup>标签定义及用法

在html中,<colgroup>标签是使用来对表格中的列进行组合,方便对多个列设置样式。如果要对全部列设置样式,使用<colgroup>标签特别有用,就不需要对各个单元和各行重复设置样式。

<colgroup>标签只能在<table>标签中使用,使用在<caption>标签之后,在 <thead>、<tbody>、<tfoot>和<tr>标签之前。

如果要在<colgroup>标签中的某列定义不同的属性,可以使用<col>标签,<col>标签用法见:html中<col>标签的详细介绍

二、<colgroup>标签语法格式

<colgroup span="2" ></colgroup>

说明:

  1. <colgroup>标签中如果没有<col>标签,表示第一列;
  2. <colgroup>标签的属性除span(横跨的列数)属性外,其余的html5版本已经不支持(使用css来代替)。

三、实例

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>html中colgroup标签的详细介绍</title>
</head>
<body bgcolor="burlywood">
<table border="1" width="300px">
<colgroup style="background-color:red">
<col> <!--第一列-->
<col style="background-color:palevioletred"> <!--第二列-->
<col> <!--第三列-->
</colgroup>
<tr><th>1-1</th><th>1-2</th><th>1-3</th></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>
</body>
</html>

运行结果:

好了,关于html中<colgroup>标签的介绍就结束了,希望对大家有帮助!

本文地址:https://www.ggbiji.com/html-colgroup-2.html
版权声明:本文为 国哥笔记 原创/整理文章,欢迎分享,转载请注明出处!

发表评论


表情