| « | November 2025 | » | | 日 | 一 | 二 | 三 | 四 | 五 | 六 | | | | | | | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | | | | | | | |
|
公告 |
要勇敢面对一切不幸 |
| 联系方式 |
|
MSN:ideation_shang@hotmail.com
MAIL:ideation_shang@126.com
QQ :113017429 |
Blog信息
|
|
blog名称:ideation_shang的blog
日志总数:30
评论数量:149
留言数量:0
访问次数:673345
建立时间:2005年4月21日 |
| |
|
 [网页技术]Css＋Script 设计表格样式
原创空间, 软件技术
ideation 发表于 2005/8/2 12:58:46 |
| 我们么在开发B/S结构的项目时，总是会被美工设计的烦杂的页面效果所困扰，比如说一个数据列表，要实现以下效果：
姓名
年龄
职业
张三
18
程序员
李四
19
系统分析员
需要编码如下:
<table width="200" border="0" cellpadding="1" cellspacing="1" bgcolor="#73A3D4" style="font-family:宋体;font-size:9pt"> <tr bgcolor="#51769B" height="22"> <td width="60" align="center" bgcolor="#51769B" style="color:#FFFFFF;font:bold">姓名</td> <td width="60" align="center" bgcolor="#51769B" style="color:#FFFFFF;font:bold">年龄</td> <td align="center" style="color:#FFFFFF;font:bold">职业</td> </tr> <tr bgcolor="#FFFFFF" height="22"> <td>张三</td> <td>18</td> <td>程序员</td> </tr> <tr bgcolor="#FFFFFF" height="22"> <td>李四</td> <td>19</td> <td>系统分析员</td> </tr></table>
我们可以编写Css样式来控制输出以上效果，代码包含一个javascript函数ListTableFormat和一个Css样式ListTable,如下:
<html><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312"><title>TableDemo</title><script language="javascript">/*表格处理函数ListTableFormat*/function ListTableFormat(tableObj){ tableObj.bgColor="#73A3D4";//设置表格背景 tableObj.border=0;//设置表格边框 tableObj.cellSpacing=1;//间距 tableObj.cellPadding=1;//填充 var trs=tableObj.rows;//得到行对象数组 for(var i=0;i<trs.length;i++)//循环所有行 { trs(i).height=22;//设置行高度 if(i==0)//设置表头样式 { trs(i).align="center";//对齐方式 trs(i).bgColor="#51769B";//背景颜色 var tds=trs(i).cells;//得到表头列数组 for(var j=0;j<tds.length;j++)//循环表头列 { tds(j).style.color="#FFFFFF";//设置表头颜色 tds(j).style.fontWeight="bold";//设置表头字体加粗 } } else { trs(i).bgColor="#FFFFFF";//设置其他行背景颜色 } }}</script><style type="text/css">/*表格Css定义*/.ListTable { FONT-FAMILY: 宋体; FONT-SIZE: 9pt; init:expression(ListTableFormat(this));}</style>
</head>
<body><table width="200" border="0" class="ListTable"> <tr> <td>姓名</td> <td>年龄</td> <td>职业</td> </tr> <tr height="22"> <td>张三</td> <td>18</td> <td>程序员</td> </tr> <tr height="22"> <td>李四</td> <td>19</td> <td>系统分析员</td> </tr></table></body></html> |
|
|
回复:Css＋Script 设计表格样式
原创空间, 软件技术
AMY(游客)发表评论于2007/12/4 16:38:45 |
|
|
回复:Css＋Script 设计表格样式
原创空间, 软件技术
hi(游客)发表评论于2006/5/9 14:39:38 |
|
|
回复:Css＋Script 设计表格样式
原创空间, 软件技术
greyrainbow(游客)发表评论于2006/4/26 16:10:40 |
|
|
回复:Css＋Script 设计表格样式
原创空间, 软件技术
ASDF(游客)发表评论于2006/3/1 9:21:08 |
|
» 1 »
|