,单元格标记| 基本语法： <table> <tr> <td>单元格内文字</td> <td>单元格内文字</td> ...... </tr> <tr> <td>单元格内文字</td> <td>单元格内文字</td> ...... </tr> ......</table> Copy after login 示例代码： 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> Copy after login 二、让表格没有凹凸感 没有样式的情况下，表格边框是凹凸的，可以使用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> Copy after login 三、添加表头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> Copy after login 为了更进一步区分表头与内容，对表格进行样式设计，顺便添加, |
标签为表格完善结构，更进一步区别不同部分：
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>Copy after login
四、不规则表格
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>Copy after login
五、几种常见表格设计
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>Copy after login
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>Copy after login
What to do if an error occurs in the script of the current page
How to open the registry
Introduction to the meaning of cloud download windows
How to configure Tomcat environment variables
How to start svn service
The difference between UCOS and linux
Solution to missing xlive.dll
What format is png
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
