淺談Html網頁表格結構化標記的應用

下面小編就為大家帶來一篇淺談Html網頁表格結構化標記的應用。小編覺得蠻不錯的，現在就分享給大家，也給大家做個參考。一起跟著小編過來看看吧

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

Html表格的結構化

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

結構化格式

XML/HTML/HTML Code複製內容到剪貼板XML/HTML >

     

1.      

   thead

>
2. …

thead

3. > --------表頭區     --------表頭區  tbody>… tbody

   >
---------表體區     
  foot

5. >- -----------表尾區          >table總結：

透過把表格分成三部分，方便了我們對表格的編輯操作。
6.  
   Html表格的標題

7. 每個表格都有自己的標題，正如上述第二幅圖片所示，那麼又如何做到讓標題隨著內容來移動呢？  表格的標題XML/HTML Code複製內容到剪貼簿

8.      

9.      

   caption

>

…

caption>     

  >

    

下的屬性值有：

屬性名稱

屬性值說明align

Top

標題在表格上方

1. Bottomtom 透過設定表格的標題，能夠隨時讓標題跟著表格動。  Html直列化格式

   什麼是表格的直列化格式呢？我們平常在Excel中所見到的為整列加上背景顏色，說的就是這麼一回事。
2. …
   屬性名稱
3. 屬性值

   說明AlignLeft ValignRight 靠右

   Top
4. 考上
   Middle
5. 靠中

   Bottom靠下數字 小結：

透過設定表格的直列化格式，能夠對我們需要的內容進行加深顏色，這裡只是針對的列內容。

 

原始碼如下：

XML/HTML Code

複製內容到剪貼簿

複製內容到剪貼簿

複製內容到剪貼簿

1. html>     

2.   

li

3. >

   表格嵌套的使用一

li>           >

4.      

5. tr>     >     

>
6.      

   td

    
align
7. =

   "center">學生成績表td tr>     

td

8. >  >     

thead >           

tr >姓名th>     

9. th

   >語th

   >
       

10. th

    >
外語

11. th>      thead

    >
     

12. tbody >     

13. tr

    >      td>     

td>95td>     

     

td
14. >

    95td>     

16. tr>     

17.      td>

    95

18. td>     td>

19. td>95 td>     

20. tr > >     

td

21. >張三td>

         

22. td>

23. td>95 td& >     

24. td> tr

>
25.      

    身體 >     

26. tr>      td colspan

    =
" 4"

27. >成績摘要td>

        

28. >     

29. 腳 >     

30. 桌子>     

31. tr>      桌子>     

     

32.      

li>表格草稿的使用二li

>
33.      

          ="500" 

    >
     

35. caption align="bottom">學生成績 thead>

         

36. tr>

         

37. th

38. th>語文 th>     
39. th th>外語
th

40. >     tr>        

41. tbody>      tr

>
42.      

    td

43. td>95

44. td

    >     

45. td

    td

>
46. 95

    td>     tr

>
47.        

    td>張三td

>
48.      

    td

    td
49. >

    95 td>     

    td
50. >

    95 tr>

         

51. tr>

         

52. td

53. td>95td>    5

54. td

    >      td>95

55. td

    >      身體>     

56. 腳>     

57. tr

58. td

     colspan="4">成績總結

59. td

    >     

60. tr

    >     桌子>      

            

61. br🠎 

li>表格審查的使用三li

>
62.      

    桌子

     
邊框
63. =

    "1"

     
>

64. 標題 對齊=

    "底部"
65. & >

    學生成績

66. 標題

    >          

67. col

      bgcolor =藍色>col>     

68. tr> th>姓名th
69. >

          th>     

th

70. >數學th>     

71. 第>外語第>         

72. 頭部 >     

73. 身體>     

74. td >

    張三

75. td >     

td>95 td>95td

>
76.      

    td>95 td

tr

77. >     tr >     

78. td>張三 td>95

td

79. >     

td

80. >95 td

    >
95

81. t d> tr

    >
     

82. td >張三 td

    >
     

83. td>95 td

>
84. 95

    td> td

>
85. 95

    td>      

86. tbody >     

87. t腳>      

桌子

88. >     

89.      

90. body>     

    .
91. >

         .  

html

92. >    

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

更多淺談Html網頁表格結構化標記的應用相關文章請關注PHP中文網！