Features:
- Subtle 3D styling
- Row selectors & select-all
function
- Sortable columns
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.
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.
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
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.
