Tabular Description List

J. Blustein

Web-centric Computing

Some Example Code

Example of Remaking a simple <table> using CSS

Example of <table>

As Displayed
Name [insert form field here]
Street address [insert form field here]
City [insert form field here]
Province [insert form field here]
Postal code [insert form field here]
As coded
<table id="basic">
 <tr>
  <th>Name</th>           <td>[insert form field here]</td>
 </tr>
 <tr>
  <th>Street address</th> <td>[insert form field here]</td>
 </tr>
 <tr>
  <th>City</th>           <td>[insert form field here]</td>
 </tr>
 <tr>
  <th>Province</th>       <td>[insert form field here]</td>
 </tr>
 <tr>
  <th>Postal code</th>    <td>[insert form field here]</td>
 </tr>
</table>


Using CSS with <dl>

As displayed
Name
[insert form field here]
Street address
[insert form field here]
City
[insert form field here]
Province
[insert form field here]
Postal code
[insert form field here]
As coded: CSS
dl.exDL    {display:block}
dl.exDL dt {font-weight:bold; display:run-in; width:15ex}
dl.exDL dd {display:inline}

<!--…-->

As coded: XHTML
<dl class="exDL">
 <dt>Name</dt>
   <dd>[insert form field here]</dd>
 <dt>Street address</dt>
   <dd>[insert form field here]</dd>
 <dt>City</dt>
   <dd>[insert form field here]</dd>
 <dt>Province</dt>
   <dd>[insert form field here]</dd>
 <dt>Postal code</dt>
   <dd>[insert form field here]</dd>
</dl>


The CSS example uses information (quoted below) from Cascading Style Sheets Level 2 Revision 1 (CSS 2.1) Specification W3C Candidate Recommendation 19 July 2007 <URL:http://www.w3.org/TR/2007/CR-CSS21-20070719> Edited by: Bert Bos, Tantek Çelik, Ian Hickson, and Håkon Wium Lie.

9.2.3 Run-in boxes

A run-in box behaves as follows:

  1. If the run-in box contains a block box, the run-in box becomes a block box.
  2. If a sibling block box (that does not float and is not absolutely positioned) follows the run-in box, the run-in box becomes the first inline box of the block box. A run-in cannot run in to a block that already starts with a run-in or that itself is a run-in.
  3. Otherwise, the run-in box becomes a block box.

A run-in box is useful for run-in headers, as in this example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<HTML>

  <HEAD>
    <TITLE>A run-in box example</TITLE>
    <STYLE type="text/css">
      H3 { display: run-in }
    </STYLE>
  </HEAD>

  <BODY>
    <H3>A run-in heading.</H3>
    <P>And a paragraph of text that
       follows it.
  </BODY>
</HTML>

This example might be formatted as:

  A run-in heading. And a
  paragraph of text that 
  follows it.

Despite appearing visually part of the following block box, a run-in element still inherits properties from its parent in the source tree.

As of 10 Feb. 2009, this example does not work properly with the very popular Firefox browser. See the compatibility chart for display at Peter-Paul Koch's quirksmode site.