CFM Tutorial     

Cold Fusion ch5- Basics Con't...

6.7 Displaying Results in Tables

Most web browsers now support tables. By using HTML <TABLE> tag, you can display data in two-dimensional grid. Tables are useful for presenting lists in a clean, columnar display.

Because HTML tables are used so often to display query results in data-driven pages, and the <TABLE> syntax can be confusing at times, the markers of Cold Fusion created a Cold Fusion table tag called CFTABLE. The CFTABLE tag is designed to conceal details involved in creating HTML tables. All you have to do is tell Cold Fusion what data to put in each column, and Cold Fusion generates the <HTML> code for you.

The CFTABLE tag has another important advantage. It enables you to create tables that can be viewed by all browsers, even those that do not support HTML tables. To do this, Cold Fusion renders the output in a non-proportional font and pads fields with spaces so that they line up in columns. Although the resulting table might not look as good as a true HTML table, it is functional and is supported by all browsers.

6.7.1 Creating Non-HTML Tables with CFTABLE

The listing bellow does not use an unordered list to present employees as a list item, in stead it uses CFTABLE to create a table. 

<CFQUERY DATASOURCE='a2Z'
		NAME='employees'>
SELECT FirstName, LastName, PhoneExtension, EmployeeID
FROM Employees
ORDER BY LastName, FirstName
</CFQUERY>
<HTML>
<HEAD>
	<TITLE>Employee List</TITLE>
</HEAD>
<BODY>
	<H1>Employees</H1>
	<CFTABLE QUERY='employees'
	   colheaders>
	<CFCOL Header="employee"
	   text=" <A HREF= " "empdtl1.cfm?
	            EmployeeID=#EmployeeID#" ">#LastName#,#FirstName#
		  </A>"
	>
	<CFCOl Header="extension"
	   text="ext. #PhoneExtension#"
	>
	</CFTABLE>
</BODY>
</HTML>
To create the table, you use the tag <CFTABLE QUERY='employees' COLHEADERS>. The CFOUTPUT is a special kind of CFOUTPUT and, therefore, requires that you specify a QUERY attribute, just like you would provide to CFOUTPUT. You use CFTABLE only to display query results, and the QUERY attribute specifies which result set to process. You use the COLHEADERS to instruct Cold Fusion to create optional column header for each column in the table.

Next, Cold Fusion needs to know what columns you want to include in the table. You specify each column by using the CFCOL tag. You specify two columns here, one for employee name and one for the phone extension.

The code for phone extension is
<CFCOL HEADER="extension" TEXT="ext. #PhoneExtension#">

The HEADER attribute specifies the text to use in the column header. This column has a header with the text Extension in it. The TEXT attribute is required; every CFCOL must have one. It tells Cold Fusion what you want to display in this column. The TEXT attribute here contains the expression "ext. #PhoneExtension#". As Cold Fusion processes each row, it replaces the #PhoneExtension# field with the value of the retrieved PhoneExtension column.

The employee name column may look more complicated, but it really isn't at all. The source for the column is 

<CFCOL HEADER="employee" TEXT=" <A HREF=" "empdtl1.cfm?
EmployeeID=#EmployeeID#" ">#LastName#,#FirstName#</A>">
Again, you first specify the text for optional header in the HEADER attribute. The TEXT attribute contains the text to display, and, because the name has to be a hyperlink, you must specify the A HREF link tag, too.

NOTE:
The link tag has double quotation marks around the URL instead of the usual set of quotation mark. You need the double quotation marks to tell Cold Fusion to tread this as a quote, not as the end of the TEXT attribute. If you were to enter a single quotation mark, Cold Fusion would think that the TEXT attribute ends right after the HREF=. Because it would not know what to do with the text after the quotation mark, Cold Fusion would report a syntax error. This process of using double quotes to indicate an actual quote character is call escaping, and the quote character is said to have been escaped.

6.7.2 Creating HTML Tables with CFTABLE

Tables created with the HTML <TABLE> tag, look much better. So Cold Fusion supports HTML tables, too. To create HTML tables, you just need to specify the HTMLTABLE attribute in the CFTABLE tag. 

<CFQUERY DATASOURCE='a2Z'
		NAME='employees'>
SELECT FirstName, LastName, PhoneExtension, EmployeeID
FROM Employees
ORDER BY LastName, FirstName
</CFQUERY>
<HTML>
<HEAD>
	<TITLE>Employee List</TITLE>
</HEAD>
<BODY>
	<H1>Employees</H1>
	<CFTABLE QUERY='employees'
	   colheaders
	   HTMLTABLE>
	<CFCOL Header="employee"
	   text=" <A HREF= " "empdtl1.cfm?
	            EmployeeID=#EmployeeID#" ">#LastName#,#FirstName#
		  </A>"
	>
	<CFCOl Header="extension"
	   text="ext. #PhoneExtension#"
	>
	</CFTABLE>
</BODY>
</HTML>
Note that when you're displaying data in an HTML table, standard fonts are used, not fixed font used when the <PRE> tag is specified. Therefore, you can safely use any other HTML formatting options in the CFCOL TEXT attribute if required. If you want the name in bold, for example, you can specify 
TEXT=" <A HREF=" "empdt.cfm?EmployeeID=#EmployeeID#" ">
<B>#LastName#,#FirstName#</B></A>"
Cold Fusion still can display the table correctly. The <B> and </B> tags are HTML tags, not CFML tags, so Cold Fusion just passes them through to the web server to be sent to your web browser.

6.7.3 Create HTML Tables Manually

As good as the Cold Fusion <CFTABLE> tag is, it is very limited. HTML tables support many advanced features such as table headers, cells that span multiple rows or columns, borders and border color, background colors and images, and more. If you really want to control how the tables are displayed, you must resort to creating your tables manually. 

<CFQUERY DATASOURCE='a2Z'
		NAME='employees'>
SELECT FirstName, LastName, PhoneExtension, EmployeeID
FROM Employees
ORDER BY LastName, FirstName
</CFQUERY>
<HTML>
<HEAD>
	<TITLE>Employee List</TITLE>
</HEAD>
<BODY>
<center >	
<table border=5>
	<tr>
		<th colspan="2"><h1>Employees</h1></th>
	</tr>
	<CFOUTPUT QUERY="empoyees">
	<tr>
		<td>
			<a href="empdtl1.cmf?EmployeeID=#EmployeeID#">
			#LastName#, #FirstName#</a>
		</td>
		<td>
			Ext. #PhoneExtension#
		</td>
	</tr>
	</CFOUTPUT>
</table>
</center>	
</BODY>
</HTML>
Now look at the code in the example above. First, you create the table with the <TABLE> tag and specify an optional border. Then, you create a table title and place it in a header cell that spans two columns.

Next comes the CFOUTPUT. As each query row is output, a new table row is created. For this reason, you include a complete table row (the <TR> tag) and cells (the <TD> tag )within the CFOUTPUT code block. And finally, you close the table with a </TABLE> tag.

    References

    (1) the Cold Fusion Web Application Construction Kit, Second Edition.
KHMERCyber.com ©2008