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>

四、不规则表格

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>

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

Kenyataan

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

Artikel Berkaitan

HTML vs CSS vs JavaScript: Gambaran Keseluruhan PerbandinganApr 16, 2025 am 12:04 AM

Peranan HTML, CSS dan JavaScript dalam pembangunan web adalah: HTML bertanggungjawab untuk struktur kandungan, CSS bertanggungjawab untuk gaya, dan JavaScript bertanggungjawab untuk tingkah laku dinamik. 1. HTML mentakrifkan struktur laman web dan kandungan melalui tag untuk memastikan semantik. 2. CSS mengawal gaya laman web melalui pemilih dan atribut untuk menjadikannya cantik dan mudah dibaca. 3. JavaScript mengawal tingkah laku laman web melalui skrip untuk mencapai fungsi dinamik dan interaktif.

HTML: Adakah bahasa pengaturcaraan atau yang lain?Apr 15, 2025 am 12:13 AM

Htmlisnotaprogramminglanguage; itisamarkuplanguage.1) htmlstructuresandformatswebcontentusingtags.2) itworkswithcssforstylingandjavascriptforinteractivity, meningkatkan pembangunan semula.

HTML: Membina struktur laman webApr 14, 2025 am 12:14 AM

HTML adalah asas struktur laman web bangunan. 1. HTML mentakrifkan struktur kandungan dan semantik, dan penggunaan, dan sebagainya. 2. Menyediakan penanda semantik, seperti, dan sebagainya, untuk meningkatkan kesan SEO. 3. Untuk merealisasikan interaksi pengguna melalui tag, perhatikan pengesahan bentuk. 4. Gunakan elemen lanjutan seperti, digabungkan dengan JavaScript untuk mencapai kesan dinamik. 5. Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan, dan alat pengesahan diperlukan. 6. Strategi pengoptimuman termasuk mengurangkan permintaan HTTP, memampatkan HTML, menggunakan tag semantik, dll.

Dari teks ke laman web: Kekuatan HTMLApr 13, 2025 am 12:07 AM

HTML adalah bahasa yang digunakan untuk membina laman web, menentukan struktur laman web dan kandungan melalui tag dan atribut. 1) HTML menganjurkan struktur dokumen melalui tag, seperti,. 2) Penyemak imbas menghancurkan HTML untuk membina DOM dan menjadikan laman web. 3) Ciri -ciri baru HTML5, seperti, meningkatkan fungsi multimedia. 4) Kesilapan biasa termasuk label yang tidak terkawal dan nilai atribut yang tidak disebutkan. 5) Cadangan pengoptimuman termasuk menggunakan tag semantik dan mengurangkan saiz fail.

Memahami HTML, CSS, dan JavaScript: Panduan PemulaApr 12, 2025 am 12:02 AM

WebDevelopmentReliesOnhtml, CSS, andjavascript: 1) HtmlStructuresContent, 2) CSSStylesit, dan3) JavaScriptaddsInteractivity, Formingthebasisofmodernwebexperiences.

Peranan HTML: Penstrukturan Kandungan WebApr 11, 2025 am 12:12 AM

Peranan HTML adalah untuk menentukan struktur dan kandungan laman web melalui tag dan atribut. 1. HTML menganjurkan kandungan melalui tag seperti, menjadikannya mudah dibaca dan difahami. 2. Gunakan tag semantik seperti, dan lain -lain untuk meningkatkan kebolehcapaian dan SEO. 3. Mengoptimumkan kod HTML boleh meningkatkan kelajuan pemuatan laman web dan pengalaman pengguna.

HTML dan Kod: Melihat lebih dekat pada istilahApr 10, 2025 am 09:28 AM

Htmlisaspecifictypeofcodefocusedonstructuringwebcontent, manakala "kod" secara meluas ini

HTML, CSS, dan JavaScript: Alat penting untuk pemaju webApr 09, 2025 am 12:12 AM

HTML, CSS dan JavaScript adalah tiga tiang pembangunan web. 1. HTML mentakrifkan struktur laman web dan menggunakan tag seperti, dan sebagainya. 2. CSS mengawal gaya laman web, menggunakan pemilih dan atribut seperti warna, saiz font, dan lain-lain.

See all articles