用CSS定义table表格的样式

Table表格在Firefox和IE6中显示的效果如上图。下面是CSS定义的代码及纯HTML定义的代码展示,各位可以比较一下,也可以了解到怎么用CSS来实现table的各种样式。

据以实现的CSS代码是:

CSS代码
  1. table.List { PADDING-TOP: 4px; BACKGROUND-COLOR: #ffffff;margin-left:auto;margin-right:auto;margin-top:5px;margin-bottom:5px;border-collapsecollapse;    
  2. border:1px solid #1855C6;cell-spacing:0px;    
  3. }    
  4. table.List TH {background:url(http://img.kqyx.cn/admin/th_bg.gif); HEIGHT: 24px;border:1px solid #1855C6;    
  5. }    
  6. table.List TD {PADDING: 3px; LINE-HEIGHT: 23px; BACKGROUND: #FFFFFF;
  7. border:1px solid #1855C6;    
  8. }   

注意:table.list 与table .list (table与.list之间有空格)是有区别的,类名之间有没有空格所定义的样式之间的继承关系是不同的。有空格的是用于定义在table内的元素的样式,而没有空格的是定义table本身的样式。

table.list 用法:

XML/HTML代码
  1. <table class=list></table>  

table .list 用法:

XML/HTML代码
  1. <table><span class=list></table>  

看出不同来了吧?
 

HTML代码是:

XML/HTML代码
  1. <table class="list" width="300">  
  2.  <tr>  
  3.   <th> </th>  
  4. <th> </th>  
  5.  </tr>  
  6.  <tr>  
  7.   <td>    </td>  
  8.   <td> </td>  
  9.  </tr>  
  10.  <tr>  
  11.   <td> </td>  
  12.   <td> </td>  
  13.  </tr>  
  14.  <tr>  
  15.   <td colspan="2">   </td>  
  16.  </tr>  
  17. </table>  

 


如果不用CSS来定义样式,则可由下面的HTML代码来实现:

XML/HTML代码
  1. <table width="300" border="1" bordercolor="#1855C6" cellspacing="0" cellpadding="3" style="border-collapse: collapse" bgcolor="#FFFFFF">  
  2.  <tr>  
  3.   <th background="http://img.kqyx.cn/admin/th_bg.gif" height="25"> </th>  
  4.   <th background="http://img.kqyx.cn/admin/th_bg.gif"> </th>  
  5.  </tr>  
  6.  <tr>  
  7.   <td height="25">  </td>  
  8.   <td height="25"> </td>  
  9.  </tr>  
  10.  <tr>  
  11.   <td height="25"> </td>  
  12.   <td height="25"> </td>  
  13.  </tr>  
  14.  <tr>  
  15.   <td colspan="2" height="25">   </td>  
  16.  </tr>  
  17. </table>  

 

关于用CSS来定义表格样式的补充说明,这个不一定正确,但至少我到现在没有办法解决:

要使table在页面里居中显示,在firefox里可以直接用类似margin:2px auto;这样的代码来控制,但在IE内核的浏览器(如TT、360SE等)里好像不行,没办法居中。

[在IE里,table居中要先定义width,再用margin:0xp auto;就可以了。]

2013-5-9——表格行悬停背景色变化的代码:

XML/HTML代码
  1. <tr onMouseOver="this.className='trbgover'" onMouseOut="this.className='trbgout'" class="Listtr">  

trbgover悬停时样式,trbgout 鼠标离开时样式,Listtr表格行默认样式。但Listtr有就没有悬停效果。下面的才行,日前还没有弄明白是怎么回事。

XML/HTML代码
  1. <tr onMouseOver="this.className='trbgover'" onMouseOut="this.className='trbgout'" bgcolor="#FFFFFF">  

CSS样式代码:

CSS代码
  1. .trbgover{BACKGROUND: #F0F0F0;}  
  2. .trbgout{BACKGROUND: #FFFFFF;}  

 



[本日志由 ancher 于 2013-05-09 05:34 PM 更新]
上一篇: GDP,你还认为有意义吗?
下一篇: On Error Resume Next 的用法
文章来自: 本站原创
引用通告: 查看所有引用 | 我要引用此文章
Tags: CSS Table 表格 WEB标准化 样式
相关日志:
评论: 5 | 引用: 0 | 查看次数: 15681
微博档案[2014-04-24 09:51 AM | 访问 http://www.weibodangan.com | Mail To:1326675091@qq.com | 119.85.106.179 | del | 回复回复]
地板
谢谢分享,学习了。
[2011-12-28 01:02 PM | | | 1.192.126.160 | del | 回复回复]
板凳
好,学习了。。谢谢分享
ancher[2011-08-16 12:37 AM | | | 222.248.39.225 | del | 回复回复]
沙发
自己在这里补充一下,要使表格居中,可能要定义表格的宽度width的值。
发表评论
你没有权限发表评论!