HTML系列：表格
Posted Haydee
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML系列：表格相关的知识，希望对你有一定的参考价值。
一、基本表格：
表格标记<table>,行标记<tr>,单元格标记<td>
基本语法：
<table>
<tr>
<td>单元格内文字</td>
<td>单元格内文字</td>
......
</tr>
<tr>
<td>单元格内文字</td>
<td>单元格内文字</td>
......
</tr>
......
</table>
示例代码：
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <meta charset="UTF-8"/>
5 <title>第9章</title>
6 </head>
7 <style type="text/css">
8 body {
9 font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
10 color: #4f6b72;
11 background: #E6EAE9;
12 }
13
14 a {
15 color: #c75f3e;
16 }
17
18 #mytable {
19 width: 700px;
20 padding: 0;
21 margin: 0;
22 }
23
24 caption {
25 padding: 0 0 5px 0;
26 width: 700px;
27 font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
28 text-align: right;
29 }
30
31 th {
32 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
33 color: #4f6b72;
34 border-right: 1px solid #C1DAD7;
35 border-bottom: 1px solid #C1DAD7;
36 border-top: 1px solid #C1DAD7;
37 letter-spacing: 2px;
38 text-transform: uppercase;
39 text-align: left;
40 padding: 6px 6px 6px 12px;
41 background: #CAE8EA url(images/bg_header.jpg) no-repeat;
42 }
43
44 th.nobg {
45 border-top: 0;
46 border-left: 0;
47 border-right: 1px solid #C1DAD7;
48 background: none;
49 }
50
51 td {
52 border-right: 1px solid #C1DAD7;
53 border-bottom: 1px solid #C1DAD7;
54 background: #fff;
55 font-size: 11px;
56 padding: 6px 6px 6px 12px;
57 color: #4f6b72;
58 }
59
60 td.alt {
61 background: #F5FAFA;
62 color: #797268;
63 }
64
65 th.spec {
66 border-left: 1px solid #C1DAD7;
67 border-top: 0;
68 background: #fff url(images/bullet1.gif) no-repeat;
69 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
70 }
71
72 th.specalt {
73 border-left: 1px solid #C1DAD7;
74 border-top: 0;
75 background: #f5fafa url(images/bullet2.gif) no-repeat;
76 font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
77 color: #797268;
78 }
79 </style>
80 <body>
81 <table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">
82 <caption>The technical specifications of the Apple PowerMac G5 series</caption>
83 <tr>
84 <th scope="col" abbr="Configurations">设置</th>
85 <th scope="col" abbr="Dual 1.8">1.8GHz</th>
86 <th scope="col" abbr="Dual 2">2GHz</th>
87 <th scope="col" abbr="Dual 2.5">2.5GHz</th>
88 </tr>
89 <tr>
90 <th scope="row" abbr="Model" class="spec">lipeng</th>
91 <td>M9454LL/A</td>
92 <td>M9455LL/A</td>
93 <td>M9457LL/A</td>
94 </tr>
95 <tr>
96 <th scope="row" abbr="G5 Processor" class="specalt">mapabc</th>
97 <td class="alt">Dual 1.8GHz PowerPC G5</td>
98 <td class="alt">Dual 2GHz PowerPC G5</td>
99 <td class="alt">Dual 2.5GHz PowerPC G5</td>
100 </tr>
101 <tr>
102 <th scope="row" abbr="Frontside bus" class="spec">Lennvo</th>
103 <td>900MHz per processor</td>
104 <td>1GHz per processor</td>
105 <td>1.25GHz per processor</td>
106 </tr>
107 <tr>
108 <th scope="row" abbr="L2 Cache" class="specalt">Black</th>
109 <td class="alt">512K per processor</td>
110 <td class="alt">512K per processor</td>
111 <td class="alt">512K per processor</td>
112 </tr>
113 </table>
114 </body>
115 </html>
二、让表格没有凹凸感
没有样式的情况下，表格边框是凹凸的，可以使用cellspacing和cellpadding来取消凹凸感。cellspacing是td与td之间的距离，而cellpadding是单元格内部内容与单元格边界之间的空白距离的大小。
例如：
1 <table border="1" cellpadding="0" cellspacing="0">
2 <tr>
3 <th>单元格内的标题</th>
4 <th>单元格内的标题</th>
5 </tr>
6 <tr>
7 <td>单元格内的文字</td>
8 <td>单元格内的文字</td>
9 </tr>
10 <tr>
11 <td>单元格内的文字</td>
12 <td>单元格内的文字</td>
13 </tr>
14 </table>
三、添加表头th
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
6 <meta content="yes" name="apple-mobile-web-app-capable" />
7 <meta content="black" name="apple-mobile-web-app-status-bar-style" />
8 <meta name="format-detection" content="telephone=no" />
9 <title>第9章</title>
10 </head>
11 <body>
12 <table cellspacing="0">
13 <tr>
14 <th>序号</th>
15 <th>歌曲名</th>
16 <th>演唱</th>
17 </tr>
18 <tr>
19 <th>01</th>
20 <td>小苹果</td>
21 <td>筷子兄弟</td>
22 </tr>
23 <tr>
24 <th>02</th>
25 <td>匆匆那年</td>
26 <td>王菲</td>
27 </tr>
28 <tr>
29 <th>03</th>
30 <td>喜欢你</td>
31 <td>G.E.M.邓紫棋</td>
32 </tr>
33 <tr>
34 <th>04</th>
35 <td>当你老了</td>
36 <td>莫文蔚</td>
37 </tr>
38 </table>
39 <body>
40 </body>
41 </html>
为了更进一步区分表头与内容，对表格进行样式设计，顺便添加<thead>,<tbody>,<tfoot>标签为表格完善结构，更进一步区别不同部分：
1 <!DOCTYPE html>
2 <html lang="zh-CN">
3 <head>
4 <meta charset="UTF-8">
5 <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
6 <meta content="yes" name="apple-mobile-web-app-capable" />
7 <meta content="black" name="apple-mobile-web-app-status-bar-style" />
8 <meta name="format-detection" content="telephone=no" />
9 <title>第9章</title>
10 <style type="text/css">
11 th {
12 font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
13 color: #4f6b72;
14 border-right: 1px solid #C1DAD7;
15 border-bottom: 1px solid #C1DAD7;
16 border-top: 1px solid #C1DAD7;
17 letter-spacing: 2px;
18 text-transform: uppercase;
19 text-align: left;
20 padding: 6px 6px 6px 12px;
21 background: #CAE8EA url(images/bg_header.jpg) no-repeat;
22 }
23
24 td {
25 border-right: 1px solid #C1DAD7;
26 border-bottom: 1px solid #C1DAD7;
27 background: #fff;
28 font-size: 11px;
29 padding: 6px 6px 6px 12px;
30 color: #4f6b72;
31 }
32 thead th {
33 color: red;
34 }
35 tfoot th {
36 color: blue;
37 }
38 </style>
39 </head>
40 <body>
41 <table cellspacing="0">
42 <thead>
43 <tr>
44 <th>序号</th>
45 <th>歌曲名</th>
46 <th>演唱</th>
47 </tr>
48 </thead>
49 <tbody>
50 <tr>
51 <th>01</th>
52 <td>小苹果</td>
53 <td>筷子兄弟</td>
54 </tr>
55 <tr>
56 <th>02</th>
57 <td>匆匆那年</td>
58 <td>王菲</td>
59 </tr>
60 <tr>
61 <th>03</th>
62 <td>喜欢你</td>
63 <td>G.E.M.邓紫棋</以上是关于HTML系列：表格的主要内容，如果未能解决你的问题，请参考以下文章