基本用法
在html中，使用<table>元素来表示表格。 表格需要多种元素同时使用。
<table>元素来创建表格。
<tr>元素表示行（tr是table row的意思）。
<td>元素表示每个单元格（td是 table data的意思）。
示例
|
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
|
<!DOCTYPE html><html> <head> <title>表格</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>表格</h1> <table> <tr> <td>Hello</td> <td>HTML</td> </tr> <tr> <td>java</td> <td>c#</td> </tr> <tr> <td>PHP</td> <td>Python</td> </tr> </table> </body></html> |
这个例子的表格有3行两列。
表格的标题
使用<th>表示表格的标题（th是table heading的意思）
|
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
|
<!DOCTYPE html><html> <head> <title>表格</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h1>表格</h1> <table> <tr> <th>课程</th> <th>主讲老师</th> </tr> <tr> <td>java</td> <td>马士兵</td> </tr> <tr> <td>PHP</td> <td>兄弟连</td> </tr> </table> </body></html> |
跨列
有时你需要将表格中的单元格跨越多个列。
可以使用<th>或<td>元素的colspan来表示所跨越的列数。
示例
|
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
|
<!DOCTYPE html><html> <head> <title>表格</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> table { border: none;} th, td { border: none; padding: 5px; 150px;} </style> </head> <body> <table> <tr> <th></th> <th>9点</th> <th>10点</th> <th>11点</th> <th>12点</th> </tr> <tr> <th>星期一</th> <td colspan="2">Java程序设计</td> <td>数据结构与算法</td> <td>编译原理</td> </tr> <tr> <th>星期二</th> <td colspan="3">软件工程</td> <td>Python程序设计</td> </tr> </table> </body></html> |
跨行
有时你需要将表格中的单元格跨越多行。
可以使用<th>或<td>元素的rowspan来表示所跨越的行数。
示例
|
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
|
<!DOCTYPE html><html> <head> <title>表格</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> table { border: none;} th, td { border: none; padding: 5px; 180px;} </style> </head> <body> <table> <tr> <th></th> <th>湖南卫视</th> <th>浙江卫视</th> <th>江苏卫视</th> </tr> <tr> <th>20：00 - 21：00</th> <td rowspan="2">我想和你唱:王源在这里等你(重播)</td> <td>奔跑吧</td> <td>幸福剧场:下一站,别离</td> </tr> <tr> <th>21：00 - 22：00</th> <td>跑男来了</td> <td>嗨,唱起来!</td> </tr> </table> </body></html> |
长表格
在html中，对于长表格的处理使用<thead>、<tbody>、<tfoot>3个元素。
|
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
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
|
<!DOCTYPE html><html> <head> <title>表格</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style type="text/css"> table { border: none;} thead th { border-bottom: 2px solid #444444; 120px;} tfoot td { border-top: 1px solid #444444;} </style> </head> <body> <table> <thead> <tr> <th>日期</th> <th>收入</th> <th>开支</th> </tr> </thead> <tbody> <tr> <th>2018-05-04</th> <td>250</td> <td>36</td> </tr> <tr> <th>2018-05-05</th> <td>285</td> <td>48</td> </tr> <tr> <th>2018-05-06</th> <td>260</td> <td>42</td> </tr> <tr> <th>2018-05-07</th> <td>290</td> <td>38</td> </tr> <tr> <th>2018-05-08</th> <td>310</td> <td>115</td> </tr> <tr> <th>2018-05-09</th> <td>168</td> <td>14</td> </tr> <tr> <th>2018-05-10</th> <td>226</td> <td>20</td> </tr> <tr> <th>2018-05-11</th> <td>253</td> <td>37</td> </tr> <tr> <th>2018-05-12</th> <td>294</td> <td>33</td> </tr> <tr> <th>2018-05-13</th> <td>216</td> <td>46</td> </tr> <tr> <th>2018-05-14</th> <td>244</td> <td>29</td> </tr> <tr> <th>2018-05-15</th> <td>297</td> <td>32</td> </tr> <tr> <th>2018-05-16</th> <td>328</td> <td>86</td> </tr> <tr> <th>2018-05-17</th> <td>215</td> <td>38</td> </tr> <tr> <th>2018-05-18</th> <td>254</td> <td>30</td> </tr> <tr> <th>2018-05-19</th> <td>256</td> <td>27</td> </tr> <tr> <th>2018-05-20</th> <td>311</td> <td>68</td> </tr> <tr> <th>2018-05-21</th> <td>212</td> <td>39</td> </tr> <tr> <th>2018-05-22</th> <td>234</td> <td>36</td> </tr> <tr> <th>2018-05-23</th> <td>221</td> <td>43</td> </tr> <tr> <th>2018-05-24</th> <td>259</td> <td>38</td> </tr> <tr> <th>2018-05-25</th> <td>246</td> <td>31</td> </tr> <tr> <th>2018-05-26</th> <td>248</td> <td>17</td> </tr> <tr> <th>2018-05-27</th> <td>229</td> <td>45</td> </tr> <tr> <th>2018-05-28</th> <td>263</td> <td>34</td> </tr> <tr> <th>2018-05-29</th> <td>258</td> <td>41</td> </tr> <tr> <th>2018-05-30</th> <td>283</td> <td>22</td> </tr> <tr> <th>2018-05-31</th> <td>256</td> <td>30</td> </tr> <tr> <th>2018-06-01</th> <td>278</td> <td>47</td> </tr> <tr> <th>2018-06-02</th> <td>251</td> <td>15</td> </tr> <tr> <th>2018-06-03</th> <td>129</td> <td>64</td> </tr> </tbody> <tfoot> <tr> <td></td> <td>7824</td> <td>1241</td> </tr> </tfoot> </table> </body></html> |