css From:
原理很简单，就是利用ul li这样的列表元素，横排显示数据，也没什么新意，之所以写出来时因为它的这个模型很实用。
xhtml:<div id="byitem">
 <h3 class="tabletitle">Widgets America (source by item)</h3>
 <ul class="vert">
 <li class="tableheader">
 <ul class="horz">
 <li>Item #</li>
 <li class="name">Name</li>
 <li>Color</li>
 <li>In Stock?</li>
 <li class="price">Price</li>
 </ul>
 </li>
 <li>
 <ul class="horz">
 <li>8476292163</li>
 <li class="name">Cheese Widget</li>
 <li>Green</li>
 <li>Yes</li>
 <li class="price">$3.14</li>
 </ul>
 </li>
 </ul>
</div>：/* Widgets America (by item)
------------------------------------*/
div#byitem ul.vert {
  list-style-type: none;
  padding: 0;
  margin: 0;
  width: 540px;
  }
div#byitem ul.vert li {
  padding: 4px 0;
  margin: 0;
  height: 14px; /* space out your rows */
  }
div#byitem ul.vert li.odd {
  background-color: #eee;
  }
div#byitem ul.horz {
  clear: left;
  list-style-type: none;
  padding: 0;
  margin: 0;
  }
div#byitem ul.horz li {
  float: left;
  width: 80px;
  padding: 0 20px 0 0;
  margin: 0;
  }
div#byitem ul.horz li.name { /* size your columns individually at the expense of »
 slightly bloated markup (labelling each appropriate <li> with this class) */
  width: 130px;
  }
div#byitem ul.horz li.price {
  text-align: right;
  padding-right: 0;
  }