用CSS制作具有亲和力的表格

css

翻译自:A CSS styled table 原文:http://veerle.duoh.com/comments.php?id=315_0_2_0_C 版权归原作者所有这个翻译的页面版权所有,授权蓝色理想。转载请注明出处
在前一段时间制作了CSS calendar,然后我就想用css制作一个table的模型,该模型遵循亲和力规则,而且有良好的视觉效果.

图:颜色的选择和搭配

这样做的好处是: 利用表格来装载数据,不言而喻是最好的,你可以很灵活的为每个单元格定义样式。下面是具体的做法

首先在photoshop设计一个效果出来,通过对各种颜色,小图标等的常识,做出了一个效果令人满意的效果图来。下一步呢,裁处下面三个图片来作为标题的背景图片,如果你对颜色的把握不是很好的话,这里给你提供一些调色工具

www.snook.ca/technical/colour_contrast/colour.html

veerle.duoh.com/comments.php?id=108_0_2_20_C8

数据结构为

<table id="mytable" cellspacing="0" summary="The technical
specifications of the Apple PowerMac G5 series">
<caption>Table 1: Power Mac G5 tech specs </caption>
<tr>
  <th scope="col" abbr="Configurations" class="nobg">Configurations</th>
  <th scope="col" abbr="Dual 1.8GHz">Dual 1.8GHz</th>
  <th scope="col" abbr="Dual 2GHz">Dual 2GHz</th>
  <th scope="col" abbr="Dual 2.5GHz">Dual 2GHz</th>
</tr>
<tr>
  <th scope="row" class="spec">Model</th>
  <td>M9454LL/A</td>
  <td>M9455LL/A</td>
  <td>M9457LL/A</td>
</tr>
...
可以看到我用了scope 属性来确保这个表格在无视觉效果的浏览器下展示出更好的效果,这个属性定义标题元素包含的标题内容是否为 行 (scope="col") 或 列(scope="row") 。下面是CSS的内容对于上面的标题,使用和背景来更好的区分出他们

th {
font: bold 11px "Trebuchet MS", Verdana, Arial, Helvetica,
sans-serif;
color: #6D929B;
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;
}
下面定义左侧的标题样式

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: #B4AA9D;
}
这里的数据来自于MAC的technical specifications of each Power Mac G5|http://www.apple.com/powermac/specs.html下来定义普通的和重要的数据内容

td {
border-right: 1px solid #C1DAD7;
border-bottom: 1px solid #C1DAD7;
background: #fff;
padding: 6px 6px 6px 12px;
color: #6D929B;
}

td.alt {
background: #F5FAFA;
color: #B4AA9D;
}
至此,整个制作过程结束了

  查看表格效果

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd"><HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>CSS Tables</TITLE><META http-equiv=Content-Type content="text/html; charset=utf-8"><LINK href="http://www.webjx.com/upfiles/20060314/20060314125704_styles.css" type=text/css rel=stylesheet><META content="MSHTML 6.00.2900.2802" name=GENERATOR></HEAD><BODY><H1><A href="http://www.webjx.com">网页教学网</A></H1><TABLE id=mytable cellSpacing=0 summary="The technical specifications of the Apple PowerMac G5 series"> <CAPTION>Table 1: Power Mac G5 tech specs </CAPTION> <TBODY> <TR> <TH class=nobg scope=col abbr=Configurations>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 class=spec scope=row abbr=Model>Model</TH> <TD>M9454LL/A</TD> <TD>M9455LL/A</TD> <TD>M9457LL/A</TD></TR> <TR> <TH class=specalt scope=row abbr="G5 Processor">G5 Processor</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 class=spec scope=row abbr="Frontside bus">Frontside bus</TH> <TD>900MHz per processor</TD> <TD>1GHz per processor</TD> <TD>1.25GHz per processor</TD></TR> <TR> <TH class=specalt scope=row abbr="L2 Cache">Level2 Cache</TH> <TD class=alt>512K per processor</TD> <TD class=alt>512K per processor</TD> <TD class=alt>512K per processor</TD></TR></TBODY></TABLE><P><A href="http://www.webjx.com/upfiles/20060314/20060314125704_styles.css">→ download stylesheet</A></P></BODY></HTML>

    [Ctrl+A 全部选择 提示:你可先修改部分代码,再按运行]

查看CSS文件

译者的话:这个页面经我测试通过W3C标准严格型验证,而且兼容IE,Firefox,Opera等主流浏览器,对于大量数据,可以利用js实现行两种背景交替显示。

时间: 2024-11-05 16:17:39

用CSS制作具有亲和力的表格的相关文章

用CSS制作具有亲和力的表单

css 对于表单,很常用.但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过.我现在要介绍一个用< fieldset></label>标签制作漂亮而且具体亲和力的表单的方法. 基本的xhtml<h3>已注册用户登录</h3>  <form action="" method="post" name="apLogin" id="

使用DIV+CSS制作网页后,表格Table还有用吗?

css|网页 符合网页标准的网页是DIV+CSS制作的,那么我们以前使用的表格Table还有用吗?是不是要彻底放弃呢? 关于DIV和TABLE表格的使用疑问有不少人很是疑惑,整理一下思路! 关于表格 使用WEB标准之后,并不是说排除表格的使用,表格并不是鸡肋,而正好相反是一道大餐,之所以在很多关于CSS布局的文章中常提到"为什么使用表格排版是不明智的"这句话,可能是大家对他的理解有误,这里注意一点"使用表格排版"是"不明智"的.指的是我们使用了很

具有亲和力的表格

翻译自:A CSS styled table 原文:http://veerle.duoh.com/comments.php?id=315_0_2_0_C 版权归原作者所有这个翻译的页面版权所有,授权蓝色理想.转载请注明出处 在前一段时间制作了CSS calendar,然后我就想用css制作一个table的模型,该模型遵循亲和力规则,而且有良好的视觉效果. 图:颜色的选择和搭配 这样做的好处是: 利用表格来装载数据,不言而喻是最好的,你可以很灵活的为每个单元格定义样式.下面是具体的做法 首先在ph

CSS实例教程:CSS制作好看的网页表格

如果数据表格对于视力没有问题用户都难以阅读的话,那么想像一个那些用辅助技术(掌上设备)的人来说,它们是多么复杂和混乱.幸运的是html规范提供了许多无素和属性来提高数据表格对于这些设备的可访问性. 1.summary 和 caption 第一元素是表格的caption,它基本上用做表格的标题.尽管这不是必须有的元素,但是尽可以使用caption总是好的.另一个元素是summary.summary属性可以应用于表格标签,用来描述表格的内容.与image的alt文本属性相似. 2.thead, tb

用CSS制作表头固定的表格

css 网页制作中,通常用表格来以行和列的方式来组织数据.可能在使用中会遇到这种情况,我们所要列出的数据很多很长.这时候,浏览起来就很不方便,察看后面数据的时候不得不经常滚动到页面的上方来看看对应的表头. 要解决这个问题,通常我们会想到使用框架或者内置框架(iframe)的方式,将表头内容放在上方的框架页面中,表格内容放在下面的框架中,这样浏览起来就比较方便了.可是,使用框架并不是很好的选择. 这里介绍一个更好的方法,使用简单的CSS就能够实现表头固定的表格(在IE和Firefox.

实例讲解:CSS制作鼠标经过改变表格背景属性

css|鼠标 这份教程将教会你下面的技巧:当鼠标移至表格(单元格)上方时,改变表格的背景颜色. 首先,在你的页面上创建一个菜单:然后,创建两种用于鉴别的颜色体:一个是表格的初始颜色,另一个是鼠标移至表格上方时所产生的背景颜色.在我这个案例中,我所默认使用的背景效果颜色(鼠标以上去时)是:#999999,初始颜色是:#CCCCCC. 现在,将下面这段代码复制到文档头部.(位于<HEAD></HEAD>标签之间)<style type="text/css"&g

网页技巧:具有亲和力的CSS隐藏文字方法

css|技巧|网页 一个新的,更加具有亲和力的CSS隐藏文字方法介绍,说明为什么现有的几种CSS隐藏文字的方法的缺陷和新的方法如何弥补.实用性一般,但是这个方法挺新颖的. 1.display:none;的缺陷 搜索引擎可能认为被隐藏的文字属于垃圾信息而被忽略 屏幕阅读器(是为视觉上有障碍的人设计的读取屏幕内容的程序)会忽略被隐藏的文字. 2. visibility: hidden ;的缺陷这个大家应该比较熟悉就是隐藏的内容会占据他所应该占据物理空间 3.overflow:hidden;一个比较合

用css制作表单并体验亲和力

css 对于表单,很常用.但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过.我现在要介绍一个用<fieldset></label>标签制作漂亮而且具体亲和力的表单的方法. 基本的xhtml: <h3>已注册用户登录</h3> <form action="" method="post" name="apLogin" id="

CSS制作水平垂直居中对齐 多种方式各有千秋

在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,平时工作收集了几种不同的方式制作垂直居中方法,但每种方法各有千秋在此与大家分享或许对初学者有所帮助   作为前端攻城师,在制作Web页面时都有碰到CSS制作水平垂直居中,我想大家都有研究过或者写过,特别的其中的垂直居中,更是让人烦恼.这段时间,我收 集了几种不同的方式制作垂直居中方法,但每种方法各有千秋呀,要正确的选择也是一件不容易的事情.我会将这几种方法一一介绍给大家,以供大家参考.或许对 于我这样的初学者有一定的帮