Using HTML Tables to Layout Query Results

You have displayed each row of data from the Employees table, but the information was unformatted. You can use HTML tables to control the layout of information on the page. In addition, you can use CFML functions to format individual pieces of data such as dates and numeric values.

You can use HTML tables to specify how the results of a query appear on a page. To do so, you put the CFOUTPUT tag inside the table tags. You can also use the HTML TH tag to put column labels in a header row. To create a row in the table for each row in the query results, put the TR block inside the CFOUTPUT tag.

Note To put the query results in a table:
  1. Return to the file emplist.cfm in Studio.
  2. Modify the page so that it appears as follows:
    <HTML>
    <HEAD>
    <TITLE>Retrieving Employee Data Based on Criteia from Form</TITLE>
    </HEAD>
    
    <BODY>
    <CFQUERY NAME="GetEmployees" DATASOURCE="CompanyInfo">
        SELECT FirstName, LastName, Salary
        FROM Employees
        WHERE LastName='#Form.LastName#'
    </CFQUERY>
    <H4>Employee Data Based on Criteia from Form</H4>
    <TABLE>
    <TR>
    <TH>First Name</TH>
    <TH>Last Name</TH>
    <TH>Salary</TH>
    </TR>
    <CFOUTPUT QUERY="GetEmployees">
    <TR>
    <TD>#FirstName#</TD>
    <TD>#LastName#</TD>
    <TD>#Salary#</TD>
    </TR>
    </CFOUTPUT>
    </TABLE>
    </BODY>
    
    </HTML>
    
  3. Save the page as actionpage.cfm within the myapps directory.
  4. View formpage.cfm in your browser.
  5. Enter data for the LastName form control and submit it.
  6. The records that match the criteria specified in the form appear in a table.

Code Review
Code Description
<TABLE>
Put data into a table.
<TR>
    <TH>First Name</TH>
    <TH>Last Name</TH>
    <TH>Salary</TH>
</TR>
In the first row of the table, include three columns, with the headings: First Name, Last Name, and Salary.
<CFOUTPUT QUERY="GetEmployees">
Get ready to display the results of the GetEmployees query.
<TR>
    <TD>#FirstName#</TD>
    <TD>#LastName#</TD>
    <TD>#Salary#</TD>
</TR>
Create a new row in the table, with three columns. For a record, put the value of the FirstName field, the value of the LastName field, and the value of the Salary field.
</CFOUTPUT>
Keep getting records that matches the criteria, and display each row in a new table row until you run out of records.
</TABLE>
End of table.