Home > Article > Web Front-end > Partition and grouping control of html table

Partition and grouping control of html table

无忌哥哥Original: 2018-06-29 10:05:254275browse

1. The partitioning of the table mainly uses ae20bdd317918ca68efdc799512a9b3992cee25da80fac49f6fb6eec5fd2c22a06669983c3badb677f993a8c29d18845 to divide the table into three parts: head, body and tail.

2. The three table partition labels themselves There is no style, just a block division mark.

In addition to partition control of the table, each column can also be grouped, so that it can be set quickly and improve efficiency

<!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>

The above is the detailed content of Partition and grouping control of html table. For more information, please follow other related articles on the PHP Chinese website!

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：Basic properties of html tablesNext article：Basic properties of html tables

See more

Partition and grouping control of html table

Related articles