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.
You have the main HTML table for the general layout of the web page. The recordset (data) is in a DIV element. The DIV element is in a cell in the main table. As I have been saying, the recordset is an HTML table. The rows of the recordset are not as ordinary as we have seen previously. Each row of the recordset has one Table Cell. Each of these cells has one HTML table. Therefore you do not have to display a record only on one horizontal line. A record here can have text of different sizes, and can have images of different sizes. You lay out a record just as you would lay out an HTML table. Since the DIV element has scroll bars, you can still scroll up and down to see different records, each of which is a small table.
Our web page deals with watches. Each record has a title (name) for a particular watch; then text (a paragraph) that describes the watch; text (another paragraph) that shows the features of the watch; a reasonable-sized picture of the watch; the price of the watch; and a button to click and order the watch.
The title is in an HTML Text Input element. I used CSS to remove the borders of the Text Input element so that it would look like a conventional title. The description is in an HTML TEXTAREA element. When there is a large amount of text, the user can simply scroll up and down to see more text. This solves the problem of struggling to have a lot of text in a small area. The features are also in an HTML TEXTAREA element for the same reasons just mentioned.
I have not removed the borders of the TEXTAREA elements for the sake of clarity, since this is a tutorial article. You limit the width and height of the TEXTAREA elements using CSS. You do so to limit the height and width of a record. You can make the image of the watch the single element of a table cell. However, for the sake of simplicity and consistency I have made the image the background of a File Input Control. The value attribute of this control holds the path (and name) of the image in your server.
Recall that File Input Control has a text area and the browse button, which is used to locate a file. It is expected that this path should appear in the text area of the File Input Control, but my browser does not display the text. I like it this way because I do not even want the user to see the path. If your browser displays this, then that is not a big deal since it will occupy only a small portion of the image; it will not be bold or pronounced. The price is in a Text input element.
You can remove the borders of all the controls if you do not like them. Each data for the recordset is in a table cell. The “labels” e.g. “Features” are ordinary table text elements.
Note: you can format this tabular form in anyway you want. For example, you can remove all the borders of the controls, give them background colors, etc. The size of each control is specified by CSS. The aim is to have records of definite widths and heights.
Many of the other layout aspects of this page are the same as for the tabular form with only text data that we have addressed. I only address issues here that I have not addressed before.