Tables in HTML are great to display results of queries or other type of data. However, sometimes the large amount of columns can make the table quite wide. If the data contained in the columns is not too wide, like "yes/no" or small numbers for instance, the columns can be kept narrow enough. But then the column header should not be too wide either, and this impose to use rather short descriptions or even less clear abreviations.
Furthermore, if the table is too wide, it cannot be printed on one page.
In spreadsheets, it is possible to show the column header vertically, which surely solves a part of the problem. For the time being, this feature is not supported by current browsers.
The purpose of this tag is then to provide a smart compromise by allowing long descriptions for column, but laid out horizontally in rows, each one being associated to a column by a colored patern in form of corner.
If you find this custom tag useful, or if you have any suggestion to make it even more useful,
just let me know, I'll be glad to enhance it.
In order to use this Custom Tag, just store the file CornerTable.cfm found in the zip file in the special Custom Tags directory in your ColdFusion server. This directory is generally named
\Cfusion\CustomTags.
You may also store the file in a directory defined as a path for custom tags in the ColdFusion Administrator (CF 5.0+) or in the same directory as the calling template.
The other files are this documentation (cornerTableDoc.cfm); just store them in any convenient place in the HTTP area on your development server.
The code generated by this tag is compatible with all brosers supporting CSS level 2, including MSIE 5+ and Netscape 6+. Under Netscape 4, the table is still viewed correctly, only the one pixel borders used to enhance the corner area will not show. When printing, if the "Print background" option is not set in the browser, only the borders will be seen, which still makes the table quite clear, and there are chances that the table will fit in only one page.
|
SYNTAX & TABLE OF CONTENT |
| TAG |
ATTRIBUTE |
CONTENT |
REQUIRED |
DEFAULT |
|
<CF_CornerTable |
QUERY= |
Name of the query to be used to populate the table rows |
Yes |
|
| ITEMS= |
List of column headers corresponding to each column of the query given in COLLIST.
|
Yes |
|
| DELIMITER= |
Optional delimiter used in the ITEMS list instead of the default comma. |
No |
"," |
| COLLIST= |
List of column names in the query to be used to populate each row. This list is always comma separated. |
Yes |
|
| TITLE= |
Header to be displayed as a first row in the table. It may contain HTML code. |
No |
"" |
| TITLEBGCOLOR= |
Background color for the title row |
No |
"FBD171" |
| CELLPADDING= |
Usual parameter for the main table. |
No |
1 |
| LBGCOLOR= |
List of three colors used for backgrounds for the different parts of the table.
- The first is for the main column on the left,
- The second for one corner area joining rows to columns,
- The third for the alterning corner area.
See the three background areas identified by red tags and their default colors on the image.
|
Non |
"#FFFFFF,#FFFFFF,#F0F0F0" |
| LBORDERCOLOR= |
There are two types of border of size 1px used to enhance the corner area. The first is used to separate columns, the second to separate rows.
See the borders on the above picture identified by blue tags.
|
No |
#000000,#C0C0C0 |
| TABLE= |
The tag uses a table with default parameters. The user can provide his own TABLE TAG with the attributes he wants. |
No |
"<TABLE BORDER=2 CELLSPACING=0>" |