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

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

用table来结构化表单内容：

【例一】

用table来实现两列表单

<div class="table">
  <table class="tableFrame" id="tableFrame1">
    <colgroup>
    <col class="col1" />
    <col class="col3" />
    </colgroup>
    <tr>
      <th colspan="2">添加图书</th>
    </tr>
    <tr class='tableCaseB'>
      <td class="col1">书名：</td>
      <td><input type="text" label="书名" name="name" class="tf"/>
        * </td>
    </tr>
    <tr class='tableCaseT'>
      <td class="col1">作者：</td>
      <td><input type="text" label="作者" name="author" class="tf"/></td>
    </tr>
    <tr class='tableCaseB'>
      <td class="col1">出版社：</td>
      <td><input type="text" label="出版社" name="publish" class="tf"/></td>
    </tr>
    <tr class='tableCaseT'>
      <td class="col1"> ISBN：</td>
      <td><input type="text" label="ISBN" name="isbn" class="tf"/></td>
    </tr>
    <tr class='tableCaseB'>
      <td class="col1">页数：</td>
      <td><input type="text" label="页数" name="page" class="tf"/></td>
    </tr>
    <tr class='tableCaseT'>
      <td class="col1">价格(元)：</td>
      <td><input type="text" label="价格(元)" name="price" class="tf"/></td>
    </tr>
    <tr class='tableCaseB'>
      <td class="col1">内容摘要：</td>
      <td><input type="text" label="内容摘要" name="content" class="tf"/></td>
    </tr>
    <tr class='tableCaseT'>
      <td class="col1">&nbsp;</td>
      <td><input type="submit"  name="submit" class="btn"   value="增加"/></td>
    </tr>
  </table>
</div>

/* 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来实现三列表单

<div class="table">
  <table class="tableFrame">
    <colgroup>
    <col class="col1" />
    <col class="col2" />
    <col class="col3" />
    </colgroup>
    <tr>
      <th colspan="3">首页图片设置 【<a href='#' target='ifr'>首页静态生成</a>】</th>
    </tr>
    <tr class='tableCaseB'>
      <td class="col1">产品</td>
      <td class="col2"><a href='#' target=_blank><img src='img/1.jpg' width='188' height='54' border='0' alt='净味120'></a></td>
      <td class="col3">文字:
        <input type='text' name='text01' style='width:215px' id='text01' 
value='净味120'>
        <br>
        连接:
        <input type='text' name='link01' style='width:215px' id='link01' value=''>
        <br>
        图片:
        <input type='file' name='pic01' id='pic01'></td>
    </tr>
    <tr class='tableCaseT'>
      <td class="col1">专区</td>
      <td class="col2"><a href='#' target=_blank><img src='img/2.jpg' width='188' height='54' border='0' alt='色彩体验中心'></a></td>
      <td class="col3">文字:
        <input type='text' name='text01' style='width:215px' id='text01' 
value='净味120'>
        <br>
        连接:
        <input type='text' name='link01' style='width:215px' id='link01' value=''>
        <br>
        图片:
        <input type='file' name='pic01' id='pic01'></td>
    </tr>
    <tr class='tableCaseB'>
      <td class="col1">活动</td>
      <td class="col2"><a href='#' target=_blank><img src='img/3.jpg' width='188' height='54' border='0' alt='如何选购内墙乳胶漆'></a></td>
      <td class="col3">文字:
        <input type='text' name='text01' style='width:215px' id='text01' 
value='净味120'>
        <br>
        连接:
        <input type='text' name='link01' style='width:215px' id='link01' value=''>
        <br>
        图片:
        <input type='file' name='pic01' id='pic01'></td>
    </tr>
    <tr class='tableCaseT'>
      <td colspan="3" class="tar" ><input type='submit' name='sub01' value='更新'>
        <input type='hidden' name='set' value='1'>
      </td>
    </tr>
  </table>
</div>

/* 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;}