表格样式的应用——对程序员比较有用（二）

阅读更多

前一篇文章主要列出了table所有的HTML Tag和CSS Properties；接下来我们来看下两个例子看如何来灵活应用它们。

用table来结构化表单内容：

【例一】

用table来实现两列表单

  

    
    
    
    
    

      
添加图书
    
    

      
书名：
      

        * 
    
    

      
作者：
      

    
    

      
出版社：
      

    
    

      
 ISBN：
      

    
    

      
页数：
      

    
    

      
价格(元)：
      

    
    

      
内容摘要：
      

    
    

      
 
      

    
  

/* CSS Document */
*{ margin:0; padding:0;} 
.table{margin:20px auto;}
.tableFrame{
width:600px; 
height:auto;
border-top:1px solid #C1DAD7;
border-left:1px solid #C1DAD7;
padding:0;
border-collapse:collapse;
border-spacing:0;
caption-side:left;
font-size:12px;
}

.tableFrame:after {
content: "."; 
display: block;
height: 0; 
clear: both; 
visibility: hidden;
}

.tableFrame td,.tableFrame th{
border-right:1px solid #C1DAD7;
border-bottom:1px solid #C1DAD7;
line-height:18px;
}

.tableFrame th{
height:20px;
margin:0;
padding:5px 0px 3px 10px;
font-weight:bold;
color:#4F6B72;
text-align:center;
background:url(img/UserAdmin/table_t_bg.jpg) no-repeat left top;
}

.tableFrame td{
height:20px;
padding:5px 0px 3px 10px;
margin:0;
}

.tableFrame .col1{
width:109px;
height:28px;
}
.tableFrame .col3{
width:269px;
height:28px; 
overflow:hidden;
}

#tableFrame1{ 
margin:0 auto 100px; 
width:400px;}
#tableFrame1 .col1{
color:#4F6B72;
background:#F5FAFA url(img/UserAdmin/table_bullet2.gif) no-repeat left top;
font-weight:bold;}
#tableFrame1 .col3{
background:#fff;
}
#tableFrame1 input.tf{ 
width:156px; 
padding-top:2px; 
height:16px; 
border:1px solid #e5e5e5; 
background:url(img/UserAdmin/text_bg.jpg) repeat-x left top;
}
#tableFrame1 input.btn{ }

【例二】

用table来实现三列表单

  

    
    
    
    
    
    

      
首页图片设置 【首页静态生成】
    
    

      
产品
      

      
文字:
        
        

        连接:
        
        

        图片:
        
    
    

      
专区
      

      
文字:
        
        

        连接:
        
        

        图片:
        
    
    

      
活动
      

      
文字:
        
        

        连接:
        
        

        图片:
        
    
    

      

        
      
    
  

/* CSS Document */
*{ margin:0; padding:0;} 
a {
font-family: Arial, Geneva, Helvetica, sans-serif,"宋体";
text-decoration: none;
color:#555;
}
a:hover{}
.table{}

.tableFrame{
width:600px; 
padding:0;
margin:20px auto;
height:auto;
border-top:1px solid #C1DAD7;
border-left:1px solid #C1DAD7;
border-collapse:collapse;
border-spacing:0;
caption-side:left;
font-size:12px;
}

.tableFrame:after {
content: "."; 
display: block;
height: 0; 
clear: both; 
visibility: hidden;
}

.tableFrame td,.tableFrame th{
border-right:1px solid #C1DAD7;
border-bottom:1px solid #C1DAD7;
line-height:18px;

}


.tableFrame th{
height:20px;
margin:0;
padding:5px 0px 3px 10px;
font-weight:bold;
color:#4F6B72;
text-align:center;
background:url(img/UserAdmin/table_t_bg.jpg) no-repeat left top;
}
.tableFrame td{
height:20px;
padding:5px 0px 3px 10px;
margin:0;
}
.tableCaseT td{
background:#fff;
color:#4F6B72;
}
.tableCaseB td{
background:#F5FAFA;
color:#797268;
}
.tableCaseT .col1{
background:#fff url(img/UserAdmin/table_bullet1.gif) no-repeat left top;
font-weight:bold;
}
.tableCaseB .col1{
background:#F5FAFA url(img/UserAdmin/table_bullet2.gif) no-repeat left top;
font-weight:bold;
}
.tableFrame .col1{
width:89px;height:54px;
}
.tableFrame .col2{
width:209px;height:54px;
}
.tableFrame .col3{
width:269px;height:54px; overflow:hidden;
}
td.tar{ text-align:right; padding-right:20px;}