原理很简单，就是利用ul li这样的列表元素，横排显示数据，也没什么新意，之所以写出来时因为它的这个模型很实用。

The HTML

<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>
    <li class="odd">
      <ul class="horz">
        <li>8476292164</li>
        <li class="name">Decent Widget</li>
        <li>Green</li>
        <li>Yes</li>
        <li class="price">$5.25</li>
      </ul>
    </li>
    <li>
      <ul class="horz">
        <li>8476292165</li>
        <li class="name">Good Widget</li>
        <li>Green</li>
        <li>No</li>
        <li class="price">$8.37</li>
      </ul>
    </li>
    <li class="odd">
      <ul class="horz">
        <li>8476292166</li>
        <li class="name">Great Widget</li>
        <li>Green</li>
        <li>Yes</li>
        <li class="price">$10.61</li>
      </ul>
    </li>
    <li>
      <ul class="horz">
        <li>8476292167</li>
        <li class="name">Amazing Widget</li>
        <li>Green/Black</li>
        <li>Yes</li>
        <li class="price">$299.99</li>
      </ul>
    </li>
  </ul>
</div><!-- end div#byitem -->

<div id="bycategory">
  <h3 class="tabletitle">Widget Performance (source by category)</h3>
  <ul class="horz">
    <li class="tableheader">
      <ul class="vert">
        <li>Widget</li>
        <li>Hot</li>
        <li>Cold</li>
        <li>New</li>
        <li>Broken</li>
      </ul>
    </li>
    <li class="odd">
      <ul class="vert">
        <li class="widgetname">Cheese Widget</li>
        <li>1.1</li>
        <li>0.5</li>
        <li>1.5</li>
        <li>0.0</li>
      </ul>
    </li>
    <li>
      <ul class="vert">
        <li class="widgetname">Good Widget</li>
        <li>1.6</li>
        <li>1.1</li>
        <li>1.9</li>
        <li>0.2</li>
      </ul>
    </li>
    <li class="odd">
      <ul class="vert">
        <li class="widgetname">Great Widget</li>
        <li>1.9</li>
        <li>1.4</li>
        <li>2.1</li>
        <li>0.5</li>
      </ul>
    </li>
    <li>
      <ul class="vert">
        <li class="widgetname">Amazing Widget</li>
        <li>2.3</li>
        <li>1.8</li>
        <li>2.8</li>
        <li>1.0</li>
      </ul>
    </li>
  </ul>
</div><!-- end div#bycategory -->

The 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;
	}
	
/* Widget Performance (by category) 
------------------------------------*/
div#bycategory ul.horz {
	clear: left;
	list-style-type: none;
	padding: 4px 0 0;
	margin: 0 0 140px;/* note! */
	}
div#bycategory ul.horz li {
	display: block;
	float: left;
	text-align: left;
	}
div#bycategory ul.vert {
	list-style-type: none;
	padding: 0;
	margin: 0 25px 0 0;
	}
div#bycategory ul.vert li {
	float: none;
	margin-bottom: 4px;
	padding-left: 6px;
	text-align: left;
	}
div#bycategory ul.horz li.odd {
	background-color: #eee;
	}
div#bycategory ul.vert li.widgetname {
	font-weight: bold;
	}
div#bycategory ul.horz li.tableheader ul.vert li {
	padding-left: 0;
	}
	
li.tableheader {
	font-weight: bold;
	}

/* good looks
------------------------------------*/
#extended h3.tabletitle {
	padding: 10px 0 0;
	clear: left;
	}