今天发觉一个很好的表格CSS代码：
整体的CSS代码：
body {font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;background: #E6EAE9;}a {color: #c75f3e;}#mytable {width: 700px;padding: 0;margin: 0;}caption {padding: 0 0 5px 0;width: 700px; font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;text-align: right;}th {font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;border-top: 1px solid #C1DAD7;letter-spacing: 2px;text-transform: uppercase;text-align: left;padding: 6px 6px 6px 12px;background: #CAE8EA url(images/bg_header.jpg) no-repeat;}th.nobg {border-top: 0;border-left: 0;border-right: 1px solid #C1DAD7;background: none;}td {border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;background: #fff;padding: 6px 6px 6px 12px;color: #4f6b72;}td.alt {background: #F5FAFA;color: #797268;}th.spec {border-left: 1px solid #C1DAD7;border-top: 0;background: #fff url(images/bullet1.gif) no-repeat;font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;}th.specalt {border-left: 1px solid #C1DAD7;border-top: 0;background: #f5fafa url(images/bullet2.gif) no-repeat;font: bold 10px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #797268;}整体的表格代码：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"""><html xmlns=""><head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /><title>CSS Tables</title><link href="styles.css" rel="stylesheet" type="text/css" /></head><body><table id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series"><caption>Table 1: Power Mac G5 tech specs </caption> <tr><th scope="col" abbr="Configurations" class="nobg">Configurations</th><th scope="col" abbr="Dual 1.8">Dual 1.8GHz</th><th scope="col" abbr="Dual 2">Dual 2GHz</th><th scope="col" abbr="Dual 2.5">Dual 2.5GHz</th> </tr> <tr><th scope="row" abbr="Model" class="spec">Model</th><td>M9454LL/A</td><td>M9455LL/A</td><td>M9457LL/A</td> </tr> <tr><th scope="row" abbr="G5 Processor" class="specalt">G5 Processor</th><td class="alt">Dual 1.8GHz PowerPC G5</td><td class="alt">Dual 2GHz PowerPC G5</td><td class="alt">Dual 2.5GHz PowerPC G5</td> </tr> <tr><th scope="row" abbr="Frontside bus" class="spec">Frontside bus</th><td>900MHz per processor</td><td>1GHz per processor</td><td>1.25GHz per processor</td> </tr> <tr><th scope="row" abbr="L2 Cache" class="specalt">Level2 Cache</th><td class="alt">512K per processor</td><td class="alt">512K per processor</td><td class="alt">512K per processor</td> </tr></table><p><a href="styles.css">→ download stylesheet</a></p></body></html>我做了点改进，，使用了CSS选择器让奇数行，偶数行颜色不一样：.gradientTable {width: auto;padding: 0;border-spacing: 0px;}.gradientTable th {font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;color: #4f6b72;border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;border-top: 1px solid #C1DAD7;letter-spacing: 2px;text-transform: uppercase;text-align: left;padding: 6px 6px 6px 12px;background: #CAE8EA url(/images/bg_header.jpg) no-repeat;}.gradientTable th.nobg {border-top: 0;border-left: 0;border-right: 1px solid #C1DAD7;background: none;}.gradientTable td {border-right: 1px solid #C1DAD7;border-bottom: 1px solid #C1DAD7;font-size: 11px;padding: 6px 6px 6px 12px;color: #4f6b72;}.gradientTable tr:nth-child(odd) {background: #fff;}.gradientTable tr:nth-child(even) {background: #F5FAFA;}
版权声明：本文为博主原创文章，未经博主允许不得转载。
想象困难做出的反应，不是逃避或绕开它们，
