,单元格标记| 基本语法： <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> 登入後複製 为了更进一步区分表头与内容，对表格进行样式设计，顺便添加, |
标签为表格完善结构，更进一步区别不同部分：
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>登入後複製
