DIV CSS 佈局教程網

設為首頁 加入收藏
 DIV+CSS佈局教程網 >> 網頁腳本 >> HTML基礎知識 >> HTML和Xhtml >> 淺談Html網頁表格結構化標記的應用
淺談Html網頁表格結構化標記的應用
編輯：HTML和Xhtml     

在講網頁表格的結構化標記之前，還是先看幾幅圖片。

Html表格的結構化

所謂的結構化，正如上述第一副圖所示，就是把我們的表格劃分為三種：表頭、表體、表尾。從而當我們在修改表體部分的時候，不會影響到其它兩部分，從而解除了耦合，方便我們的應用。

結構化格式

XML/HTML Code復制內容到剪貼板
  1. <table>     
  2.      
  3. <thead>…</thead> --------表頭區     
  4.      
  5. <tbody>…</tbody>---------表體區     
  6.      
  7. <tfoot>…</tfoot>------------表尾區     
  8.      
  9. </table>    

總結：通過把表格劃分為三部分，方便了我們對表格的編輯操作。
 
Html表格的標題

每個表格都有自己的標題，正如上述第二幅圖片所示，那麼又如何做到讓標題隨著內容來移動呢？
 
表格的標題

XML/HTML Code復制內容到剪貼板
  1. <table>     
  2.      
  3. <caption>…</caption>     
  4.      
  5. </table>    
<caption>下的屬性值有：

屬性名稱

屬性值

說明

align

Top

標題在表格上方

Bottom

標題在表格下方


小結：通過設置表格的標題，能夠隨時讓標題跟著表格動。
 
Html直列化格式

什麼是表格的直列化格式呢？我們平常在Excel中所見到的給整列加背景顏色，說的就是這麼一回事。

<colgroup>…<colgroup>

屬性名稱

屬性值

說明

Align

Left

靠左

Center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

數字

直列數


小結：通過設置表格的直列化格式，能夠對我們需要的內容進行加深顏色，這裡只是針對的列內容。
 
源代碼如下：

XML/HTML Code復制內容到剪貼板
  1. <html>     
  2. <head>     
  3.      
  4. <li>表格嵌套的使用一</li>     
  5.      
  6. <table  width="500" >     
  7. <tr>     
  8. <td align="center">學生成績表</td>     
  9. </tr>     
  10. <td>     
  11. <table border="1" width="100%">     
  12. <thead>           
  13. <tr>     
  14. <th>姓名</th>     
  15. <th>語文</th>     
  16. <th>數學</th>     
  17. <th>外語</th>     
  18. </tr>     
  19. </thead>     
  20. <tbody>     
  21. <tr>     
  22. <td>張三</td>     
  23. <td>95</td>     
  24. <td>95</td>     
  25. <td>95</td>     
  26. </tr>     
  27. <tr>     
  28. <td>張三</td>     
  29. <td>95</td>     
  30. <td>95</td>     
  31. <td>95</td>     
  32. </tr>     
  33. <tr>     
  34. <td>張三</td>     
  35. <td>95</td>     
  36. <td>95</td>     
  37. <td>95</td>     
  38. </tr>     
  39. </tbody>     
  40. <tfoot>     
  41. <tr>     
  42. <td colspan="4">成績匯總</td>     
  43. </tr>     
  44. </tfoot>     
  45. </table>     
  46. </td>     
  47. </tr>     
  48. </table>     
  49.      
  50. <br/>     
  51.      
  52. <li>表格嵌套的使用二</li>     
  53.      
  54. <table border="1" width="500" >     
  55. <caption align="bottom">學生成績</caption>     
  56. <thead>     
  57. <tr>     
  58. <th>姓名</th>     
  59. <th>語文</th>     
  60. <th>數學</th>     
  61. <th>外語</th>     
  62. </tr>     
  63. </thead>     
  64. <tbody>     
  65. <tr>     
  66. <td>張三</td>     
  67. <td>95</td>     
  68. <td>95</td>     
  69. <td>95</td>     
  70. </tr>     
  71. <tr>     
  72. <td>張三</td>     
  73. <td>95</td>     
  74. <td>95</td>     
  75. <td>95</td>     
  76. </tr>     
  77. <tr>     
  78. <td>張三</td>     
  79. <td>95</td>     
  80. <td>95</td>     
  81. <td>95</td>     
  82. </tr>     
  83. </tbody>     
  84. <tfoot>     
  85. <tr>     
  86. <td colspan="4">成績匯總</td>     
  87. </tr>     
  88. </tfoot>     
  89. </table>     
  90.         
  91. <br/>     
  92.      
  93. <li>表格嵌套的使用三</li>     
  94. <table border="1" width="500" >     
  95. <caption align="bottom">學生成績</caption>     
  96. <col ></col>     
  97. <col bgcolor=blue></col>     
  98. <thead>     
  99. <tr>     
  100. <th>姓名</th>     
  101. <th>語文</th>     
  102. <th>數學</th>     
  103. <th>外語</th>     
  104. </tr>     
  105. </thead>     
  106. <tbody>     
  107. <tr >     
  108. <td>張三</td>     
  109. <td>95</td>     
  110. <td>95</td>     
  111. <td>95</td>     
  112. </tr>     
  113. <tr>     
  114. <td>張三</td>     
  115. <td>95</td>     
  116. <td>95</td>     
  117. <td>95</td>     
  118. </tr>     
  119. <tr>     
  120. <td>張三</td>     
  121. <td>95</td>     
  122. <td>95</td>     
  123. <td>95</td>     
  124. </tr>     
  125. </tbody>     
  126. <tfoot>     
  127. </tfoot>     
  128. </table>     
  129.      
  130. </body>     
  131. </head>     
  132. </html>    

以上就是小編為大家帶來的淺談Html網頁表格結構化標記的應用的全部內容了，希望對大家有所幫助，多多支持腳本之家~

HTML和Xhtml
html中設置讓div中的內容超出後自動顯示滾動條
在html頁面中，我們有時需要讓div中的內容超出後自動顯示滾動條，我們可以這樣設置： 復制代碼代碼
HTML表單標記教程(2):
本教程介紹FORM表單標記的各種屬性在網頁設計中的應用. <FORM>標記的NAME屬性
網站背景音樂實現方法
對於個人站長來說，如何能使自己的網站與眾不同、充滿個性，一直是不懈努力的目標。除了盡量提高頁面的視覺

相關文章

HTML入門知識HTML5教程關於HTMLHTML和XhtmlHTML5特效代碼HTML5詳解
小編推薦
HTML5教程：datalist標簽詳解和實例代碼 關閉IE啟用圖片工具列 HTML5教程：html標簽屬性通過w3c驗證 HTML表格標記教程(37):表頭的背景圖象屬性BACKGROUND iframe下頁面傳參數為亂碼問題探討 DTD文檔類型聲明doctype 總結XHTML代碼常見的應用問題 html借助marquee實現文字左右滾動 input元素[type=file]時的樣式定制及浏覽器兼容性問題探討 HTML基礎:HTML的基本結構
熱門推薦
純css為select添加樣式(無腳本)實現 web響應式布局中iframe自適應的方法 DTD文檔類型聲明doctype HTML表單標記教程(5):文字域標記 經驗分享:淘寶網店網頁標題優化和寶貝櫥窗推薦 了解HTTP Headers的方方面面 圖文說明 常見的HTML標記錯誤寫法 iframe節點初始化的問題探討 HTML中div與span的區別(共同點與不同點)
大家都在看
jquery 實現刪除文章提示是否刪除 js控制文本框只輸入數字和小數點的方法 好的網站文案 良好的用戶體驗 JQuery實現鼠標移動圖片顯示描述層的方法 js+AJAX異步從優酷專輯中采集所有視頻及信息 js跨域問題淺析及解決方法優缺點對比 利用XSL對XML數據進行加密和大小寫轉換 9.4 單行文本框text
XML學習教程| jQuery入門知識| AJAX入門| Dreamweaver教程| Fireworks入門知識| SEO技巧| SEO優化集錦|
Copyright © DIV+CSS佈局教程網 All Rights Reserved