Html網頁表格結構化標記的應用
阿新 • • 發佈：2019-01-22
在講網頁表格的結構化標記之前，還是先看幾幅圖片。
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>