This worked example creates a compact form with multiple similar records, with the familiar appearance of a datasheet.Note: I'm going to update this tutorial soon with more robust DHTML and CSS.
- Familiar datasheet-style input grid
- Ability to update multiple changed records
- Shows which fields have been edited
You want to let users view, enter, or edit multiple records of the same type. You would like to use the least space possible, without compromising usability.
A conventional way of showing multiple similar rows is the datasheet. It takes the labels for fields and records to the extremes (column and row headers), allowing for a very compact format.
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
It's always good practice to make column headers <th> tags inside the table's <thead> section.
3. Style the table
The table headers above have the browser's default <th> styling, so don't look very good. We'll fix that by applying a style class to the table.
In HTML, the table is now <table class="datasheet">
The styled table:
The table headers now have the grey, bevelled effect we want. The table cells still look untidy, so we'll fix that now.
In a real datasheet, the entire grid cell is the input field, so we want the form inputs in the cells to fill the entire cell. That's achieved with the section:
In English, this applies to "Any form input that is a child of a table cell within an object of class 'datasheet' ".
Also notice the //width:90%; and //height:90%;
This is a fix for IE versions, which can make the elements overlap outside their containing cells when set to 100% width/height.
Note: I've used both "border:0px" and "none". This is required to force the input controls' borders to be hidden in all browsers.
5. Make the datasheet fit into the background
Currently, the table doesn't stand out from the grey background quite enough. We'll use a bit of CSS to give it a groove effect.
To do this, I'll wrap the whole datasheet inside two divs:
You can simply wrap an element in a div with a solid border, with light right & bottom edges and darker top & left edges, but this technique works better at the corners in Mozilla/Netscape.
I am nested in 2 different divs. I work fine in IE and Mozilla too.
Here's our datasheet with the groove effect - nice!
6. Add row counters
With a large table, you might want to have row counters. These aren't part of the editable datasheet, so we want to style them the same as table headers.
This is easy to do in HTML/CSS. All we'll do is add <th> cells at the beginning of each line (which is legal).
I've added an extra bit of formatting to make the row numbers right-align, and pad them out from the right side of the cells.
You could use this style for any piece of non-editable data, typically a record's unique identifier.
7. Final touch - showing changed fields
Often when I use this type of control, when you've edited data and hit submit, the same page reloads. This creates a usability issue: How do you know that your data has indeed been submitted?
Notes on multiple-row forms:When I use this kind of datasheet in a web application, it's coded so that users can edit multiple records (rows).
Each record has a hidden field, e.g. <input type="hidden" value="" name="record_1_changed" />
When submitted, the back-end code reads another hidden field ('record_ids') that gives a list of the records present. It then checks the form data to see if each record's 'changed' property is true. Only then does it update the related record in the database.