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>
View Code

 

二、让表格没有凹凸感

     没有样式的情况下，表格边框是凹凸的，可以使用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>
View Code

     为了更进一步区分表头与内容，对表格进行样式设计，顺便添加<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>
View Code

 

四、不规则表格

     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>
View Code

 

五、几种常见表格设计

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>
View Code

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>&nbsp;</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>
View Code

 

posted @ 2016-03-06 20:12  Haydee  阅读(354)  评论(1)  编辑  收藏  举报