浅谈Html网页表格结构化标记的应用

在讲网页表格的结构化标记之前，还是先看几幅图片。

HtML表格的结构化

所谓的结构化，正如上述第一副图所示，就是把我们的表格划分为三种：表头、表体、表尾。从而当我们在修改表体部分的时候，不会影响到其它两部分，从而解除了耦合，方便我们的应用。

结构化格式

1. table>      
2.      
3. thead> …/thead>  --------表头区     
4.      
5. tbody> …/tbody> ---------表体区     
6.      
7. tfoot> …/tfoot> ------------表尾区     
8.      
9. /table>     

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

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

1. table>      
2.      
3. caption> …/caption>      
4.      
5. /table>     

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方

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

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

colgroup> …colgroup>

属性名称

属性值

说明

Align

Left

靠左

center

考中

Right

靠右

Valign

Right

靠右

Top

考上

Middle

靠中

Bottom

靠下

Span

数字

直列数

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

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网页表格结构化标记的应用的全部内容了，希望对大家有所帮助，多多支持~

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！