一、基本表格：
表格标记<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.邓紫棋</td>
64 </tr>
65 <tr>
66 <th>04</th>
67 <td>当你老了</td>
68 <td>莫文蔚</td>
69 </tr>
70 </tbody>
71 <tfoot>
72 <tr>
73 <th>序号</th>
74 <th>歌曲名</th>
75 <th>演唱</th>
76 </tr>
77 </tfoot>
78 </table>
79 <body>
80 </body>
81 </html>
四、不规则表格
colspan 属性规定单元格可横跨的列数。rowspan 属性规定单元格可横跨的行数。
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 </style>
33 </head>
34 <body>
35 <table cellspacing="0">
36 <thead>
37 <tr>
38 <th>序号</th>
39 <th>歌曲名</th>
40 <th>演唱</th>
41 </tr>
42 </thead>
43 <tbody>
44 <tr>
45 <th>01</th>
46 <td>小苹果</td>
47 <td>筷子兄弟</td>
48 </tr>
49 <tr>
50 <th>02</th>
51 <td>匆匆那年</td>
52 <td colspan="1" rowspan="2">王菲</td>
53 </tr>
54 <tr>
55 <th>03</th>
56 <td>致青春</td>
57 </tr>
58 <tr>
59 <th>04</th>
60 <td>喜欢你</td>
61 <td>G.E.M.邓紫棋</td>
62 </tr>
63 <tr>
64 <th>05</th>
65 <td>当你老了</td>
66 <td>莫文蔚</td>
67 </tr>
68 <tr>
69 <th>06</th>
70 <td colspan="2" rowspan="1">群星演唱最炫小苹果</td>
71 </tr>
72 </tbody>
73 </table>
74 <body>
75 </body>
76 </html>
五、几种常见表格设计
1、圆角表格
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
11 </head>
12 <body>
13 <style>
14
15 body {
16 width: 600px;
17 margin: 40px auto;
18 font-family: 'trebuchet MS', 'Lucida sans', Arial;
19 font-size: 14px;
20 color: #444;
21 }
22
23 table {
24 *border-collapse: collapse; /* IE7 and lower */
25 border-spacing: 0;
26 width: 100%;
27 }
28
29 .bordered {
30 border: solid #ccc 1px;
31 -moz-border-radius: 6px;
32 -webkit-border-radius: 6px;
33 border-radius: 6px;
34 -webkit-box-shadow: 0 1px 1px #ccc;
35 -moz-box-shadow: 0 1px 1px #ccc;
36 box-shadow: 0 1px 1px #ccc;
37 }
38
39 .bordered tr:hover {
40 background: #fbf8e9;
41 -o-transition: all 0.1s ease-in-out;
42 -webkit-transition: all 0.1s ease-in-out;
43 -moz-transition: all 0.1s ease-in-out;
44 -ms-transition: all 0.1s ease-in-out;
45 transition: all 0.1s ease-in-out;
46 }
47
48 .bordered td, .bordered th {
49 border-left: 1px solid #ccc;
50 border-top: 1px solid #ccc;
51 padding: 10px;
52 text-align: left;
53 }
54
55 .bordered th {
56 background-color: #dce9f9;
57 background-image: -webkit-gradient(linear, left top, left bottom, from(#ebf3fc), to(#dce9f9));
58 background-image: -webkit-linear-gradient(top, #ebf3fc, #dce9f9);
59 background-image: -moz-linear-gradient(top, #ebf3fc, #dce9f9);
60 background-image: -ms-linear-gradient(top, #ebf3fc, #dce9f9);
61 background-image: -o-linear-gradient(top, #ebf3fc, #dce9f9);
62 background-image: linear-gradient(top, #ebf3fc, #dce9f9);
63 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
64 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
65 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
66 border-top: none;
67 text-shadow: 0 1px 0 rgba(255,255,255,.5);
68 }
69
70 .bordered td:first-child, .bordered th:first-child {
71 border-left: none;
72 }
73
74 .bordered th:first-child {
75 -moz-border-radius: 6px 0 0 0;
76 -webkit-border-radius: 6px 0 0 0;
77 border-radius: 6px 0 0 0;
78 }
79
80 .bordered th:last-child {
81 -moz-border-radius: 0 6px 0 0;
82 -webkit-border-radius: 0 6px 0 0;
83 border-radius: 0 6px 0 0;
84 }
85
86 .bordered th:only-child{
87 -moz-border-radius: 6px 6px 0 0;
88 -webkit-border-radius: 6px 6px 0 0;
89 border-radius: 6px 6px 0 0;
90 }
91
92 .bordered tr:last-child td:first-child {
93 -moz-border-radius: 0 0 0 6px;
94 -webkit-border-radius: 0 0 0 6px;
95 border-radius: 0 0 0 6px;
96 }
97
98 .bordered tr:last-child td:last-child {
99 -moz-border-radius: 0 0 6px 0;
100 -webkit-border-radius: 0 0 6px 0;
101 border-radius: 0 0 6px 0;
102 }
103
104 </style>
105 <table class="bordered">
106 <caption>金曲排行</caption>
107 <thead>
108 <tr>
109 <th>序号</th>
110 <th>歌曲名</th>
111 <th>演唱</th>
112 <th>人气</th>
113 </tr>
114 </thead>
115 <tbody>
116 <tr>
117 <th>01</th>
118 <td>小苹果</td>
119 <td>筷子兄弟</td>
120 <td>120093</td>
121 </tr>
122 <tr>
123 <th>02</th>
124 <td>匆匆那年</td>
125 <td colspan="1" rowspan="2">王菲</td>
126 <td colspan="1" rowspan="2">38490</td>
127 </tr>
128 <tr>
129 <th>03</th>
130 <td>致青春</td>
131 </tr>
132 <tr>
133 <th>04</th>
134 <td>喜欢你</td>
135 <td>G.E.M.邓紫棋</td>
136 <td>37449</td>
137 </tr>
138 <tr>
139 <th>05</th>
140 <td>当你老了</td>
141 <td>莫文蔚</td>
142 <td>93947</td>
143 </tr>
144 <tr>
145 <th>06</th>
146 <td colspan="2" rowspan="1">群星演唱最炫小苹果</td>
147 <td>93984</td>
148 </tr>
149 </tbody>
150 </table>
151 <body>
152 </body>
153 </html>
2、条纹表格
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
11 </head>
12 <body>
13 <style>
14 body {
15 width: 600px;
16 margin: 40px auto;
17 font-family: 'trebuchet MS', 'Lucida sans', Arial;
18 font-size: 14px;
19 color: #444;
20 }
21
22 table {
23 *border-collapse: collapse; /* IE7 and lower */
24 border-spacing: 0;
25 width: 100%;
26 }
27
28 .zebra td, .zebra th {
29 padding: 10px;
30 border-bottom: 1px solid #f2f2f2;
31 }
32
33 .zebra tbody tr:nth-child(even) {
34 background: #f5f5f5;
35 -webkit-box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
36 -moz-box-shadow:0 1px 0 rgba(255,255,255,.8) inset;
37 box-shadow: 0 1px 0 rgba(255,255,255,.8) inset;
38 }
39
40 .zebra th {
41 text-align: left;
42 text-shadow: 0 1px 0 rgba(255,255,255,.5);
43 border-bottom: 1px solid #ccc;
44 background-color: #eee;
45 background-image: -webkit-gradient(linear, left top, left bottom, from(#f5f5f5), to(#eee));
46 background-image: -webkit-linear-gradient(top, #f5f5f5, #eee);
47 background-image: -moz-linear-gradient(top, #f5f5f5, #eee);
48 background-image: -ms-linear-gradient(top, #f5f5f5, #eee);
49 background-image: -o-linear-gradient(top, #f5f5f5, #eee);
50 background-image: linear-gradient(top, #f5f5f5, #eee);
51 }
52
53 .zebra th:first-child {
54 -moz-border-radius: 6px 0 0 0;
55 -webkit-border-radius: 6px 0 0 0;
56 border-radius: 6px 0 0 0;
57 }
58
59 .zebra th:last-child {
60 -moz-border-radius: 0 6px 0 0;
61 -webkit-border-radius: 0 6px 0 0;
62 border-radius: 0 6px 0 0;
63 }
64
65 .zebra th:only-child{
66 -moz-border-radius: 6px 6px 0 0;
67 -webkit-border-radius: 6px 6px 0 0;
68 border-radius: 6px 6px 0 0;
69 }
70
71 .zebra tfoot td {
72 border-bottom: 0;
73 border-top: 1px solid #fff;
74 background-color: #f1f1f1;
75 }
76
77 .zebra tfoot td:first-child {
78 -moz-border-radius: 0 0 0 6px;
79 -webkit-border-radius: 0 0 0 6px;
80 border-radius: 0 0 0 6px;
81 }
82
83 .zebra tfoot td:last-child {
84 -moz-border-radius: 0 0 6px 0;
85 -webkit-border-radius: 0 0 6px 0;
86 border-radius: 0 0 6px 0;
87 }
88
89 .zebra tfoot td:only-child{
90 -moz-border-radius: 0 0 6px 6px;
91 -webkit-border-radius: 0 0 6px 6px
92 border-radius: 0 0 6px 6px
93 }
94
95
96 </style>
97 <table class="zebra">
98 <caption>金曲排行</caption>
99 <thead>
100 <tr>
101 <th>序号</th>
102 <th>歌曲名</th>
103 <th>演唱</th>
104 <th>人气</th>
105 </tr>
106 </thead>
107 <tfoot>
108 <tr>
109 <td> </td>
110 <td></td>
111 <td></td>
112 <td></td>
113 </tr>
114 </tfoot>
115 <tbody>
116 <tr>
117 <td>01</td>
118 <td>小苹果</td>
119 <td>筷子兄弟</td>
120 <td>1200903</td>
121 </tr>
122 <tr>
123 <td>02</td>
124 <td>匆匆那年</td>
125 <td>王菲</td>
126 <td>138490</td>
127 </tr>
128 <tr>
129 <td>03</td>
130 <td>致青春</td>
131 <td>王菲</td>
132 <td>138489</td>
133 </tr>
134 <tr>
135 <td>04</td>
136 <td>喜欢你</td>
137 <td>G.E.M.邓紫棋</td>
138 <td>137449</td>
139 </tr>
140 <tr>
141 <td>05</td>
142 <td>当你老了</td>
143 <td>莫文蔚</td>
144 <td>93947</td>
145 </tr>
146 <tr>
147 <td>06</td>
148 <td colspan="2" rowspan="1">群星演唱最炫小苹果</td>
149 <td>93984</td>
150 </tr>
151 </tbody>
152 </table>
153 <body>
154 </body>
155 </html>