html表格的分区与分组控制-百分百源码网

html表格的分区与分组控制

发布时间：09/01 来源：未知浏览：关键词：

1. 表格的分区主要用<thead><tbody><tfoot>将表格分为头部，主体，尾部三分部

2. 这三个表格分区标签本身没有任何样式,仅仅是一个区块划分标志罢了

除了可以对表格停止分区操纵外,还可以对每一列停止分组,这样可以快速的停止设定,提高效力

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>表格的分区与分组操纵</title>
</head>
<body>
<table border="1" cellspacing="0" cellpadding="5" align="center" width="80%">
<caption><h3>岛国明星TOP50排行榜</h3></caption>
<!-- 对每一列停止分组操纵 -->
<!-- <colgroup>:可以对一列停止团体操纵,但能用的属性非常有限,平常要配合css才能发挥作用 -->
<!-- <col>标签可对分到一组的每一列停止愈加精准的操纵 -->
<colgroup span="1" bgcolor="lightgreen"></colgroup>
<colgroup span="1" bgcolor="lightgreen"></colgroup>
<colgroup span="2" bgcolor="lightyellow">
<!-- 对第三列独自操纵 -->
<col bgcolor="lightgray">
<col>
</colgroup>
<colgroup span="2" bgcolor="cyan"></colgroup>
<thead>
<!-- bgcolor可以设定行或单元格的背景色彩 -->
<tr bgcolor="skyblue">
<!-- <th>标签内部文本默许会加粗居中显示,非常适合做表头 -->
<th>ID</th>
<th>姓名</th>
<th>腰围</th>
<th>腰围</th>
<th>臀围</th>
</tr>
<tr>
<td align="center">01</td>
<td align="center">波多野结衣</td>
<td align="center">88</td>
<td align="center">59</td>
<td align="center">85</td>
</tr>
<tr>
<td align="center">02</td>
<td align="center">小泽玛利亚</td>
<td align="center">90</td>
<td align="center">60</td>
<td align="center">85</td>
</tr>
<tr>
<td align="center">03</td>
<td align="center">浅川梨奈</td>
<td align="center">87</td>
<td align="center">61</td>
<td align="center">88</td>
</tr>
<tr>
<td align="center">04</td>
<td align="center">深田恭子</td>
<td align="center">86</td>
<td align="center">62</td>
<td align="center">88</td>
</tr>
<tr>
<td align="center">05</td>
<td align="center">苍教师</td>
<td align="center">88</td>
<td align="center">68</td>
<td align="center">90</td>
</tr>
</tbody>
<!-- tfoot:表格底部,当前临时无内容,保持空即可 -->
<tfoot>
</tfoot>
</table>
<p align="center">
<a href="">首页</a>
<a href="">上一页</a>
<a href="">1</a>
<a href="">2</a>
<a href="">3</a>
<a href="">...</a>
<a href="">下一页</a>
<a href="">尾页</a>
</p>
</body>
</html>

以上就是html表格的分区与分组操纵的具体内容，更多请关注百分百源码网其它相关文章！

打赏