The htmlarraytable statement generates an HTML table from an arrray.
Parameters
This statement has five parameters:array – Array to be converted
rowsep – Row separator character (default is carriage return)
colsep – Column separator character (default is tab)
result – Name of the field or variable that will contain the final table in HTML format.
options – Option tags (described in detail below).
Description
This statement generates an HTML table from a text array. (If you want to generate an HTML table from a database, see the HTMLDataTable statement. For the examples in this section we will be using the text array shown below. The demoArray variable contains a two dimensional array, with carriage returns as the primary separator character (between rows) and the ~ symbol as the secondary separator (between columns).
local demoArray
demoArray={1~Southern Pacific Box Car~12.99~12.99
1~Western Pacific 2-8-0 Steam Locomotive~189.99~189.99
1~Amtrak Genesis Diesel Locomotive~129.95~129.95
1~Illinois Central Gondoloa~14.99~14.99
1~Santa Fe Box Car (Grand Canyon)~18.99~18.99
1~Union Oil 3 Dome Tank Car~24.99~24.99}
Here is a simple procedure that renders this array into HTML.
htmlarraytable demoArray,cr(),"~",cgiHTML
In the browser the rendered page will look like this:
| 1 | Southern Pacific Box Car | 12.99 | 12.99 |
| 1 | Western Pacific 2-8-0 Steam Locomotive | 189.99 | 189.99 |
| 1 | Amtrak Genesis Diesel Locomotive | 129.95 | 129.95 |
| 1 | Illinois Central Gondoloa | 14.99 | 14.99 |
| 1 | Santa Fe Box Car (Grand Canyon) | 18.99 | 18.99 |
| 1 | Union Oil 3 Dome Tank Car | 24.99 | 24.99 |
This table isn’t very attractive but you can easily customize the appearance (see below).
To customize the appearance of the table you’ll need to specify some options in the fifth parameter of the htmldatatable statement. The options are specified as assignments, similar to the options in many HTML tags. Here is a basic example (remember that { and } can be used as quote characters).
htmlarraytable demoArray,cr(),"~",cgiHTML,{border=0 font="Verdana" fontsize=-1}
The available option tags are described in the following sections.
There are four options that allow you to specify what array columns will be included in the table and how they are titled and arranged. The examples below demonstrate the syntax of these options.
column=formula If you specify any columns at all you must include one column= option for each column in the table. The formula specifies what data will be displayed in the column. To include a cell from the array being rendered use «1», «2», «3», where the number between the « and » represents the column number within the array.
title=text If you specify any titles at all you must include one title= option for each column in the table.
width=number If you specify any widths at all you must include one width= option for each column in the table. The width is specified in points, for example width=72 for a column that is 1 inch wide.
align=left/center/right If you specify any alignment at all you must include one align= option for each column in the table. The alignment for each field may be left, center or right (for example align=right).
Here’s a very simple example that displays only the first two columns from the array. The last two are ignored.
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
column={«1»}
column={«2»}
|||
Here’s the table rendered by this procedure.
| 1 | Southern Pacific Box Car |
| 1 | Western Pacific 2-8-0 Steam Locomotive |
| 1 | Amtrak Genesis Diesel Locomotive |
| 1 | Illinois Central Gondoloa |
| 1 | Santa Fe Box Car (Grand Canyon) |
| 1 | Union Oil 3 Dome Tank Car |
The next example displays all four columns: Qty, Item, Price and Total. (Note: In this example the options are shown formatted on separate lines for clarity, but this formatting is not necessary.)
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
column={«1»} title={Qty} align=center width=30
column={«2»} title={Item} align=left width=300
column={«3»} title={Price} align=right width=60
column={«4»} title={Total} align=right width=60
|||
This table includes titles, alignment and specific widths.
| Qty | Item | Price | Total |
| 1 | Southern Pacific Box Car | 12.99 | 12.99 |
| 1 | Western Pacific 2-8-0 Steam Locomotive | 189.99 | 189.99 |
| 1 | Amtrak Genesis Diesel Locomotive | 129.95 | 129.95 |
| 1 | Illinois Central Gondoloa | 14.99 | 14.99 |
| 1 | Santa Fe Box Car (Grand Canyon) | 18.99 | 18.99 |
| 1 | Union Oil 3 Dome Tank Car | 24.99 | 24.99 |
The columns don’t have to be displayed in the same order that they occur in the array, you can reorder them as necessary.
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
column={«1»} title={Qty} align=center width=30
column={«3»} title={Price} align=right width=60
column={«2»} title={Item} align=left width=300
column={«4»} title={Total} align=right width=60
|||
In this example the Price has been moved to the second column of the rendered table, even though it is in the third column of the array.
| Qty | Price | Item | Total |
| 1 | 12.99 | Southern Pacific Box Car | 12.99 |
| 1 | 189.99 | Western Pacific 2-8-0 Steam Locomotive | 189.99 |
| 1 | 129.95 | Amtrak Genesis Diesel Locomotive | 129.95 |
| 1 | 14.99 | Illinois Central Gondoloa | 14.99 |
| 1 | 18.99 | Santa Fe Box Car (Grand Canyon) | 18.99 |
| 1 | 24.99 | Union Oil 3 Dome Tank Car | 24.99 |
You can modify the array data with a formula before it is rendered.
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
column={«1»} title={Qty} align=center width=30
column={upper(«2»)} title={Item} align=left width=370
column={«3»} title={Price} align=right width=60
column={«4»} title={Total} align=right width=60
|||
This formula displays the second column in all upper case (we’ve also moved the Price column back to the traditional location.
| Qty | Item | Price | Total |
| 1 | SOUTHERN PACIFIC BOX CAR | 12.99 | 12.99 |
| 1 | WESTERN PACIFIC 2-8-0 STEAM LOCOMOTIVE | 189.99 | 189.99 |
| 1 | AMTRAK GENESIS DIESEL LOCOMOTIVE | 129.95 | 129.95 |
| 1 | ILLINOIS CENTRAL GONDOLOA | 14.99 | 14.99 |
| 1 | SANTA FE BOX CAR (GRAND CANYON) | 18.99 | 18.99 |
| 1 | UNION OIL 3 DOME TANK CAR | 24.99 | 24.99 |
You can add text constants to the formula, for example HTML tags. Be careful about quoting, though. In this example you would not want to use “ ” or { } as quote characters within the formula.
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
column={«1»} title={Qty} align=center width=30
column={«2»} title={Item} align=left width=300
column={«3»} title={Price} align=right width=60
column={"<b>"+«4»+"</b>"} title={Total} align=right width=60
|||
This formula makes the Total column bold.
| Qty | Item | Price | Total |
| 1 | Southern Pacific Box Car | 12.99 | 12.99 |
| 1 | Western Pacific 2-8-0 Steam Locomotive | 189.99 | 189.99 |
| 1 | Amtrak Genesis Diesel Locomotive | 129.95 | 129.95 |
| 1 | Illinois Central Gondoloa | 14.99 | 14.99 |
| 1 | Santa Fe Box Car (Grand Canyon) | 18.99 | 18.99 |
| 1 | Union Oil 3 Dome Tank Car | 24.99 | 24.99 |
Remember that numeric values within the array are really text. So if you want to do a calculation with a number (or display it using an output pattern) you must convert it to a number first with the val( function.
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
column={«1»} title={Qty} align=center width=30
column={«2»} title={Item} align=left width=300
column={«3»} title={Price} align=right width=60
column={"<b>"+pattern(val(«4»),"$ #,.####")+"</b>"} title={Total} align=right width=90
|||
This example uses the pattern( function to format the totals.
| Qty | Item | Price | Total |
| 1 | Southern Pacific Box Car | 12.99 | $ 12.9900 |
| 1 | Western Pacific 2-8-0 Steam Locomotive | 189.99 | $ 189.9900 |
| 1 | Amtrak Genesis Diesel Locomotive | 129.95 | $ 129.9500 |
| 1 | Illinois Central Gondoloa | 14.99 | $ 14.9900 |
| 1 | Santa Fe Box Car (Grand Canyon) | 18.99 | $ 18.9900 |
| 1 | Union Oil 3 Dome Tank Car | 24.99 | $ 24.9900 |
You can use any operator or function you want in a formula, and you can also include other fields or variables.
There are four “template” options that allow you to specify how text will be displayed within the table.
font=font name This option specifies the font to use to display the table. (If left blank the browser’s default font will be used.) On your own computer you can use any font you want because you have complete control over what fonts are installed and available for use. A web page, however, is the opposite situation since you have zero control over what fonts may be available when the page is viewed. Because of this it is usually best to pick from a restricted subset of fonts that are almost universally available. The fonts that are most commonly available are: Arial, Comic Sans MS, Courier, Georgia, Helvetica, Times and Verdana. If the font name contains spaces or punctuation it must be surrounded with quotes, for example font="Comic Sans".
fontsize=1..7/+1..+7/-1..-7 This option specifies the size of the text to be used for the table. But take note — the size is not specified in points. Instead it is specified using a special HTML text size specification. Absolute values (1–7) specify a fixed font size from extremely small (1) to huge (7). Negative values specify sizes smaller than the text size in the rest of the page, for example -2 is two sizes smaller than normal font. Positive values specify sizes larger than the text size in the rest of the page, for example +2 is two sizes larger than normal font.
fontcolor=color By default Panorama web tables use black text, but you can use any color you want. HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF). For example fontcolor="0000FF" represents pure blue, fontcolor="00FF00" represents pure green, and fontcolor="FF0000" represents pure red. Using this notation you can specify millions of different colors.
titlecolor=color The text in the title row is normally the same color as the rest of the text in the table (see fontcolor above) but you can specify a different color, for example titlecolor="660000" for dark red.
These options allow you to specify borders and spacing within the table.
border= points This option specifies the thickness (in points) of the border around each cell in the table. If the value is set to 0 then there is no border at all.
cellspacing= points This option specifies the space between each cell in the table (in points).
cellpadding= points This option specifies the space between the contents of each cell (text or image) and the edge of each cell (in points).
The color option allows you to specify a background color for the table.
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
color="FFFFCC"
font="Helvetica" size=-1 border=0
...
In this example the background color has been set to pale yellow.
| Qty | Item | Price | Total |
| 1 | Southern Pacific Box Car | 12.99 | 12.99 |
| 1 | Western Pacific 2-8-0 Steam Locomotive | 189.99 | 189.99 |
| 1 | Amtrak Genesis Diesel Locomotive | 129.95 | 129.95 |
| 1 | Illinois Central Gondoloa | 14.99 | 14.99 |
| 1 | Santa Fe Box Car (Grand Canyon) | 18.99 | 18.99 |
| 1 | Union Oil 3 Dome Tank Car | 24.99 | 24.99 |
If you include two, three or more colors these colors will alternate as each row is rendered.
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
color="EEFFFF"
color="CCFFDD"
font="Helvetica" size=-1 border=0
...
In this example the rows alternate between light blue and green.
| Qty | Item | Price | Total |
| 1 | Southern Pacific Box Car | 12.99 | 12.99 |
| 1 | Western Pacific 2-8-0 Steam Locomotive | 189.99 | 189.99 |
| 1 | Amtrak Genesis Diesel Locomotive | 129.95 | 129.95 |
| 1 | Illinois Central Gondoloa | 14.99 | 14.99 |
| 1 | Santa Fe Box Car (Grand Canyon) | 18.99 | 18.99 |
| 1 | Union Oil 3 Dome Tank Car | 24.99 | 24.99 |
The colorpattern option customizes the pattern used to alternate between colors. For example the option colorpattern="1112" will render three rows in the first color, then one row in the second color.
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
color="EEFFFF"
color="CCFFDD"
colorpattern="111222"
font="Helvetica" size=-1 border=0
...
This pattern produces three rows with a light blue background then three with a green background
| Qty | Item | Price | Total |
| 1 | Southern Pacific Box Car | 12.99 | 12.99 |
| 1 | Western Pacific 2-8-0 Steam Locomotive | 189.99 | 189.99 |
| 1 | Amtrak Genesis Diesel Locomotive | 129.95 | 129.95 |
| 1 | Illinois Central Gondoloa | 14.99 | 14.99 |
| 1 | Santa Fe Box Car (Grand Canyon) | 18.99 | 18.99 |
| 1 | Union Oil 3 Dome Tank Car | 24.99 | 24.99 |
The titlecolor option allows you to specify a separate background color for the title row, while the titlefontcolor option specifies the color of the title text.
htmldatatable cgiHTML,|||
titlecolor="000099"
titlefontcolor="FFFFFF"
color="EEFFFF"
color="CCFFDD"
colorpattern="111222"
column="Hotel"
title="Hotel"
...
This example displays the title with white text on a blue background.
| Qty | Item | Price | Total |
| 1 | Southern Pacific Box Car | 12.99 | 12.99 |
| 1 | Western Pacific 2-8-0 Steam Locomotive | 189.99 | 189.99 |
| 1 | Amtrak Genesis Diesel Locomotive | 129.95 | 129.95 |
| 1 | Illinois Central Gondoloa | 14.99 | 14.99 |
| 1 | Santa Fe Box Car (Grand Canyon) | 18.99 | 18.99 |
| 1 | Union Oil 3 Dome Tank Car | 24.99 | 24.99 |
If the array is empty the server will display an empty table, like this:
| Qty | Item | Price | Total |
The message displayed in the empty table can be customized with the emptytablemessage option. You can include any text you like in this option, including HTML tags.
htmlarraytable demoArray,cr(),"~",cgiHTML,|||
emptytablemessage={<center><p>Sorry, no data available<p></center>}
...
Now the empty table will include the specified message.
| Qty | Item | Price | Total |
Sorry, no data available | |||
You could even include a link to a new search form as part of the message.
The font, border, spacing and background color options give you almost complete control over the appearance of the table. If you need even more control there are four “template” options that allow you to specify HTML templates for each component of the table.
cell=template This template controls the HTML rendered for each cell. <data> is replaced by the actual data generated by the formula for each column. For example to render each cell in italic the option would be:
cell={<td><i><data></i></td>}
row=template This template controls the HTML rendered for each row. <data> is replaced by the actual data cells for each row. For example to render each row so that the data is vertically centered the option would be:
row={<tr valign=center><data></tr>}
table=template This template controls the HTML rendered for the overall table. <data> is replaced by the actual data rows of the table. For example to render the table so that the total table width is 600 points the option would be:
table={<table width=600><data></table>}
titlecell=template This template controls the HTML rendered for each cell in the title row. <data> is replaced by the actual column names. For example to render each title cell using bold italic the option would be:
cell={<td><b><i><data></i></b></td>}
Consult an HTML book or web site for more information about the <table>, <tr>, <td> and <th> tags.
See Also
History
| Version | Status | Notes |
| 10.0 | No Change | Carried over from Panorama 6.0. |