你的位置:首页 > 网页设计

[网页设计]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