用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;
}   

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

对于表单,很常用。但是在web standard建站的时候,他的排版往往让人遗忘,到了真正用到的时候就发现让人头疼,当然我也遇到过。我现在要介绍一个用标签制作漂亮而且具体亲和力的表单的方法。 基...
  • my_session
  • my_session
  • 2014年02月06日 23:02
  • 506

CSS设置无需表格的菜单

CSS设置无需表格的菜单           项目列表的符号可以设置list-style-type属性值为none,然后,制作各种各样的菜单和导航条,来显示项目的列表。           首先,...
  • nangeali
  • nangeali
  • 2016年10月30日 16:22
  • 506

CSS 表格制作日历

看看最后的效果 css 的样式代码如下所示 Insert title here table.ca1 { ...
  • tianjun2012
  • tianjun2012
  • 2015年11月21日 20:36
  • 1639

css中具有继承性的属性

CSS中具有继承性的属性:   color:#eee font: font-style font-variant: font-weight:bold font-size font-family: fo...
  • fuckof
  • fuckof
  • 2016年07月27日 21:17
  • 426

做网站是用table表格做好还是DIV+CSS好

关于div+css的优点其实确实很多,这种布局方式大大精简了页面的代码量,减少了网页的体积,有利于网页的读取。而table的排版方式最初是由一位负责给报纸排版的人使用的,他的“发明”对于互联网可以说是...
  • duhai
  • duhai
  • 2014年05月17日 18:42
  • 1919

HTML/CSS: 用CSS与HTML实现表格的显示

在制作网页页面时,经常需要对页面进行分栏。据我现有的知识,目前有三种方法可以实现: (1)float大法; (2)position-absolute大法; (3)表格大法。今天重点讲述的是表格大...
  • linwh8
  • linwh8
  • 2016年09月19日 19:27
  • 613

CSS实例(一):漂亮的表格样式

WEB2.0提倡使用div布局,但不是要完全放弃使用表格,表格在数据展现方面还是不错的选择。 现在使用介绍使用CSS样式表来控制、美化表格的方法。 Html代码   ...
  • qq1162195421
  • qq1162195421
  • 2013年08月19日 21:53
  • 2926

CSS简单表格样式

1. 单像素边框CSS表格 这是一个很常用的表格样式。 源代码: table.gridtable { font-family: verdana,arial,sans...
  • u014481096
  • u014481096
  • 2015年03月11日 11:27
  • 477

变化多端 – 多种纯CSS的HTML表格设计

介绍 在HTML中,Table节点由于其层层嵌套的节点结构,一度名声很臭,且一度被呼吁用DIV+CSS取而代之。但在实际项目开发中,一碰到规整的数据显示,不知不觉又会用起它。可见其生命力之顽强。 这...
  • eengel
  • eengel
  • 2015年08月03日 20:00
  • 13855

html中table的使用(1)课程表

html中table的使用
  • way_hj
  • way_hj
  • 2016年03月18日 09:28
  • 1208
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用CSS制作具有亲和力的表格
举报原因:
原因补充:

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