比较清新的一款国外表格的样式_层和布局特效

缂備礁娲﹂埅绀慹deCMS閻熸瑥妫濋。鍫曞极濞嗘垟鏌�濞戞梹澹嗛埞鏍⒒閿燂拷缂佸鍠愬﹢鍥礉閳ヨ櫕鐝� 闂侇偄顦辩紞澶屾兜閺囨氨闉嶉柤杈ㄦ缁憋拷 闁哄啰濮撮崪鏍博濞嗘挻姣愮€规悶鍎遍崣锟�,闁谎勫劤鐎规娊寮堕崘顔兼濞戞挴鍋撻梺娆惧枛閸欏繘寮婚敓锟�!

这只是一个表格样式，传统的TABLE实现的，没有用CSS实现表格这有点遗憾，不过可以参考一下它的配色，确实比较清新，本人就比较喜欢这种风格。

<!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" mrc="text/html; charset=utf-8" /> 
<title>表格</title> 
<link href="styles.css" rel="stylesheet" type="text/css" /> 
</head> 
<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;} 
</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">模板无忧</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>

所属频道：层和布局特效/更新时间：2012-12-28

[收藏][报错][返回列表]

比较清新的一款国外表格的样式_层和布局特效

层和布局特效Rss订阅特效代码搜索

层和布局特效推荐

猜你也喜欢看这些

鏀惰棌&鍒嗕韩