In this tenth part of a thirteen-part series, we shall consider what changes when we use more text (a paragraph or more) and images with tabular forms. It can be difficult to do this with traditional database programming. Here it is easy because we have a recordset whose contents can be seen (the HTML table element with the default display property). All we need for an image in the recordset is a link to the image.
Laying Out a Database Form with HTML - The Recordset (Page 4 of 4 )
Recall that we are still dealing with a Tabular form but in a different way. However, here, a record is not in one horizontal row as we saw previously. The recordset is an HTML table that has rows. Each of these rows has only one cell. Each of these cells has a table, which is actually the record. The good thing here is that you can give the table (record) a two dimensional format and decorations. Each table record here actually has three rows.
There are three rows and three columns for a record table. You can arrange your own record (table) in any way you want, depending on what you have as data. This is a page that sells watches; you can have other items for your own products.
Here the titles (names) of the watches are long, so the first row is reserved for the title. There is only one cell in it with the attribute “colspan=’3’”. The next row has three cells. The first takes the description of the watch for the record; the second takes the features, and the third takes the Input File Control.
The background image of this control is the image of the watch. Alternatively, you can make the background image of the table cell the image. This table cell has a “rowspan=’2’” attribute. This is because I want the image to have a reasonably long length. This means that you cannot have the third cell for the third row.
The third row of the record takes two cells. The first cell gives the price of the watch and the second cell has the button to add to shopping cart.
The First Record
This is the opening tag of the recordset and the first record.
<textarea style="width:245px;height:90px" readonly id="EI01" rows="1" cols="20">An attractive case in a polished silvertone finish, this JLO timepiece features a metallic pink dial and matching leather strap, making it a distinctive addition to any woman's wardrobe.</textarea>
</td>
<td width="250" height="120">
<b>Features</b>
<textarea style="width:245px;height:90px" readonly id="EI02" rows="1" cols="20">Polished silvertone square case. Stainless steel caseback. Silvertone hands. Funky 3, 6, and 9 numbers. JLO logo at 12 o'clock. Metallic pink dial. Japanese quartz movement. Pink leather strap. Tang buckle.</textarea>
Go through this code because you will have to make comparison with it and the next piece of code. Note the attributes and contents of the six different table cells in the record-table.
We will take a break here. We shall carry on in the next part of the series.
DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.
HTML 
Building the Recordset for an HTML Database Form
