Example of lining up columns in an HTML list box

by Crystal (Bliss) Sloan

Updated April 21, 2007. Many thanks to Stephen Ferg of bls.gov for pointing out that in at least some browsers, 1) a non-breaking space now works for spacing and 2) only the <select> tag needs its class set, not its <option> tags too.

Here is a way to line up the columns that works, if you don't mind substituting a spacer such as a non-breaking space (&nbsp;) a dot(·) or an underscore in place of every space in the text that makes up each row. Also, one cannot use tabs to help things line up but instead have to have columns of a fixed number of characters.
 
The method has three parts:
1) Use a charset that supports this. There are a number of them. Here is one I use:

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">

2) Use a fixed-width font in a style, and set the class attribute equal to that style for each element in the select option set of elements:

<style type="text/css">
.fixedwidth {font-family: Courier New}
</style>

<select name="whatever" class="fixedwidth">
<option value="1" class="fixedwidth">First··choice····2······asdf</option>
<option value="2" class="fixedwidth">Second·choices···1MiM······g</option>
</select>

<select name="whatever" class="fixedwidth">
<option value="1" class="fixedwidth">First&nbsp;&nbsp;choice&nbsp;&nbsp;&nbsp;&nbsp;2&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;asdf</option>
<option value="2" class="fixedwidth">Second&nbsp;choices&nbsp;&nbsp;&nbsp;1MiM&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;g</option>
</select>

3) In place of every single space that will show for an option, substitute another character, such as a non-breaking space (&nbsp;), an underscore, or a dot (character number 0183). Note that formerly the character used must be actually placed into the HTML as a single character, not as an &'d character number such as & 0183 ;.A non-breaking space now works! However, the use of the non-breaking space character entity for this has not been tested in all browsers.

In effect this combination of conditions places the contents of the option element in a sort of "pre"-tag monospace mode.

Here are some examples:

Choose one:
 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Copyright © 2002, 2007 EagleRidge Technologies, Inc. Use freely as long as copyright is included.