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

Home

Web Front-end

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>

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

Statement

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

HTML: The Structure, CSS: The Style, JavaScript: The BehaviorApr 18, 2025 am 12:09 AM

The roles of HTML, CSS and JavaScript in web development are: 1. HTML defines the web page structure, 2. CSS controls the web page style, and 3. JavaScript adds dynamic behavior. Together, they build the framework, aesthetics and interactivity of modern websites.

The Future of HTML: Evolution and Trends in Web DesignApr 17, 2025 am 12:12 AM

The future of HTML is full of infinite possibilities. 1) New features and standards will include more semantic tags and the popularity of WebComponents. 2) The web design trend will continue to develop towards responsive and accessible design. 3) Performance optimization will improve the user experience through responsive image loading and lazy loading technologies.

HTML vs. CSS vs. JavaScript: A Comparative OverviewApr 16, 2025 am 12:04 AM

The roles of HTML, CSS and JavaScript in web development are: HTML is responsible for content structure, CSS is responsible for style, and JavaScript is responsible for dynamic behavior. 1. HTML defines the web page structure and content through tags to ensure semantics. 2. CSS controls the web page style through selectors and attributes to make it beautiful and easy to read. 3. JavaScript controls web page behavior through scripts to achieve dynamic and interactive functions.

HTML: Is It a Programming Language or Something Else?Apr 15, 2025 am 12:13 AM

HTMLisnotaprogramminglanguage;itisamarkuplanguage.1)HTMLstructuresandformatswebcontentusingtags.2)ItworkswithCSSforstylingandJavaScriptforinteractivity,enhancingwebdevelopment.

HTML: Building the Structure of Web PagesApr 14, 2025 am 12:14 AM

HTML is the cornerstone of building web page structure. 1. HTML defines the content structure and semantics, and uses, etc. tags. 2. Provide semantic markers, such as, etc., to improve SEO effect. 3. To realize user interaction through tags, pay attention to form verification. 4. Use advanced elements such as, combined with JavaScript to achieve dynamic effects. 5. Common errors include unclosed labels and unquoted attribute values, and verification tools are required. 6. Optimization strategies include reducing HTTP requests, compressing HTML, using semantic tags, etc.

From Text to Websites: The Power of HTMLApr 13, 2025 am 12:07 AM

HTML is a language used to build web pages, defining web page structure and content through tags and attributes. 1) HTML organizes document structure through tags, such as,. 2) The browser parses HTML to build the DOM and renders the web page. 3) New features of HTML5, such as, enhance multimedia functions. 4) Common errors include unclosed labels and unquoted attribute values. 5) Optimization suggestions include using semantic tags and reducing file size.

Understanding HTML, CSS, and JavaScript: A Beginner's GuideApr 12, 2025 am 12:02 AM

WebdevelopmentreliesonHTML,CSS,andJavaScript:1)HTMLstructurescontent,2)CSSstylesit,and3)JavaScriptaddsinteractivity,formingthebasisofmodernwebexperiences.

The Role of HTML: Structuring Web ContentApr 11, 2025 am 12:12 AM

The role of HTML is to define the structure and content of a web page through tags and attributes. 1. HTML organizes content through tags such as , making it easy to read and understand. 2. Use semantic tags such as, etc. to enhance accessibility and SEO. 3. Optimizing HTML code can improve web page loading speed and user experience.

See all articles

Hot AI Tools

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress images for free

Clothoff.io

AI clothes remover

AI Hentai Generator

Generate AI Hentai for free.

Hot Article

R.E.P.O. Energy Crystals Explained and What They Do (Yellow Crystal)

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Best Graphic Settings

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Seashell Riddle Solution

3 weeks agoByDDD

What's New in Windows 11 KB5054979 & How to Fix Update Issues

2 weeks agoByDDD

Will R.E.P.O. Have Crossplay?

1 months agoBy尊渡假赌尊渡假赌尊渡假赌

Hot Tools

Notepad++7.3.1

Easy-to-use and free code editor

ZendStudio 13.5.1 Mac

Powerful PHP integrated development environment

VSCode Windows 64-bit Download

A free and powerful IDE editor launched by Microsoft

MantisBT

Mantis is an easy-to-deploy web-based defect tracking tool designed to aid in product defect tracking. It requires PHP, MySQL and a web server. Check out our demo and hosting services.

SecLists

SecLists is the ultimate security tester's companion. It is a collection of various types of lists that are frequently used during security assessments, all in one place. SecLists helps make security testing more efficient and productive by conveniently providing all the lists a security tester might need. List types include usernames, passwords, URLs, fuzzing payloads, sensitive data patterns, web shells, and more. The tester can simply pull this repository onto a new test machine and he will have access to every type of list he needs.

Hot Topics

Where is the login entrance for gmail email?

7546

CakePHP Tutorial

1382

What is the format of the account name of steam

win11 activation key permanent

nyt connections hints and answers