漂亮的表格

<!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)

相关推荐

  • 漂亮的表格

    <!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" conte

  • Android中使用ListView实现漂亮的表格效果

    Android中使用ListView实现漂亮的表格效果

    在这里我们要使用Android ListView来实现显示股票行情,效果图如下,红色表示股票价格上涨,绿色表示股票价格下跌. 第一步.定义color.xml如下: 复制代码 代码如下: <?xml version="1.0" encoding="utf-8"?> <resources>     <color name="color_dark_grey">#808080</color>     <

  • 使用FlexiGrid实现Extjs表格效果方法分享

    使用FlexiGrid实现Extjs表格效果方法分享

    近一段时间Extjs真的是风光无限好,只要是个做CRM/HRM之类的企业现在都在琢磨怎么在项目中用它,不过兄弟我可是不敢,原因很简单:太大/太笨/源码不好调试.但是对于Extjs漂亮的表格与功能的强大,实在是让我垂涎三尺,记得以前有个老外同志写过一个类似的Extjs的Jquery插件,所以就在Jquery的插件海洋中一顿海找,呵呵,还真让我找到了.看来还是我的Jquery好,小巧简单好像一部好的汽车引擎,我想要什么就可以自已DIY,真是方便.总体方案在网络传输上不超过80KB,速度比500KB大

  • Android实现一个包含表格的图标库实例代码

    Android实现一个包含表格的图标库实例代码

    之前有写过一个图表lib,但是开发的速度,大多很难跟上产品需求变化的脚步,所以修改了下原先的图表库,支持图表下面能整合table显示对应的类目,用曲线替换了折线,支持多曲线的显示,增加了显示的动画,,增加了一些可定制的属性,支持水平柱状图和叠加柱状图,以及多曲线图和饼状图的显示 1.效果图 2.各种图表的使用方式 1.饼状图 这个和原先的使用一样,只不过增加了一个动画,可以参看之前的文章,饼状图使用. 2.水平多柱状图 2.1 xml布局 <wellijohn.org.varchart.hor_

  • JavaScript实现生成动态表格和动态效果的方法详解

    JavaScript实现生成动态表格和动态效果的方法详解

    今天上午完成了Vue实现一个表格的动态样式,那么JavaScript代码能不能实现同样的效果呢?这样也可以学习一下JavaScript的语法,晚上试了一下,完全可以,效果一模一样. <!DOCTYPE html> <html lang="en"> <head> <meta http-equiv="X-UA-Compatible" content="text/html; charset=utf-8">

  • 搜索引擎核心技术(PHP编程思路) --[1]

    谈到网页搜索引擎时,大多数人都会想到雅虎.的确,雅虎开创了一个互联网络的搜索时代.然而,雅虎目前用于搜索网页的技术却并非该公司原先自己开发的.2000年8月,雅虎采用了Google(www.google.com)这家由斯坦福大学学生创建的风险公司的技术.理由非常简单,Google的搜索引擎比雅虎先前使用的技术能更快.更准确搜索到所需要的信息. 让我们自己来设计.开发一个强劲.高效的搜索引擎和数据库恐怕短时间内在技术.资金等方面是不可能的,不过,既然雅虎都在使用别人的技术,那么我们是不是也可以使用

  • 零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

    零基础搭建Node.js、Express、Ejs、Mongodb服务器及应用开发入门

    本文改自非鱼的<[翻译]前端开发人员入门指南,从零开始搭建Node.js, Express, Jade, Mongodb服务器>,之所以把Jade换成Ejs,是因为我觉得ejs更符合WEB编程人员的习惯,更确切说应该是更符合PHP.ASP程序员的使用习惯.好了,废话不多说,直接开始教程. 第1部分 – 15分钟安装 如果你真的是从零开始学,那就花点时间先把环境搭建起来吧.这不难,我用的是Win8,所以这看上去跟那些用Mac和Ubuntu或者其它*nix系统的教程有点区别,不过大致是一样的. 第

  • JavaScript经典效果集锦

    一 实用且必用的小脚本代码二 鼠标旁边的提示信息,类似与163登录后的页面提示效果三 如果文字过长,则将过长的部分变成省略号显示四 滚动的图片五 接收键盘指令的脚本六 让你的文本链接渐隐渐显七 类似与QQ的好友/黑名单之类的树型菜单-----推荐八 很多的脚本翻页------推荐九 DIV的透明层实现十 JSP页面自动生成html页面/或任何格式页面-----推荐 十一 超级强大的表单验证-----推荐十二 漂亮的脚本日历十三 进入,退出页面的各种效果!十四 很酷的效果,表格被选中回变颜色十五

  • 给初学PHP的5个入手程序

    php的基本语法格式与C类似,没学过C的朋友花几分钟看看别人的源代码怎么写的,就基本熟悉格式了.  ----------------------------------------------------  下面进入正题  准备了5个程序:  1.使用一个基本的函数,其结果是字符串形式,用echo显示出来  2.显示一个漂亮的表格  3.一个表单例子,提交并显示提交结果  4.数据库操纵例子(投票程序)  5.动态创建图形并保存例子  ------------------------------

  • 搜索引擎技术核心揭密

    编者按:这是一篇精彩的编程教学文章,不但详细地剖析了搜索引擎的原理,也提供了笔者自己对使用PHP编制搜索引擎的一些思路.整篇文章深入浅出,相信无论是高手还是菜鸟,都能从中得到不少的启发. 谈到网页搜索引擎时,大多数人都会想到雅虎.的确,雅虎开创了一个互联网络的搜索时代.然而,雅虎目前用于搜索网页的技术却并非该公司原先自己开发的.2000年8月,雅虎采用了Google(www.google.com)这家由斯坦福大学学生创建的风险公司的技术.理由非常简单,Google的搜索引擎比雅虎先前使用的技术能

随机推荐