CSS to make table effects

CSS from: http://www.tbrown.org/ideas/tabularlist/
The principle is very simple, is to use the UL Li such list element, the horizontal display data, also does not have the new idea, because it's this model is very practical.
Xhtml:<div id= "Byitem" >

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