悠悠博客 关注Ajax技术与web开发

原理很简单，就是利用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>
CSS：
/* 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;
}