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

基于表格样式的应用的扩展，有时我们也可以通过 unorder list 和 list item 来实现表单的结构化。

【例三】
[align=center][img]http://tiger-passion.iteye.com/upload/picture/pic/32395/76cade93-b31c-30d3-aa61-b5ef792e0201.jpg[/img]
用ul来实现三列表单[/align]

<div id="tableFrame">
  <div id="tableFrameTitle">
    <ul>
      <li style='width:589px'>首页图片设置 【<a href='#' target='ifr'>首页静态生成</a>】</li>
    </ul>
  </div>
  <div id="tableCase">
    <form name="frm1" method="post" action='' enctype="multipart/form-data" onsubmit="#">
      <ul class='tableCaseB'>
        <li class='col1'>产品</li>
        <li class='col2'><a href='#' target=_blank><img src='img/1.jpg' width='188' height='54' border='0' alt='净味120'></a></li>
        <li 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'>
        </li>
      </ul>
      <ul class='tableCaseT'>
        <li class='col1'>专区</li>
        <li class='col2'><a href='#' target=_blank><img src='img/2.jpg' width='188' height='54' border='0' alt='色彩体验中心'></a></li>
        <li class='col3'>文字:
          <input type='text' name='text02' style='width:215px' id='text02' value=''>
          <br>
          连接:
          <input type='text' name='link02' style='width:215px' id='link02' value=''>
          <br>
          图片:
          <input type='file' name='pic02' id='pic02'>
        </li>
      </ul>
      <ul class='tableCaseB'>
        <li class='col1'>活动</li>
        <li class='col2'><a href='#' target=_blank><img src='img/3.jpg' width='188' height='54' border='0' alt='如何选购内墙乳胶漆'></a></li>
        <li class='col3'>文字:
          <input type='text' name='text03' style='width:215px' id='text03' value=''>
          <br>
          连接:
          <input type='text' name='link03' style='width:215px' id='link03' value=''>
          <br>
          图片:
          <input type='file' name='pic03' id='pic03'>
        </li>
      </ul>
      <ul class='tableCaseT'>
        <li class='col2' style='width:589px;height:25px;text-align:right;'>
          <input type='submit' name='sub01' value='更新图片'>
　
                               
          <input type='hidden' name='set' value='1'>
        </li>
      </ul>
    </form>
  </div>
</div>

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

#tableFrame{
width:600px;
height:auto;
border-top:1px solid #C1DAD7;
border-left:1px solid #C1DAD7;
padding:0;
margin:20px auto;
font-size:12px;
}
#tableFrame:after {
content: ".";
display: block;
height: 0;
clear: both;
visibility: hidden;
}
#tableFrame ul{ float:left;}
#tableFrame li{
float:left;
display: block;
width:119px;
height:auto;
padding:0;
margin:0;
border-right:1px solid #C1DAD7;
border-bottom:1px solid #C1DAD7;
line-height:16px;
color:000;
}
#tableFrameTitle ul{}
#tableFrameTitle ul li{
width:109px;
height:20px;
margin:0;
padding:8px 0px 0 10px;
font-weight:bold;
color:#4F6B72;
text-align:center;
background:url(table_t_bg.jpg) no-repeat left top;
}
#tableCase ul{}
#tableCase ul li{
width:109px;
height:20px;
padding:8px 0px 0 10px;
margin:0;
}
.tableCaseT li{
background:#fff;
color:#4F6B72;
}
.tableCaseB li{
background:#F5FAFA;
color:#797268;
}
.tableCaseT .col1{
background:#fff url(table_bullet1.gif) no-repeat left top;
font-weight:bold;
}
.tableCaseB .col1{
background:#F5FAFA url(table_bullet2.gif) no-repeat left top;
font-weight:bold;
}
#tableFrame li.col1{
width:89px;height:70px;
}
#tableFrame li.col2{
width:209px;height:70px;
}
#tableFrame li.col3{
width:269px;height:70px; overflow:hidden;
}

在选择是用table 还是用ul来架构表单时，主要还是取决于数据结构，哪种更符合数据结构形式就采用哪种，如循环输入从数据库取出的数据元组，采用table相对而言还是更简洁，更便利一些。