繁體中文当前位置: 首页 > 图文教程 > 网页制作 > CSS样式表 > 漂亮的表格
- CSS样式表
- css：之三行三列等高布局图文教程
- 一些很不错的css技巧,但也常为人们所忽略
- div+css布局必须要知道的css条件注释理论及实践
- 超赞的随机颜色搭配工具
- 应用WEB标准实例：列表页面的制作
- 用CSS给图片打标的方法
- 用css动态生成闪字的代码
- 用滑动门技术设计按钮的图文教程
- 如何实现多风格选择 样式实时切换
- 关于超链接的下划线 使用说明
- 用CSS给图片打标的代码
- 学习样式表CSS参考-常用的CSS知识
- XHTML下用dl,dt,dd标签实现翻页的效果代码
- CSS网页布局入门教程1：一列固定宽度
- CSS网页布局入门教程2：一列自适应宽度
- CSS网页布局入门教程3：一列固定宽度居中
- CSS网页布局入门教程4：二列固定宽度
- CSS网页布局入门教程8：三列浮动中间列宽度自适应
- DIV+CSS 英文命名规范
- 发现四种在网页中使用CSS样式表的方法
CSS样式表 中的 漂亮的表格
出处:互联网 整理: 软晨网（RuanChen.com） 发布: 2009-10-12 浏览: 164 ::
收藏到网摘: n/a
<!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> </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) All
