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.
![]() |
To put the query results in a table: |
emplist.cfm
in Studio.
<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>
actionpage.cfm
within the myapps
directory.
formpage.cfm
in your browser.
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. |