Tabular List control

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:javascript:void(0)ddd	 javascript:void(0)999 	 javascript:void(0)888 	 javascript:void(0)ddd;	background-color:javascript:void(0)ddd;	font-weight:bold;	text-align:left;	color:javascript:void(0)003;	padding:2px;	padding-bottom:0px;	font-size:.9em;}.tabular_list td {	border:1px solid;	border-color:javascript:void(0)fff 	 javascript:void(0)bbb 	 javascript:void(0)bbb 	 javascript:void(0)fff;	background-color:javascript:void(0)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 tableheader cells (<th>s) in any element whose class is"tabular_list".

<th>s get a 3D-effect border (top and left edges are lighterthan the background; right and bottom edges are slightly darker), aswell 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 javascript:void(0)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 mastercheckbox after it's clicked.

The function loops through all the elements in the form objectpassed to it, and tests whether the element's name starts with thestring "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 thecheckbox begins with "delete_"), the function sets the checked propertyof 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 wayI've done this is to put an anchor/link tag (<a href="etc">) inthe <th>, and set the anchor's properties in the stylesheet asfollows.

th a {	color:javascript:void(0)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 boxto width 100% and height 100%, which makes it fill the space.

(I know the CSS specification says that anchors should nevercontain block elements, but I can't find a better way to achieve thiseffect, 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'sactive.

I've also used the title attribute of the anchor tag (i.e. <atitle="Link description>Link</a> to provide more informationon 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.
• Whendata 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 sortedascending, or "desc" if the current field is sorted descending.
• Whenwriting the SQL query that retrieves the data, I simply write in thecurrent (switched-round) "desc" value at the end of the "ORDER BY" line.

Related Articles

• Why A CSS Website Layout Will Make You Money
  Although CSS layouts have been around for years, they havent become so commonplace until recently.
• So what are Semantics, Anyway?
  These days you hear a lot about web standards and semantics. What do semantics mean? Is it really important to know and use in web design?
• Control Panel Round Up (Part 3 of 3)
  Over the past two days I have looked at many different control panels. Some offered less, and some offered more. Which one will be the best? That has yet to be seen. By the end of this article though, you will at least know my Web hosting opinion on the matter. Today we will finalize this...
• Web Designer's Guide to Search Engine Optimization
  From a search engine point of view, the perfect webpage has no graphics, no scripting, no tables...etc but just alot of normal, plain readable text. You can just take it that plain text is the food for search engine spiders.
• Make Your Website Rank Higher in Major Search Engines! Benefits of CSS in SEO
  Cascading Style Sheets (CSS) is a style sheet language that permits web designers to attach style like spacing, color, font, etc. to HTML documents. Cascading style sheets work similarly to a template;
• Wanted, Control Panel on the Cheap!
  As the Web hosting control panel questions keep rolling in, Ill keep answering them. This latest question came to me after writing the three part series on control panels a few weeks ago for Lockergnome...
• How to Pick a Hosting Company
  Choosing a hosting company can be a daunting task especially since there are so many hosting companies trying to lure you in with the best hosting package at the cheapest price. But before you jump at that cheapest deal you find online, there are several things consider.
• Control Panel Round Up (Part 2 of 3)
  In yesterday
• Changing Web Hosting Providers
  If you would like to cut costs or are no longer satisfied with their current web host provider maybe it is time to think about changing web host providers. Take time to plan your transfer so that you wont lose any files and data...
• Top 3 Tips For Protecting Your Domain Name
  Do you have a business website? Do you ever plan on having a website for your business? Are you even remotely interested in having a website for your business? If youve answered yes to any of these questions then its important that you pay special attention to what were about to discuss here.

Contact Web Design Outsource and get started today