4-小说排行案例
4.1 案例需求
4.2 技术分析
1.表格标签
在过去表格标签用的非常的多, 绝大多数的网站都是使用表格标签来布局.表格标签类似Excel.
1
2
3
4
5
6
7
8
9
10
11
12
13
14 | 语法:
<table border="1px" width="" height="" bgcolor="" align="">
<tr>
<td>需要显示的内容</td>
</tr>
</table>
1.解释说明
table标签代表整个表格
tr标签代表是表格中的一行
td标签就是一行中的一个单元格
2.注意点
表格标签有一个边框属性, 这个属性决定了边框的宽度. 默认情况下这个属性的值是0, 所以看不到边框
表格标签和列表标签一样, 它是一个组合标签, 所以table/tr/td要么一起出现, 要么一起不出现, 不会单个出现
tr定义在table里面, td定义在tr里面
|
2.表格中的属性
3.合并单元格【重点】
- 删除要合并的单元格，只留一个(最前方)
- 设置colspan或者rowspan属性，几个合并，值就是几
4.其它标签
1
2
3
4
5
6
7
8
9
10
11
12
13
14 | <table>
<caption>表格标题</caption>
<tr>
<th>第一列的标题</th>
<th>第二列的标题</th>
<th>第三列的标题</th>
</tr>
...
</table>
1.caption表格标题
在表格标签中提供了一个标签专门用来设置表格的标题, 这个标签叫做caption. 只要将标题写在caption标签中, 那么标题就会自动相对于表格的宽度居中
2.th列标题
在表格标签中提供了一个标签专门用来存储每一列的标题, 这个标签叫做th标签, 只要将当前列的标题存储在这个标签中就会自动居中+加粗文字. 到此为止我们就发现, 其实表格中有两种单元格, 一种是td, 一种是th. td是专门用来存储数据的, th是专门用来存储当前列的标题的
|
5.表格的完整结构[了解]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23 | <table>
<caption>表格的标题</caption>
<thead>
<tr>
<th>每一列的标题</th>
</tr>
</thead>
<tbody>
<tr>
<td>数据</td>
</tr>
</tbody>
<tfoot>
<tr>
<td>数据</td>
</tr>
</tfoot>
</table>
caption作用: 指定表格的标题
thead作用: 指定表格的表头信息
tbody作用: 指定表格的主体信息
tfoot作用: 指定表格的附加信息
|
6.表格容易错的地方
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22 | <body>
<table>
<tr></tr> <!--不算规范的表格, 就算是一行一列, td是不能少的-->
</table>
<table>
<tr><td></td></tr> <!--这才是一行一列-->
</table>
<table> <!--不要这么写,tr定义在table里面的, tr里面只放td; td里面才放内容-->
哈哈
<tr>
哈哈
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
</body>
|
4.3 思路分析
- 创建8行6列的表格
- 创建表格的标题(caption), 嵌套h2
- 第一行: 设置背景色, 用th
- 第二行~8行: 填充内容, 设置居中
4.4 代码实现
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133 | <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<!--
- 创建8行6列的表格
- 创建表格的标题(caption), 嵌套h2
- 第一行: 设置背景色, 用th
- 第二行~8行: 填充内容, 设置居中
-->
<!-- table>tr*8>td*6 tab-->
<table border="1px" width="800px" align="center">
<caption><h1>今日小说排行榜</h1></caption>
<tr bgcolor="#F1F1F1">
<th>排名</th>
<th>关键词</th>
<th>趋势</th>
<th>今日搜索</th>
<th>最近七日</th>
<th>相关链接</th>
</tr>
<tr align="center">
<td>1</td>
<td>修罗武神</td>
<td>
<img src="../img/up.jpg">
</td>
<td>2704</td>
<td>167878</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center">
<td>1</td>
<td>修罗武神</td>
<td>
<img src="../img/up.jpg">
</td>
<td>2704</td>
<td>167878</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center">
<td>1</td>
<td>修罗武神</td>
<td>
<img src="../img/up.jpg">
</td>
<td>2704</td>
<td>167878</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center">
<td>1</td>
<td>修罗武神</td>
<td>
<img src="../img/up.jpg">
</td>
<td>2704</td>
<td>167878</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center">
<td>1</td>
<td>修罗武神</td>
<td>
<img src="../img/down.jpg">
</td>
<td>2704</td>
<td>167878</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center">
<td>1</td>
<td>修罗武神</td>
<td>
<img src="../img/up.jpg">
</td>
<td>2704</td>
<td>167878</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
<tr align="center">
<td>1</td>
<td>修罗武神</td>
<td>
<img src="../img/down.jpg">
</td>
<td>2704</td>
<td>167878</td>
<td>
<a href="#">贴吧</a>
<a href="#">图片</a>
<a href="#">百科</a>
</td>
</tr>
</table>
</body>
</html>
|