和风细雨

世上本无难事,心以为难,斯乃真难。苟不存一难之见于心,则运用之术自出。

CSS表格特效

效果图:


页面代码:
<table id="1233"  class="Listing" >
                    
<caption>表格标题</caption>
                    
<thead>
                        
<th scope="col">表头一</th>
                        
<th scope="col">表头二</th>
                        
<th scope="col">表头三</th>
                        
<th scope="col">表头四</th>
                        
<th scope="col">表头五</th>
                    
</thead>
                    
<tbody id="tbodySample">
                        
<tr>
                            
<td>1</td>
                            
<td>2</td>
                            
<td>3</td>
                            
<td>4</td>
                            
<td>5</td>
                        
</tr>
                        
<tr>
                            
<td>11</td>
                            
<td>21</td>
                            
<td>31</td>
                            
<td>41</td>
                            
<td>51</td>
                        
</tr>
                        
<tr>
                            
<td>12</td>
                            
<td>22</td>
                            
<td>32</td>
                            
<td>42</td>
                            
<td>52</td>
                        
</tr>
                        
<tr>
                            
<td>13</td>
                            
<td>23</td>
                            
<td>33</td>
                            
<td>43</td>
                            
<td>53</td>
                        
</tr>
                    
</tbody>
                
</table>

CSS代码:
TABLE.Listing TD {
    BORDER-BOTTOM
: #e6e6e6 1px solid
}

TABLE.Listing TD 
{
    PADDING-RIGHT
: 12px;
    PADDING-LEFT
: 12px;
    PADDING-BOTTOM
: 4px;
    PADDING-TOP
: 4px;
    TEXT-ALIGN
: left
}

TABLE.Listing TH 
{
    PADDING-RIGHT
: 12px;
    PADDING-LEFT
: 12px;
    PADDING-BOTTOM
: 4px;
    PADDING-TOP
: 4px;
    TEXT-ALIGN
: center
}

TABLE.Listing CAPTION 
{
    PADDING-RIGHT
: 12px;
    PADDING-LEFT
: 12px;
    PADDING-BOTTOM
: 4px;
    PADDING-TOP
: 4px;
    TEXT-ALIGN
: left
}

TABLE.Listing 
{
    MARGIN
: 0px 0px 8px;
    WIDTH
: 92%;
    BORDER-BOTTOM
: #6b86b3 3px solid
}

TABLE.Listing TR 
{
    BACKGROUND
: #f5f5f5;
    height
:20px;
}

TABLE.Listing caption
{
    font-weight
:bold;
    padding
:6px 0px;    
    color
:#3d580b;    
    font-size
:20px;
}

TABLE.Listing TH 
{
    FONT-WEIGHT
: bold;
    background
:#ccc url(theadbg.gif) repeat-x left center;
    BORDER-BOTTOM
: #6b86b3 1px solid
}

TABLE.Listing TD.Header 
{
    FONT-WEIGHT
: bold;    
    BORDER-BOTTOM
: #6b86b3 1px solid
    BACKGROUND: #ffffff
;
}

TABLE.Listing TR.Header TD 
{
    FONT-WEIGHT
: bold;
    BACKGROUND
: #ffffff;
    BORDER-BOTTOM
: #6b86b3 1px solid    
}

TABLE.Listing TR.Alt 
{
    BACKGROUND
: #ffffff
}

posted on 2008-02-22 08:47 和风细雨 阅读(1447) 评论(0)  编辑  收藏 所属分类: CSS


只有注册用户登录后才能发表评论。


网站导航: