Tabular Database Forms with HTML - The Layout
(Page 2 of 4 )
With our tabular form, the recordset, which is the data the user sees, is housed in a DIV element. You need to give the DIV element definite width and height dimensions. We give the DIV element the CSS overflow property of "overflow:scroll." With this property, the DIV element acquires the vertical and horizontal scroll bars. You can use these bars to scroll through the recordset.
There are three tables in the DIV element. The first table displays the titles for the recordset columns. The second table is the recordset. The third table displays the buttons (Add, Edit etc.). You have to make sure that the columns of the first and second tables are aligned. You have to choose the dimensions of the three tables so that they fit well in the DIV element.
As you can see from the above figure, there are no navigation buttons. We do not need them here. We have the scroll bars for that. So the lines for the navigation buttons and their JavaScript functions are removed from the code.
Recall that for the Single-Row Form the CSS display property for the recordset table is "display:none." Here we do not need that property. The default behavior of an HTML table is to be displayed as a block level element and to occupy space. Our recordset in the DIV element does not have that property.
Now that we have a table as the recordset, which is seen by the user, how can he edit data? For the Single-Row Form, data was entered in Input Text Controls. There were only six Input Text Controls corresponding to the six visible columns. Data was sent from the controls to a row in the recordset and back.
The solution here is to have one Input Text Control for each cell in the recordset. You set all their read-only property to "true." When the user wants to edit a row, you set the read-only property for all the Input Text Controls for that row to "false."
I will address the case when data is an image later. In this and the next part of the series I will talk only about small text data.
If you allow the default values for cellspacing and cellpadding for the recordset table, the gaps between the Input Text Control data will be rather wide. To make the gaps look conventional, set the cellspacing and cellpadding attributes to zero.
For the Single-Row Form we had to indicate the record position and the total number of rows. Here we can see the rows or simply scroll to see what is not visible. The size of the gray box of the vertical scroll bar indicates how long the recordset is. So we do not really need to indicate the row position and the total number of rows. For the sake of design simplicity we remove this feature and its corresponding code.
If your recordset is sorted, then you can easily scroll up or down to see a particular record. So we do not really need the Find function. For the sake of design simplicity we remove this feature and its corresponding code.
In the web page here, there is a main table for the page layout. Our DIV element is in a cell of this table. This is the content of the body element for the web page:
<body onload="start()">
<table>
<tbody>
<tr>
<td width="150">
</td>
<td>
<br /><br /><br /><br />
<table id="CT1">
<tr>
<table width="420">
<COLGROUP>
<col span="6" width="70">
</COLGROUP>
<tr><th>ID</th><th>Name</th><th>Dep't</th><th>Job</th><th>Years</th>
<th>Salary ($)</th></tr>
</table>
</tr>
<tr>
<td>
<div id="Tabular1">
<!-- The Recordset -->
<table cellspacing="0" cellpadding="0" id="Recordset">
<tbody>
<COLGROUP>
<col span="6" width="70">
<col id="Co6">
</COLGROUP>
Next: The Layout continued >>
More HTML Articles
More By Chrysanthus Forcha
