一、hgroup标签
HTML5引入了hgroup标签，它可以将一组标题（比如h1~h6）组织在一起，并用作文档或者区域级别的标题。hgroup标签可以嵌套，第一个h1~h6标签表示最高层级标题，其余的则作为次级标题。
代码示例：
<hgroup>
<h1>This is the main heading</h1>
<h2>This is a subheading</h2>
</hgroup>二、colgroup用法
colgroup标签定义表格列的组合，并且用于向表格中应用一系列属性。colgroup标签的应用增强了可访问性和可维护性。在使用colgroup标签时，需要有一个父标签`table`，以及一个或多个子标签`col`。
代码示例：
<table>
<colgroup>
<col span="2" style="background-color:yellow">
<col style="background-color:red">
</colgroup>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Money spent</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>$90</td>
</tr>
</table>三、col元素详解
col元素为表格列定义样式信息，比如对背景色、表格宽度、列宽进行定义。在定义表格列的时候可以使用如下的属性：
- span：列组合计数。
- width：定义列宽。
- align：定义列中数据的对齐方式。
- bgcolor：定义列背景色。
代码示例：
<table>
<colgroup>
<col span="2" style="background-color:yellow">
<col style="background-color:red">
</colgroup>
<tr>
<th>Month</th>
<th>Savings</th>
<th>Money spent</th>
</tr>
<tr>
<td>January</td>
<td>$100</td>
<td>$50</td>
</tr>
<tr>
<td>February</td>
<td>$80</td>
<td>$90</td>
</tr>
</table>四、colgroup标签的应用案例
下面是一个表格的代码，在没有使用colgroup标签的情况下，对表格各列的样式定义散落在各处，代码难以维护，且存在代码冗余的问题。在使用colgroup标签后，代码得以简化，样式定义规整，提高了可维护性和可读性。
没有使用colgroup标签的代码：
<table border="1" cellpadding="2" cellspacing="0" width="800">
<thead>
<tr height="40">
<th colspan="2">常用筛选规则名录</th>
</tr>
</thead>
<tbody>
<tr height="30">
<th align="center">筛选步骤</th>
<th align="center">筛选规则</th>
</tr>
<tr height="30">
<td align="center">第1步</td>
<td align="center">内容1</td>
</tr>
<tr height="30">
<td align="center">第2步</td>
<td align="center">内容2</td>
</tr>
<tr height="30">
<td align="center">第3步</td>
<td align="center">内容3</td>
</tr>
</tbody>
</table>使用colgroup标签的代码：
<table border="1" cellpadding="2" cellspacing="0" width="800">
<colgroup>
<col width="20%">
<col width="80%">
</colgroup>
<thead>
<tr height="40">
<th colspan="2">常用筛选规则名录</th>
</tr>
</thead>
<tbody>
<tr height="30">
<td align="center">第1步</td>
<td align="center">内容1</td>
</tr>
<tr height="30">
<td align="center">第2步</td>
<td align="center">内容2</td>
</tr>
<tr height="30">
<td align="center">第3步</td>
<td align="center">内容3</td>
</tr>
</tbody>
</table>原创文章，作者：CMOD，如若转载，请注明出处：https://www.506064.com/n/148626.html
微信扫一扫 
支付宝扫一扫 