Making a Tabular list in HTML

1. A basic table

We want to show several data records in a handy grid, let the user sort the list, and delete one or more selected records.

We’ll start with a basic table.

2. Differentiate the column headers in HTML

We’ll make the first row stand out by making it a <thead> instead of <tr>. Instead of table-data cells, <td>s, table heads use <th>.

3. Style the table

So far our table doesn’t have any styling applied. Next step is to give it a CSS class that sets various properties.

 .tabular_list th { border:1px solid; border-color:#ddd #999 #888 #ddd; background-color:#ddd; font-weight:bold; text-align:left; color:#003; padding:2px; padding-bottom:0px; font-size:.9em; } .tabular_list td { border:1px solid; border-color:#fff #bbb #bbb #fff; background-color:#fff; padding:1px; font-size:.9em; } 

These CSS styling rules are contained in a separate file, interface_styles.css.

The table is now described as <table class="tabular_list"> in the HTML. It inherits the properties of the tabular_list class (classes are prefixed with a dot/period in CSS).

The CSS sets properties for all table cells (<td>s) and table header cells (<th>s) in any element whose class is "tabular_list".

<th>s get a 3D-effect border (top and left edges are lighter than the background; right and bottom edges are slightly darker), as well as padding (empty space around the contents of the cell).

<td>s get a grey right edge and bottom edge. This produces the light grid effect.

4. Make the grid stand out from its background

Currently, the table seems to melt into its background. To make it stand out more clearly, I’ll apply a thin black border, again using CSS.

The table now sits inside a <div class="form_border">

 .form_border { border:1px solid #333; } 

5. Add a select/deselect-all control

I want users to be able to select records in the list (which might be in order to delete them, or ‘mark as read’).

I’ll add a further column, with checkboxes in each, plus a ‘select all’ type checkbox in the column header.

<script type="text/javascript">
<!--
function checkAll(wotForm,wotState) {
   for (a=0; a<wotForm.elements.length; a++) {
      if (wotForm.elements[a].id.indexOf("delete_") == 0) {
	     wotForm.elements[a].checked = wotState ;
      }
   }
}
// -->
</script>

The HTML for the master ‘select/deselect all’ checkbox looks like this:

<input type="checkbox" onClick="checkAll(this.form,this.checked);" /> 

The call to the checkAll function passes two parameters: firstly, the current form object; followed by the checked status of the master checkbox after it’s clicked.

The function loops through all the elements in the form object passed to it, and tests whether the element’s name starts with the string "delete_". (indexOf returns the first occurrence of a substring within another string, starting at position zero. If the substring is not found, -1 is returned).

If the substring is found at position zero (i.e. the name of the checkbox begins with "delete_"), the function sets the checked property of the current form control to True.

6. Add column sorting functionality

We’ll need a sorted-column indicator, to show which column is currently sorted by.

Each column header should be clickable, to change the sort order. So we need to apply a link anchor to column headers, enabling user to click anywhere in the <th>.

For the sorted-column indicator, I’ll just use a down- or up-arrow GIF image.

Now, each table head cell needs to be totally clickable. The way I’ve done this is to put an anchor/link tag (<a href="etc">) in the <th>, and set the anchor’s properties in the stylesheet as follows.

th a { color:#003; display:block; width:100%; height:100%; } 

The color setting makes the text very dark blue.

"display:block;" makes the anchor behave like a box, rather than like a wrap-around (which would be style "display:inline;". (Note: By default, <div> tags are "display:block;" , whereas <span> tags are display:inline;)

By setting its display to block, I can then set the size of the box to width 100% and height 100%, which makes it fill the space.

(I know the CSS specification says that anchors should never contain block elements, but I can’t find a better way to achieve this effect, so in this case the standard can take a back seat).

Now, if you move the mouse over any of the column head cells (except the ‘select all’), the link highlights, telling you that it’s active.

I’ve also used the title attribute of the anchor tag (i.e. <a title="Link description>Link</a> to provide more information on what clicking each column head will do.

7. Final tabular grid

Item	Description	Supplier	Price	Avail
021	Small rubber widget	Widgets Inc.	£1	Yes
204	Photoshop CS	Adobe Inc.	£499	No
213	About Face 2.0	Alan Cooper	£24.99	Yes
336	Dell Inspiron 5150	Dell.co.uk	£999	Yes

Notes on column sorting:

• Conventional behaviour is that clicking any non-sorted column will sort records by the data in that column, in ascending order.
• When data is sorted ascending, the column should display an ‘up’ arrow (which goes from thin-to-fat, like the data going from small-to-big). When sorted in reverse order, the arrow should point down.
• Clicking on the sorted column will reverse its sort order.
• When developing, I usually write two hidden form fields:
  • "sorted" stores the name of the field currently sorted by.
  • "desc" whose value is either blank, if the current field is sorted ascending, or "desc" if the current field is sorted descending.
  • When writing the SQL query that retrieves the data, I simply write in the current (switched-round) "desc" value at the end of the "ORDER BY" line.