這次帶給大家Html網頁表格結構化標記該如何使用,Html網頁表格結構化標記使用的注意事項有哪些,以下就是實戰案例,一起來看一下。
Html表格的結構化
所謂的結構化,就是把我們的表格分成三種:表頭、表體、表尾。從而當我們在修改表體部分的時候,不會影響到其它兩部分,從而解除了耦合,方便我們的應用。
結構化格式
<table> <thead>…</thead> --------表头区 <tbody>…</tbody>---------表体区 <tfoot>…</tfoot>------------表尾区 </table>
總結:透過將表格分成三部分,方便了我們對表格的編輯操作。
Html表格的標題
每個表格都有自己的標題,正如上述第二幅圖片所示,那麼又如何做到讓標題隨著內容來移動呢?
表格的標題
<table> <caption>…</caption> </table>
屬性名稱
##屬性值說明alignTop標題在表格上方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>
相信看了這些案例你已經掌握了方法,更多精彩請關注php中文網其它相關文章!
相關閱讀:
怎麼用h5的sse伺服器發送EventSource事件H5的本地儲存和本機資料庫詳細介紹用H5和C3實作簡單的時鐘效果以上是Html網頁表格結構化標記該如何使用的詳細內容。更多資訊請關注PHP中文網其他相關文章!