This worked example applies styling
and functionality to a basic grid of data to produce a simple form
control that's a pleasure to use.
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.
.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 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 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 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: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 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.