[Record Lists Without Using Tables] at tagSwap.net: Open Source Lasso Code

[Record Lists Without Using Tables]

Greg Willits, March 03, 2006

I've been experimenting with some particular presentation issues that require HTML/CSS trickery or compromises to satisfy desktop browsers and handhelds.

One of them is lists of records. Tables are still commonly used for this, but I was looking for another solution that would degrade well for either small screens or any reader that just didn't like tables.

I have found that looking for these compromises sometimes requires using tags from the limited HTML tag set for purposes maybe not quite in line with their intent. This particular solution uses the DL/DT/DD structure where DL is a wrapper for the row, DT is used to emphasize the first field, and DD is a regular field cell. As of this writing I have no idea how using DL would affect accessibility for specialized browsers, but it gives us a traditional table look for desktop browsers, degrades quite nicely in plain HTML on the desktop browsers, and would be quite suitable for reformat control on handhelds.

This is what the basic stucture looks like:

<dl>
   <dt>Harvey Baker</dt>
   <dd>current</dd>
   <dd>harveyb@mail.com</dd>
   <dd>admin</dd>
</dl>

However, we add a little CSS to control the appearance of each one, and a little display trickery for some labeling when not in column format, and we get this for the HTML:

<dl class="rcrdsrow rowA">
   <dt class="name"><a href="#">Harvey Baker</a></dt>
   <dd class="status"><span class="noshow">Status: </span>current</dd>
   <dd class="email"><span class="noshow">Email: </span>harveyb@mail.com</dd>
   <dd class="type"><span class="noshow">Type: </span>admin</dd>
</dl>

Files

Tableless Record Lists

[Record Lists Without Using Tables]

Files

Articles