Css定义具有亲和力的表格(转自蓝色理想)

翻译自：A CSS styled table 原文：http://veerle.duoh.com/comments.php?id=315_0_2_0_C 版权归原作者所有这个翻译的页面版权所有，授权蓝色理想。转载请注明出处

数据结构为：

< 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 >

可以看到我用了scope 属性来确保这个表格在无视觉效果的浏览器下展示出更好的效果，这个属性定义标题元素包含的标题内容是否为 行 (scope="col") 或 列(scope="row") 。下面是CSS的内容对于上面的标题，使用和背景来更好的区分出他们

/**/ /* CSS Document */

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;
    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;
    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;
}
/**/ /*---------for IE 5.x bug*/
html>body td {} { font-size:11px;}

至此，整个制作过程结束了

查看表格效果

查看CSS文件

译者的话：这个页面经我测试通过W3C标准严格型验证，而且兼容IE，Firefox，Opera等主流浏览器，对于大量数据，可以利用js实现行两种背景交替显示。