纯CSS美化表格单元格背景效果,效果很帅

< html  xmlns="http://www.w3.org/1999/xhtml">

< head >

< meta  http-equiv="Content-Type" content="text/html; charset=utf-8" />

< title >CSS美化表格</ title >

</ head >

< style  type="text/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 sans-serif;

     text-align: right;

}

th {

     font: bold 11px 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;

}

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;

     font-size:11px;

     padding: 6px 6px 6px 12px;

     color: #4f6b72;

}

td.alt {

     background: #F5FAFA;

     color: #797268;

}

th.spec {

     border-left: 1px solid #C1DAD7;

     border-top: 0;

     font: bold 10px sans-serif;

}

th.specalt {

     border-left: 1px solid #C1DAD7;

     border-top: 0;

     font: bold 10px sans-serif;

     color: #797268;

}

/*---------for IE 5.x bug*/

html>body td{ font-size:11px;}

</ style >

< body >

< table  id="mytable" cellspacing="0" summary="The technical specifications of the Apple PowerMac G5 series">

< caption > </ 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">lipeng</ th >

     < td >M9454LL/A</ td >

     < td >M9455LL/A</ td >

     < td >M9457LL/A</ td >

   </ tr >

   < tr >

     < th  scope="row" abbr="G5 Processor" class="specalt">mapabc</ 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">地图名片</ 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">图秀卡</ th >

     < td  class="alt">512K per processor</ td >

     < td  class="alt">512K per processor</ td >

     < td  class="alt">512K per processor</ td >

   </ tr >

</ table >

</ body >

</ html >