Ideas: Tabular Lists

These Are Not Tables

They’re nested unordered lists. HTML, CSS, and Comments follow.

New: Discussion links!

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;
	}

Browser Specs:

Widgets America

Works in: IE6/Win, Safari, Mozilla 1.4
Does not work in: IE/Mac

Widget Performance

Works in: IE6/Win, Safari, Mozilla 1.4
Does not work in: IE/Mac

Banter:

After coding the tabular list now entitled “Widget Performance” I tried using it on a project at work, to display an ASP-driven list of products with each column as a separate unordered list but each product as a row. I don’t know what I was thinking. The ASP programmer I was working with didn’t like it one bit; he would have had to make an exorbitant number of calls to the database, one for each item attribute showcased in the product list.

I coded “Widgets America” to solve this problem. Each row is a separate unordered list, instead of each column. This way jives with the ASP loop that generates products in the list one by one – it generates nested unordered lists (rows) one by one, one for each product.

While “Widgets America” was more useful for me for that project, “Widget Performance,” though I initially mispurposed it, would be helpful when it’s important to primarily group the table into columns.

Discussion (New!)

• Kind words from Lyle, from A List Apart
• Jop asks, “Why?”, from A List Apart
• Tim answers Jop and invites discussion, from A List Apart
• Ryan: the W3C and semantics say, “tables!”, from A List Apart

Built:

By Tim Brown.

For Maxdesign’s Listamatic.

Partly on Wonderbred’s time (unblock popups).

Maxdesign is cool.