Make sure you don't miss the latest insights and tips. Click here to sign up for my mailing list now! ยป

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.

ItemDescriptionSupplierPriceAvail
021Small rubber widgetWidgets Inc.£1Yes
204Photoshop CSAdobe Inc.£499No
213About Face 2.0Alan Cooper£24.99Yes
336Dell Inspiron 5150Dell.co.uk£999Yes

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>.

ItemDescriptionSupplierPriceAvail
021Small rubber widgetWidgets Inc.£1Yes
204Photoshop CSAdobe Inc.£499No
213About Face 2.0Alan Cooper£24.99Yes
336Dell Inspiron 5150Dell.co.uk£999Yes

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; } 
ItemDescriptionSupplierPriceAvail
021Small rubber widgetWidgets Inc.£1Yes
204Photoshop CSAdobe Inc.£499No
213About Face 2.0Alan Cooper£24.99Yes
336Dell Inspiron 5150Dell.co.uk£999Yes

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; } 
ItemDescriptionSupplierPriceAvail
021Small rubber widgetWidgets Inc.£1Yes
204Photoshop CSAdobe Inc.£499No
213About Face 2.0Alan Cooper£24.99Yes
336Dell Inspiron 5150Dell.co.uk£999Yes

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.

ItemDescriptionSupplierPriceAvail
021Small rubber widgetWidgets Inc.£1Yes
204Photoshop CSAdobe Inc.£499No
213About Face 2.0Alan Cooper£24.99Yes
336Dell Inspiron 5150Dell.co.uk£999Yes
<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 DescriptionSupplierPriceAvail
021Small rubber widgetWidgets Inc.£1Yes
204Photoshop CSAdobe Inc.£499No
213About Face 2.0Alan Cooper£24.99Yes
336Dell Inspiron 5150Dell.co.uk£999Yes

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.

About the author

Ben Hunt

Ben is the creator of Web Design From Scratch. He started writing articles about web design to kill time on a long train commute, and is now one of the most influential figures on the subject of effective web design. He has written three books and spoken at multiple conferences internationally.

Anand - 4 years ago

Interesting article but the interface_styles.css link doesn’t seem to be working. None of the table boders are showing and the “select all” checkbox doesn’t seem to work.

Love the site!

    ben - 4 years ago

    Thanks Anand. By-product of our recent migration to WordPress. Now fixed.

elfo - 4 years ago

A “tabular list”? What on earth is a tabular list? That there is a table. Containing tabular data.

Nazir - 4 years ago

I am using firefox. Like Anand said, your final tabular column does not work, It cant be sorted, nor are the delete selected working. The page Only refreshes!

ben - 4 years ago

Hi Nazir. This is only an HTML/CSS example (and a pretty old one at that). There is no logic to make the delete or sorting work, that would be done by middleware scripting.

lik654 - 3 years ago

Great web site! I am realy happy stumbling upon it!

Ed - 3 years ago

Try aligning the prices by decimal-point.

gurpreet - last year

u said that donot put html and javascript together . . but how this can run by crating html and java script on diffrent files. .. plz reply

Comments are closed