很好看的表格样式

来源：互联网发布：promise js 编辑：程序博客网时间：2024/04/26 00:54
<!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=utf-8" /><title>CSS Tables</title><link href="styles.css" mce_href="styles.css" rel="stylesheet" type="text/css" /></head><mce:style type="text/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;}--></mce:style><style type="text/css" mce_bogus="1">/* 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;}</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">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">Lennvo</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">Black</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>