纯CSS美化HTML的Table

来源：互联网发布：手机如何改淘宝评价编辑：程序博客网时间：2024/05/18 07:05

今天发觉一个很好的表格CSS代码： http://veerle-v2.duoh.com/blog/comments/a_css_styled_table

整体的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"        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><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;    }