• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

漂亮的表格

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

<!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" 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>&nbsp;</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">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>


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
DIV_圆边圆角的实现发布时间:2022-02-05
下一篇:
凹陷文字 推荐发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap