列表的调用及注意事项

html列表调用示例

列表

• 列表分为标题、表头、表身和表尾

• 表单需要包裹在<table></table>标签中，可以理解为创建一个表单

• 接下来是表格标题<caption></caption>标签内可以声明表格标题

• 表头<thead></thead>标签内为tr>th默认加粗居中对齐可以更好的起到声明的作用

• 表身<tfoot></tfoot>标签内为tr>td声明表格内的内容

• 表尾<tbody></tbody>内的标签和表身相同，起到声明结尾的作用

  实际应用

  执行样式

  

1. <!-- 列表的使用方法 -->

2. <!-- 创建一个列表文件,设置边框为1,宽度为600,文字居中对齐 -->

3. <table border="1" width="600" style="text-align: center">

4. <!-- 设置列表标题 -->

5. <caption>

6.  某年级某班课程表

7. </caption>

8. <!-- 表头部分 -->

9. <thead>

10.  <!-- 表头使用tr>th{星期$}*7快速创建 -->

11.  <tr>

12.    <th width="80">课程\星期</th>

13.    <th>星期1</th>

14.    <th>星期2</th>

15.    <th>星期3</th>

16.    <th>星期4</th>

17.    <th>星期5</th>

18.    <th>星期6</th>

19.    <th>星期7</th>

20.  </tr>

21. </thead>

22. <!-- 表身 -->

23. <tbody>

24.  <!-- 表身使用tr*10>td{语文}*7快速创建 -->

25.  <tr>

26.    <!-- 设置表格第一列第一行为向下合并5列,显示上午的课程 -->

27.    <td rowspan="5">上午</td>

28.    <td>语文</td>

29.    <td>语文</td>

30.    <td>语文</td>

31.    <td>语文</td>

32.    <td>语文</td>

33.    <td>语文</td>

34.    <td>语文</td>

35.  </tr>

36.  <tr>

37.    <!-- 设置格第二行的第二列和第三列合并 -->

38.    <td colspan="2">数学</td>

39.    <!-- 合并之后,这个数据就属于多余数据,删除即可 -->

40.    <!-- <td>语文</td> -->

41.    <td>语文</td>

42.    <td>语文</td>

43.    <td>语文</td>

44.    <td>语文</td>

45.    <td>语文</td>

46.  </tr>

47.  <tr>

48.    <td>语文</td>

49.    <td>语文</td>

50.    <td>语文</td>

51.    <td>语文</td>

52.    <td>语文</td>

53.    <td>语文</td>

54.    <td>语文</td>

55.  </tr>

56.  <tr>

57.    <td>语文</td>

58.    <td>语文</td>

59.    <td>语文</td>

60.    <td>语文</td>

61.    <td>语文</td>

62.    <td>语文</td>

63.    <td>语文</td>

64.  </tr>

65.  <tr>

66.    <td>语文</td>

67.    <td>语文</td>

68.    <td>语文</td>

69.    <td>语文</td>

70.    <td>语文</td>

71.    <td>语文</td>

72.    <td>语文</td>

73.  </tr>

74.  <tr>

75.    <td rowspan="5">下午</td>

76.    <td>语文</td>

77.    <td>语文</td>

78.    <td>语文</td>

79.    <td>语文</td>

80.    <td>语文</td>

81.    <td>语文</td>

82.    <td>语文</td>

83.  </tr>

84.  <tr>

85.    <td>语文</td>

86.    <td colspan="2">体育</td>

87.    <!-- <td>语文</td> -->

88.    <td>语文</td>

89.    <td>语文</td>

90.    <td>语文</td>

91.    <td>语文</td>

92.  </tr>

93.  <tr>

94.    <td>语文</td>

95.    <td>语文</td>

96.    <td>语文</td>

97.    <td>语文</td>

98.    <td>语文</td>

99.    <td>语文</td>

100.    <td>语文</td>

101.  </tr>

102.  <tr>

103.    <td>语文</td>

104.    <td>语文</td>

105.    <td>语文</td>

106.    <td>语文</td>

107.    <td>语文</td>

108.    <td>语文</td>

109.    <td>语文</td>

110.  </tr>

112.  <tr>

113.    <td>语文</td>

114.    <td>语文</td>

115.    <td>语文</td>

116.    <td>语文</td>

117.    <td>语文</td>

118.    <td>语文</td>

119.    <td>语文</td>

120.  </tr>

121. </tbody>

122. </table>