浅谈Html网页表格结构化标记的应用

(编辑：jimmy 日期: 2024/12/26 浏览：3 次 )

在讲网页表格的结构化标记之前，还是先看几幅图片。

Html表格的结构化

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

结构化格式

XML/HTML Code复制内容到剪贴板

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

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

Html表格的标题

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

表格的标题

XML/HTML Code复制内容到剪贴板

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

<caption>下的属性值有：

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方

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

Html直列化格式

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

属性名称

属性值

说明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数

小结：通过设置表格的直列化格式，能够对我们需要的内容进行加深颜色，这里只是针对的列内容。

源代码如下：

XML/HTML Code复制内容到剪贴板

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

以上就是小编为大家带来的浅谈Html网页表格结构化标记的应用的全部内容了，希望对大家有所帮助，多多支持~

上一篇：向div元素添加圆角边框的实现方法
下一篇：HTML table 直列化格式详解