<span role="heading" aria-level="2">html 简单的table样式

大家好，又见面了，我是你们的朋友全栈君。

效果预览：

代码：

 1 <!DOCTYPE html>  2 <html>  3 <head>  4 <meta charset="utf-8">  5 <title>html 简单的table样式</title>  6 <style type="text/css">  7 /* gridtable */  8  table.gridtable {  9  font-family: verdana,arial,sans-serif;  10  font-size:11px;  11  color:#333333;  12  border-width: 1px;  13  border-color: #666666;  14  border-collapse: collapse;  15 }  16  table.gridtable th {  17  border-width: 1px;  18  padding: 8px;  19  border-style: solid;  20  border-color: #666666;  21  background-color: #dedede;  22 }  23  table.gridtable td {  24  border-width: 1px;  25  padding: 8px;  26  border-style: solid;  27  border-color: #666666;  28  background-color: #ffffff;  29 }  30 /* /gridtable */  31  32 /* imagetable */  33  table.imagetable {  34  font-family: verdana,arial,sans-serif;  35  font-size:11px;  36  color:#333333;  37  border-width: 1px;  38  border-color: #999999;  39  border-collapse: collapse;  40 }  41  table.imagetable th {  42  background:#b5cfd2 url('cell-blue.jpg');  43  border-width: 1px;  44  padding: 8px;  45  border-style: solid;  46  border-color: #999999;  47 }  48  table.imagetable td {  49  background:#dcddc0 url('cell-grey.jpg');  50  border-width: 1px;  51  padding: 8px;  52  border-style: solid;  53  border-color: #999999;  54 }  55 /* /imagetable */  56 /* altrowstable */  57  58  table.altrowstable {  59  font-family: verdana,arial,sans-serif;  60  font-size:11px;  61  color:#333333;  62  border-width: 1px;  63  border-color: #a9c6c9;  64  border-collapse: collapse;  65 }  66  table.altrowstable th {  67  border-width: 1px;  68  padding: 8px;  69  border-style: solid;  70  border-color: #a9c6c9;  71 }  72  table.altrowstable td {  73  border-width: 1px;  74  padding: 8px;  75  border-style: solid;  76  border-color: #a9c6c9;  77 }  78  .oddrowcolor{  79  background-color:#d4e3e5;  80 }  81  .evenrowcolor{  82  background-color:#c3dde0;  83 }  84 /* /altrowstable */  85  86 /* hovertable */  87  table.hovertable {  88  font-family: verdana,arial,sans-serif;  89  font-size:11px;  90  color:#333333;  91  border-width: 1px;  92  border-color: #999999;  93  border-collapse: collapse;  94 }  95  table.hovertable th {  96  background-color:#c3dde0;  97  border-width: 1px;  98  padding: 8px;  99  border-style: solid; 100  border-color: #a9c6c9; 101 } 102  table.hovertable tr { 103  background-color:#d4e3e5; 104 } 105  table.hovertable td { 106  border-width: 1px; 107  padding: 8px; 108  border-style: solid; 109  border-color: #a9c6c9; 110 } 111 /* /hovertable */ 112 113 </style> 114 </head> 115 <body> 116 117 <h2>table样式1:单像素边框CSS表格</h2> 118 <table class="gridtable"> 119 <tr> 120 <th>Info Header 1</th> 121 <th>Info Header 2</th> 122 <th>Info Header 3</th> 123 </tr> 124 <tr> 125 <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> 126 </tr> 127 <tr> 128 <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> 129 </tr> 130 </table> 131 132 <h2>table样式2:带背景图的CSS样式表格</h2> 133 <table class="imagetable"> 134 <tr> 135 <th>Info Header 1</th> 136 <th>Info Header 2</th> 137 <th>Info Header 3</th> 138 </tr> 139 <tr> 140 <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> 141 </tr> 142 <tr> 143 <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> 144 </tr> 145 </table> 146 147 <h2>table样式3:自动换整行颜色的CSS样式表格（需要用到JS）</h2> 148 <table class="altrowstable" id="alternatecolor"> 149 <tr> 150 <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> 151 </tr> 152 <tr> 153 <td>Text 1A</td><td>Text 1B</td><td>Text 1C</td> 154 </tr> 155 <tr> 156 <td>Text 2A</td><td>Text 2B</td><td>Text 2C</td> 157 </tr> 158 </tr> 159 <tr> 160 <td>Text 3A</td><td>Text 3B</td><td>Text 3C</td> 161 </tr> 162 <tr> 163 <td>Text 4A</td><td>Text 4B</td><td>Text 4C</td> 164 </tr> 165 <tr> 166 <td>Text 5A</td><td>Text 5B</td><td>Text 5C</td> 167 </tr> 168 </table> 169 170 171 <h2>table样式4:鼠标悬停高亮的CSS样式表格 (需要JS)</h2> 172 <table class="hovertable"> 173 <tr> 174 <th>Info Header 1</th><th>Info Header 2</th><th>Info Header 3</th> 175 </tr> 176 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 177 <td>Item 1A</td><td>Item 1B</td><td>Item 1C</td> 178 </tr> 179 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 180 <td>Item 2A</td><td>Item 2B</td><td>Item 2C</td> 181 </tr> 182 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 183 <td>Item 3A</td><td>Item 3B</td><td>Item 3C</td> 184 </tr> 185 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 186 <td>Item 4A</td><td>Item 4B</td><td>Item 4C</td> 187 </tr> 188 <tr onmouseover="this.style.backgroundColor='#ffff66';" onmouseout="this.style.backgroundColor='#d4e3e5';"> 189 <td>Item 5A</td><td>Item 5B</td><td>Item 5C</td> 190 </tr> 191 </table> 192 193 <script type="text/javascript"> 194 function altRows(id){ 195 if(document.getElementsByTagName){ 196 197 var table = document.getElementById(id); 198 var rows = table.getElementsByTagName("tr"); 199 200 for(i = 0; i < rows.length; i++){ 201 if(i % 2 == 0){ 202  rows[i].className = "evenrowcolor"; 203  }else{ 204  rows[i].className = "oddrowcolor"; 205  } 206  } 207  } 208  } 209 210  window.onload=function(){ 211  altRows('alternatecolor'); 212  } 213 </script> 214 </body> 215 </html>