表格正在被滥用,尤其是对一些不太严谨的网页设计者来说,表格到底应该作用于哪些地方,这也是一个一直存在争议的问题。
但有一点是毫不争议的,表格在html中 最大的用处是用来展示表格数据。但普通的HTML表格并不能达到一个良好的用户体验,一堆无聊的数据死板的排列在一堆更死板的边框里 面,Tablecloth可以很好的为你解决这个问题。
Tablecloth是一个javascript应用, 用来美化你的表格,它的功能包括:
- 给奇偶数行设定不同的背景颜色。
- 高亮显示选定状态下的当前行或当前列。
- 高亮显示被选定表单格元,或被选定表单格元的行或列。
- 高亮显示鼠标悬浮时背景颜色,跟高亮被选状态是一样的。当然,你应该给不同的状态设定不同的 颜色。通常建议给悬浮设置淡一点的颜色,而选定状态则设置深色,这样,更能集中用户的注意力。
要使用Tablecloth,可以点击这里下载。 下载后将得到tablecloth.js和tablecloth.CSS两个文件,上传到你的服务器,然后在 你的网页文件的和标签之间加入下面的代码:
<link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" />
<script type="text/javascript" src="tablecloth/tablecloth.js"></script>
控制表格的样式


table, td
{
font
:
100% Arial, Helvetica, sans-serif
;
}
table { width : 100% ; border-collapse : collapse ; margin : 1em 0 ; }
th, td { text-align : left ; padding : .5em ; border : 1px solid #fff ; }
th { background : #328aa4 url(tr_back.gif) repeat-x ; color : #fff ; }
td { background : #e5f1f4 ; }
/* tablecloth styles */
tr.even td { background : #e5f1f4 ; }
tr.odd td { background : #f8fbfc ; }
th.over, tr.even th.over, tr.odd th.over { background : #4a98af ; }
th.down, tr.even th.down, tr.odd th.down { background : #bce774 ; }
th.selected, tr.even th.selected, tr.odd th.selected {}
td.over, tr.even td.over, tr.odd td.over { background : #ecfbd4 ; }
td.down, tr.even td.down, tr.odd td.down { background : #bce774 ; color : #fff ; }
td.selected, tr.even td.selected, tr.odd td.selected { background : #bce774 ;
color : #555 ; }
/* use this if you want to apply different styleing to empty table cells */
td.empty, tr.odd td.empty, tr.even td.empty { background : #fff ; }
table { width : 100% ; border-collapse : collapse ; margin : 1em 0 ; }
th, td { text-align : left ; padding : .5em ; border : 1px solid #fff ; }
th { background : #328aa4 url(tr_back.gif) repeat-x ; color : #fff ; }
td { background : #e5f1f4 ; }
/* tablecloth styles */
tr.even td { background : #e5f1f4 ; }
tr.odd td { background : #f8fbfc ; }
th.over, tr.even th.over, tr.odd th.over { background : #4a98af ; }
th.down, tr.even th.down, tr.odd th.down { background : #bce774 ; }
th.selected, tr.even th.selected, tr.odd th.selected {}
td.over, tr.even td.over, tr.odd td.over { background : #ecfbd4 ; }
td.down, tr.even td.down, tr.odd td.down { background : #bce774 ; color : #fff ; }
td.selected, tr.even td.selected, tr.odd td.selected { background : #bce774 ;
color : #555 ; }
/* use this if you want to apply different styleing to empty table cells */
td.empty, tr.odd td.empty, tr.even td.empty { background : #fff ; }
js主要设置:


//
if set to true then mouseover a table cell will highlight
entire column (except sibling headings)
// 如果设置成真的,鼠标移动到单个表格将会使与之相关的交叉垂直的表格高亮
var highlightCols = true ;
// if set to true then mouseover a table cell will highlight
entire row(except sibling headings)
// 如果设置成真的,鼠标移动到单个表格将会使与之相关的一排表格高亮
var highlightRows = false ;
// if set to true then click on a table sell will select row
or column based on config
// 如果设置成真的,鼠标点击到单个表格将会使与之相关的交叉垂直的表格高亮
var selectable = true ;
// this function is called when
// add your own code if you want to add action
// function receives object that has been clicked
// 给没个表格点击写上函数,丰富功能用。
this .clickAction = function (obj){
// alert(obj.innerHTML);
};
entire column (except sibling headings)
// 如果设置成真的,鼠标移动到单个表格将会使与之相关的交叉垂直的表格高亮
var highlightCols = true ;
// if set to true then mouseover a table cell will highlight
entire row(except sibling headings)
// 如果设置成真的,鼠标移动到单个表格将会使与之相关的一排表格高亮
var highlightRows = false ;
// if set to true then click on a table sell will select row
or column based on config
// 如果设置成真的,鼠标点击到单个表格将会使与之相关的交叉垂直的表格高亮
var selectable = true ;
// this function is called when
// add your own code if you want to add action
// function receives object that has been clicked
// 给没个表格点击写上函数,丰富功能用。
this .clickAction = function (obj){
// alert(obj.innerHTML);
};
具体介绍和使用请看该工具的原页面