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

下面小编就为大家带来一篇浅谈html网页表格结构化标记的应用。小编觉得挺不错的，现在就分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

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>    

属性名称

属性值

说明

align

Top

标题在表格上方

Bottom

标题在表格下方

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

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

属性名称

属性值

说明

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>95td>     

24. td>95td>     

25. td>95td>     

26. tr>     

27. tr>     

28. td>张三td>     

29. td>95td>     

30. td>95td>     

31. td>95td>     

32. tr>     

33. tr>     

34. td>张三td>     

35. td>95td>     

36. td>95td>     

37. td>95td>     

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>95td>     

68. td>95td>     

69. td>95td>     

70. tr>     

71. tr>     

72. td>张三td>     

73. td>95td>     

74. td>95td>     

75. td>95td>     

76. tr>     

77. tr>     

78. td>张三td>     

79. td>95td>     

80. td>95td>     

81. td>95td>     

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>95td>     

110. td>95td>     

111. td>95td>     

112. tr>     

113. tr>     

114. td>张三td>     

115. td>95td>     

116. td>95td>     

117. td>95td>     

118. tr>     

119. tr>     

120. td>张三td>     

121. td>95td>     

122. td>95td>     

123. td>95td>     

124. tr>     

125. tbody>     

126. tfoot>     

127. tfoot>     

128. table>     

129.      

130. body>     

131. head>     

132. html>    

以上就是小编为大家带来的浅谈Html网页表格结构化标记的应用的全部内容了，希望对大家有所帮助，多多支持PHP中文网~

更多浅谈Html网页表格结构化标记的应用相关文章请关注PHP中文网！