符合网站标准的表格CSS应用

首页 > 前端代码 > 符合网站标准的表格CSS应用

2010-07-21, 星期三风羽前端代码 css, 表格 6 Comments Leave a comment

第一种应用CSS：制作符合网站标准的表格
优点：符合网站标准，代码简洁；与div一样表现与结构分离，方便修改。

提示：你可以先修改部分代码再运行。

第二种应用CSS：用CSS控制表格的交替颜色
优点：符合网站标准，代码简洁，无JS；与div一样表现与结构分离，方便修改。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>用CSS控制表格的交替颜色|风羽</title> <style type="text/css"> td { height:25px;font-size:12px;color:#333333;line-height:150%} tr {background-color:expression((this.sectionRowIndex%2==0)?"#ffffff":"#f4f4f4")} </style> <table cellspacing="0" cellpadding="0" width="345" border="0"> <tbody> <tr> <td><a href="http://www.phoyu.com/js/ie6zhongpngtoumingshixiandeliangzhongfangfa.html" rel="bookmark">IE6中PNG透明实现的两种方法及非JS纯CSS写法</a></td> </tr> <tr> <td><a href="http://www.phoyu.com/design/yuyihuadedivcssmingmingguifan.html" rel="bookmark">语义化的DIV+CSS 命名规范</a></td> </tr> <tr> <td><a href="http://www.phoyu.com/sucai/paymenticonset.html" rel="bookmark">国外支付图标</a></td> </tr> <tr> <td><a href="http://www.phoyu.com/design/shijueshejishichengchangdesangejieduan.html" rel="bookmark">视觉设计师成长的三个阶段</a></td> </tr> <tr> <td><a href="http://www.phoyu.com/design/guanyuuishejinixuyaoziwende10gewenti.html" rel="bookmark">关于UI设计你需要自问的10个问题</a></td> </tr> <tr> <td><a href="http://www.phoyu.com/divcss/divcssbiaozhunjuyoudeyoudian.html" rel="bookmark">Div+CSS标准具有的优点</a></td> </tr> <tr> <td><a href="http://www.phoyu.com/sucai/80gemianfeidegaozhiliangdetubiao.html" rel="bookmark">80个免费的高质量的图标</a></td> </tr> <tr> <td><a href="http://www.phoyu.com/divcss/dingjijiqiaocssshuxing.html" rel="bookmark">顶级技巧CSS属性</a></td> </tr> </tbody> </table> </body> </html>

提示：你可以先修改部分代码再运行。

文章作者：风羽
本文地址： http://www.phoyu.com/divcss/fuhewangzhanbiaozhundebiaogecssyingyong.html
版权所有 © 转载时必须以链接形式注明作者和原始出处！

« 几种切换CSS样式的方法 IE6中PNG透明实现的两种方法及非JS纯CSS写法 »

或许你会感兴趣的文章