立即登录 马上注册
首页 › 开发帮助文档 › 开发技术 › 浅谈Html网页表格结构化标记的应用

赞

评论

收藏

[Html/CSS] 浅谈Html网页表格结构化标记的应用

开发技术 开发技术 发布于：2021-09-14 21:26 | 阅读数：360 | 评论：0

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

Html表格的结构化
所谓的结构化，正如上述第一副图所示，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在修改表体部分的时候，不会影响到其它两部分，从而解除了耦合，方便我们的应用。
结构化格式
<table>    
      
  <thead>…</thead> --------表头区    
      
  <tbody>…</tbody>---------表体区    
      
  <tfoot>…</tfoot>------------表尾区    
      
  </table>
总结：通过把表格划分为三部分，方便了我们对表格的编辑操作。

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

表格的标题
<table>    
      
  <caption>…</caption>    
      
  </table>
<caption>下的属性值有：属性名称
属性名称
属性值
说明
align
Top
标题在表格上方
Bottom
标题在表格下方
小结：通过设置表格的标题，能够随时让标题跟着表格动。

Html直列化格式
什么是表格的直列化格式呢？我们平常在Excel中所见到的给整列加背景颜色，说的就是这么一回事。
<colgroup>…<colgroup>
属性名称
属性值
说明
Align
Left
靠左
Center
考中
Right
靠右
Valign
Right
靠右
Top
靠上
Middle
靠中
Bottom
靠下
Span
数字
直列数
小结：通过设置表格的直列化格式，能够对我们需要的内容进行加深颜色，这里只是针对的列内容。

源代码如下：
<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网页表格结构化标记的应用的全部内容了，希望对大家有所帮助，多多支持CodeAE代码之家~

关注下面的标签，发现更多相似文章
免责声明：

1. 本站所有资源来自网络搜集或用户上传，仅作为参考不担保其准确性！

2. 本站内容仅供学习和交流使用，版权归原作者所有！© 查看更多

3. 如有内容侵害到您，请联系我们尽快删除，邮箱：kf@codeae.com

分享到： QQ好友和群QQ好友和群 QQ空间QQ空间

举报

返回列表
相关帖子
avatar
3426 经验
3424 文档
OPNE在线字典
  • 手机版| 免责声明|
2021-2024  版权所有：CodeAE代码之家   
粤ICP备2023096576号-2