Html网页表格结构化标记该如何使用

来源：动视网责编：小采时间：2020-11-27 15:27:11

Html网页表格结构化标记该如何使用

Html网页表格结构化标记该如何使用:这次给大家带来Html网页表格结构化标记该如何使用，Html网页表格结构化标记使用的注意事项有哪些，下面就是实战案例，一起来看一下。Html表格的结构化所谓的结构化，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在修改表体部分的时候，不会影响

推荐度：

点击下载本文 文档为doc格式

导读Html网页表格结构化标记该如何使用:这次给大家带来Html网页表格结构化标记该如何使用，Html网页表格结构化标记使用的注意事项有哪些，下面就是实战案例，一起来看一下。Html表格的结构化所谓的结构化，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在修改表体部分的时候，不会影响

这次给大家带来Html网页表格结构化标记该如何使用，Html网页表格结构化标记使用的注意事项有哪些，下面就是实战案例，一起来看一下。

Html表格的结构化

所谓的结构化，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在修改表体部分的时候，不会影响到其它两部分，从而解除了耦合，方便我们的应用。

结构化格式

<table> 
<thead>…</thead> --------表头区 
<tbody>…</tbody>---------表体区 
<tfoot>…</tfoot>------------表尾区 
</table>

总结：通过把表格划分为三部分，方便了我们对表格的编辑操作。

Html表格的标题

每个表格都有自己的标题，正如上述第二幅图片所示，那么又如何做到让标题随着内容来移动呢？

表格的标题

<table> 
<caption>…</caption> 
</table>

<caption>下的属性值有：

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方

小结：通过设置表格的标题，能够随时让标题跟着表格动。
Html直列化格式

什么是表格的直列化格式呢？我们平常在Excel中所见到的给整列加背景颜色，说的就是这么一回事。

<html> 
<head> 
 
<li>表格嵌套的使用一</li> 
 
<table width="500" > 
<tr> 
<td align="center">学生成绩表</td> 
</tr> 
<td> 
<table border="1" width="100%"> 
<thead> 
<tr> 
<th>姓名</th> 
<th>语文</th> 
<th>数学</th> 
<th>外语</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>张三</td> 
<td>95</td> 
<td>95</td> 
<td>95</td> 
</tr> 
<tr> 
<td>张三</td> 
<td>95</td> 
<td>95</td> 
<td>95</td> 
</tr> 
<tr> 
<td>张三</td> 
<td>95</td> 
<td>95</td> 
<td>95</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<td colspan="4">成绩汇总</td> 
</tr> 
</tfoot> 
</table> 
</td> 
</tr> 
</table> 
 
<br/> 
 
<li>表格嵌套的使用二</li> 
 
<table border="1" width="500" > 
<caption align="bottom">学生成绩</caption> 
<thead> 
<tr> 
<th>姓名</th> 
<th>语文</th> 
<th>数学</th> 
<th>外语</th> 
</tr> 
</thead> 
<tbody> 
<tr> 
<td>张三</td> 
<td>95</td> 
<td>95</td> 
<td>95</td> 
</tr> 
<tr> 
<td>张三</td> 
<td>95</td> 
<td>95</td> 
<td>95</td> 
</tr> 
<tr> 
<td>张三</td> 
<td>95</td> 
<td>95</td> 
<td>95</td> 
</tr> 
</tbody> 
<tfoot> 
<tr> 
<td colspan="4">成绩汇总</td> 
</tr> 
</tfoot> 
</table> 
 
<br/> 
 
<li>表格嵌套的使用三</li> 
<table border="1" width="500" > 
<caption align="bottom">学生成绩</caption> 
<col ></col> 
<col bgcolor=blue></col> 
<thead> 
<tr> 
<th>姓名</th> 
<th>语文</th> 
<th>数学</th> 
<th>外语</th> 
</tr> 
</thead> 
<tbody> 
<tr > 
<td>张三</td> 
<td>95</td> 
<td>95</td> 
<td>95</td> 
</tr> 
<tr> 
<td>张三</td> 
<td>95</td> 
<td>95</td> 
<td>95</td> 
</tr> 
<tr> 
<td>张三</td> 
<td>95</td> 
<td>95</td> 
<td>95</td> 
</tr> 
</tbody> 
<tfoot> 
</tfoot> 
</table> 
 
</body> 
</head> 
</html>

相信看了这些案例你已经掌握了方法，更多精彩请关注Gxl网其它相关文章！

Html网页表格结构化标记该如何使用

推荐度：

点击下载本文 文档为doc格式

标签： html表格网页表格 html表格结构

热门焦点

Html网页表格结构化标记该如何使用

Html网页表格结构化标记该如何使用

Html网页表格结构化标记该如何使用

最新推荐

猜你喜欢

热门推荐