HTML系列（八）：表格_html/css_WEB-ITnose-html教程-PHP中文网

首页

web前端

html教程

HTML系列（八）：表格_html/css_WEB-ITnose

WBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWBOYWB

Jun 24, 2016 am 11:25 AM

一、基本表格：

表格标记

,行标记,单元格标记,,标签为表格完善结构，更进一步区别不同部分：

 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>

登录后复制

基本语法： <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> 登录后复制为了更进一步区分表头与内容，对表格进行样式设计，顺便添加

基本语法：

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

登录后复制

为了更进一步区分表头与内容，对表格进行样式设计，顺便添加

本站声明

本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn