天天看点
返回

表格结构化标记如何进行应用—前端实操

今天分享下”表格结构化标记如何进行应用—前端实操“这篇文章，文中根据实例编码详细介绍，或许对大家的编程之路有着一定的参考空间与使用价值，需要的朋友接下来跟着云南仟龙Mark一起学习一下吧。在讲网页表格的结构化标记之前，还是先看几幅图片。

表格结构化标记如何进行应用—前端实操

  1. Html表格的结构化
  2. 说白了的结构化，如同以上第一副图所显示，便是把大家的表格区划为三种：表头，表体，表尾。进而在我们在改动表体一部分的情况下，不容易直接影响到其他两一部分，进而消除了藕合，便捷大家的运用。
  3. 结构化格式
  4. XML/HTML Code拷贝內容到剪贴板<table>     
  5. <thead>…</thead> --------表头区     
  6. <tbody>…</tbody>---------表体区     
  7. <tfoot>…</tfoot>------------表尾区     
  8. </table>    

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

Html表格的标题

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

表格的标题

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

  1. <table>     
  2. <caption>…</caption>     

<caption>下的属性值有：

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方

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

Html直列化格式

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

<colgroup>…<colgroup>

Align

Left

靠左

Center

考中

Right

靠右

Valign

考上

Middle

靠中

靠下

Span

数字

直列数

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

  1. <html>     
  2. <head>     
  3. <li>表格嵌套的使用一</li>     
  4. <table  width="500" >     
  5. <tr>     
  6. <td align="center">学生成绩表</td>     
  7. </tr>     
  8. <td>     
  9. <table border="1" width="100%">     
  10. <thead>           
  12. <th>姓名</th>     
  13. <th>语文</th>     
  14. <th>数学</th>     
  15. <th>外语</th>     
  17. </thead>     
  18. <tbody>     
  20. <td>张三</td>     
  21. <td>95</td>     
  30. </tr> /products/ycxsyw.html    
  37. </tbody>     
  38. <tfoot>     
  40. <td colspan="4">成绩汇总</td>     
  42. </tfoot>     
  43. </table>     
  44. </td>     
  47. <br/>     
  48. <li>表格嵌套的使用二</li>     
  49. <table border="1" width="500" >     
  50. <caption align="bottom">学生成绩</caption>     
  51. <thead>     
  86. <li>表格嵌套的使用三</li>     
  89. <col ></col>     
  90. <col bgcolor=blue></col>     
  100. <tr >     
  122. </body>     
  123. </head>     
  124. </html>    
html 结构化 嵌套 xml 剪贴板
上一篇: mysq,oraclel复杂SQL操作汇总
下一篇: 前端工作的五层，你工作在哪一层？

继续阅读