<!--结构化标签可以打乱标签的顺序,但最终的显示效果没有发生变化
作用是为了优先的标签优先显示出来,使自己想要展示的内容优先显示
表格的结构化:
完整的表格结构:caption thead tbody tfoot
无论各部分在表格的什么位置,显示时,
caption均会显示在表格外最上方
thead均会在表格内的最上方
tfoot均会在最下方
优点:
1语义化:看到标签能明白包含的内容
2便于浏览器搜索
3可以调节书写顺序实现某些部分的优先显示,而不打乱显示顺序-->
<table width="500" align="center">
<colgroup style="background-color: red;"> <!--前两列为一组-->
<col/> <!--第一列-->
<col/> <!--第二列-->
</colgroup>
<col style="background-color: blue;"/> <!--第三列-->
<caption>表格标题</caption>
<!--语义化标签 -->
<thead style="background-color: aqua">
<tr>
<th>头1</th>
<th>头2</th>
<th>头3</th>
</tr>
</thead>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
<tbody>
<tr>
<td>111</td>
<td>111</td>
<td>111</td>
</tr>
<tr>
<td>222</td>
<td>222</td>
<td>222</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>尾1</td>
<td>尾2</td>
<td>尾3</td>
</tr>
</tfoot>
</table>
</body>
</html>
注释说明:
table标签渲染速度慢,忌滥用
colgroup将列分为一组 ,thead将行分为一组,对分为一组的内容属性进行统一的设置