本文所分享的知识点是【CSS实现的清爽、漂亮的表格样式分享】，欢迎您喜欢我爱IT技术网所分享的教程、知识、经验或攻略，下面是详细的讲解。
CSS实现的清爽、漂亮的表格样式分享
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>CSS实现的清爽、漂亮的表格样式 - jb5t1.net</title>
<style type="text/css">
</p>
<p>body {
font: normal 11px auto "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
color: #4f6b72;
background: #E6EAE9;
} </p>
<p>a {
color: #c75f3e;
} </p>
<p>#mytable {
width: 700px;
padding: 0;
margin: 0;
} </p>
<p>caption {
padding: 0 0 5px 0;
width: 700px;
font: italic 11px "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
text-align: right;
} </p>
<p>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;
} </p>
<p>th.nobg {
border-top: 0;
border-left: 0;
border-right: 1px solid #C1DAD7;
background: none;
} </p>
<p>td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
font-size:11px;
padding: 6px 6px 6px 12px;
color: #4f6b72;
} </p>
<p>
td.alt {
background: #F5FAFA;
color: #797268;
} </p>
<p>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;
} </p>
<p>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;
}
html>body td{ font-size:11px;}
</style> </p>
<p></head>
<body></p>
<p><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> </p>
<p> <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> </p>
<p> <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> </p>
<p> <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> </p>
<p> </tr>
<tr>
<th scope="row" abbr="L2 Cache" class="specalt">2级缓存</th>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
<td class="alt">512K per processor</td>
</tr> </p>
<p></table> </p>
<p>
<div align="center">
获取更多JavaScript代码，请登录我爱IT技术网 <a href="http://www.jb5t1.net">http://www.jb5t1.net</a>
</div>
</body>
</html>
关于CSS实现的清爽、漂亮的表格样式分享的相关讨论如下：
相关问题：哪有漂亮的表格样式？
答：可以参考这个效果 http://www.duoh.com/csstutorials/tablesv2/table2.html http://www.duoh.com/csstutorials/tablesv2/ http://www.duoh.com/csstutorials/csstables/ >>详细
相关问题：html,css,这种表格样式怎么做的？
答：这个不一定是表格，就算是单独写没有意思（像这种论坛里的都是动态自动生成的） table{ width:400px; height:150px; border-collapse:collapse; border:1px solid #333; background:pink;} td{ width:400px; height:75px; border-collapse:colla... >>详细
相关问题：css表格样式怎么实现？
答：table{ border-collapse: collapse; //相邻边被合并 background-color: #cccccc; //设置表格背景色 border-top: 1px solid #000000; //设置表格上边框颜色 border-left: 1px solid #000000; //设置表格左边框颜色 border-right: 1px solid #0000... >>详细
- 评论列表（网友评论仅供网友表达个人看法，并不表明本站同意其观点或证实其描述）
-