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

转载 2007年09月18日 17:39:00
在前一段时间制作了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;
}   

相关文章推荐

充满亲和力的XHTML+CSS模

  • 2009年12月20日 00:48
  • 111KB
  • 下载

CSS 表格制作日历

看看最后的效果 css 的样式代码如下所示 Insert title here table.ca1 { ...

Jquery + CSS 制作条纹table表格

  • 2009年03月03日 13:33
  • 30KB
  • 下载

制作1px表格边框的十种方法(html和css)

第一种: 使用1*1的图片,来填充单元格背景,并设置单元格的宽度,高度为1px 第二种: 第三种:利用二级表格 www.blueidea.com 第四种:...

CSS控制表格——制作日历

表格是网页上最常见的元素,除了用它来显示数据,还常被用来排版。这一次我们就来学习如何用CSS控制表格。 一.表格中的标记 表格(标记)在最初HTML设计时,仅仅是用来存放各种数据的。 下图是一个...

CSS美化友好的表格

  • 2013年09月12日 15:39
  • 12KB
  • 下载

纯CSS 做的虚线表格

  • 2013年11月16日 13:24
  • 719B
  • 下载

CSS3:nth-child()伪类选择器,Table表格奇偶数行定义样式

css table tr
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用CSS制作具有亲和力的表格
举报原因:
原因补充:

(最多只允许输入30个字)