HTML系列（八）：表格_html/css_WEB-ITnose-html tutorial-php.cn

Rumah

hujung hadapan web

html tutorial

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>

Salin selepas log masuk

四、不规则表格

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>

Salin selepas log masuk

五、几种常见表格设计

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>

Salin selepas log masuk

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>

Salin selepas log masuk

基本语法： <table> <tr> <td>单元格内文字</td> <td>单元格内文字</td> ...... </tr> <tr> <td>单元格内文字</td> <td>单元格内文字</td> ...... </tr> ......</table> Salin selepas log masuk 示例代码： 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> Salin selepas log masuk 二、让表格没有凹凸感没有样式的情况下，表格边框是凹凸的，可以使用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> Salin selepas log masuk 三、添加表头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> Salin selepas log masuk 为了更进一步区分表头与内容，对表格进行样式设计，顺便添加

基本语法：

<table>    <tr>        <td>单元格内文字</td>        <td>单元格内文字</td> ...... </tr>        <tr>        <td>单元格内文字</td>        <td>单元格内文字</td> ...... </tr> ......</table>

Salin selepas log masuk

示例代码：

 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>

Salin selepas log masuk

二、让表格没有凹凸感

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

Salin selepas log masuk

三、添加表头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>

Salin selepas log masuk

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

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Di mana untuk mencari kad kunci kawalan kren di atomfall

3 minggu yang lalu By DDD

Penjimatan di R.E.P.O. Dijelaskan (dan simpan fail)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows - Cara Mencari Orang Panda

4 minggu yang lalu By DDD

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7563

Tutorial CakePHP

1385

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Apakah tujuan & lt; kemajuan & gt; unsur? Mar 21, 2025 pm 12:34 PM

Artikel ini membincangkan html & lt; kemajuan & gt; elemen, tujuan, gaya, dan perbezaan dari & lt; meter & gt; elemen. Tumpuan utama adalah menggunakan & lt; kemajuan & gt; untuk menyelesaikan tugas dan & lt; meter & gt; untuk stati

Apakah tujuan & lt; DATALIST & GT; unsur? Mar 21, 2025 pm 12:33 PM

Artikel ini membincangkan html & lt; datalist & gt; elemen, yang meningkatkan bentuk dengan menyediakan cadangan autokomplete, meningkatkan pengalaman pengguna dan mengurangkan kesilapan. Kira -kira: 159

Apakah tujuan & lt; meter & gt; unsur? Mar 21, 2025 pm 12:35 PM

Artikel ini membincangkan html & lt; meter & gt; elemen, digunakan untuk memaparkan nilai skalar atau pecahan dalam julat, dan aplikasi umum dalam pembangunan web. Ia membezakan & lt; meter & gt; dari & lt; kemajuan & gt; dan Ex

Adakah HTML mudah belajar untuk pemula? Apr 07, 2025 am 12:11 AM

HTML sesuai untuk pemula kerana mudah dan mudah dipelajari dan dapat melihat hasilnya dengan cepat. 1) Keluk pembelajaran HTML adalah lancar dan mudah dimulakan. 2) Hanya menguasai tag asas untuk mula membuat laman web. 3) Fleksibiliti yang tinggi dan boleh digunakan dalam kombinasi dengan CSS dan JavaScript. 4) Sumber pembelajaran yang kaya dan alat moden menyokong proses pembelajaran.

Apakah tag meta viewport? Mengapa penting untuk reka bentuk responsif? Mar 20, 2025 pm 05:56 PM

Artikel ini membincangkan tag Meta Viewport, penting untuk reka bentuk web responsif pada peranti mudah alih. Ia menerangkan bagaimana penggunaan yang betul memastikan skala kandungan yang optimum dan interaksi pengguna, sementara penyalahgunaan boleh membawa kepada isu reka bentuk dan kebolehaksesan.

Apakah tujuan & lt; iframe & gt; Tag? Apakah pertimbangan keselamatan semasa menggunakannya? Mar 20, 2025 pm 06:05 PM

Artikel ini membincangkan & lt; iframe & gt; Tujuan TAG dalam membenamkan kandungan luaran ke dalam halaman web, kegunaan umum, risiko keselamatan, dan alternatif seperti tag objek dan API.

Peranan HTML, CSS, dan JavaScript: Tanggungjawab Teras Apr 08, 2025 pm 07:05 PM

HTML mentakrifkan struktur web, CSS bertanggungjawab untuk gaya dan susun atur, dan JavaScript memberikan interaksi dinamik. Ketiga melaksanakan tugas mereka dalam pembangunan web dan bersama -sama membina laman web yang berwarna -warni.

Apakah contoh tag permulaan dalam html? Apr 06, 2025 am 12:04 AM

Anexampleofastartartingtaginhtmlis, yangbeginsaparagraph.startingtagsareessentialinhtmlasttheyinitiateelements, definetheirtypes, andarecrucialforstructuringwebpagesandconstructionthedom.

See all articles