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

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

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中所见到的给整列加背景颜色,说的就是这么一回事。

<colgroup>…<colgroup>

属性名称

属性值

说明

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网页表格结构化标记的应用的全部内容了,希望对大家有所帮助,多多支持脚本之家~

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