码迷，mamicode.com
首页 > Web开发 > 详细

HTML系列（八）：表格

时间：2016-03-06 21:00:18      阅读：414      评论：0      收藏：0      [点我收藏+]

标签：

一、基本表格：

     表格标记<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

 

HTML系列（八）：表格

标签：

原文地址：http://www.cnblogs.com/csxiaoyu/p/5248397.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！