Table Syntax Usage Example

The code below formats Emplist query in a table. The query was defined previously on that same page.

...
<TABLE >
    <TR>
        <TH>First Name</TH>
        <TH>Last Name</TH>
        <TH>Start Date</TH>
        <TH>Salary</TH>
        <TH>Contract?</TH>
    </TR>
    <CFOUTPUT QUERY="EmpList">
    <TR>
        <TD>#FirstName#</TD>
        <TD>#LastName#</TD>
        <TD>#StartDate#</TD>
        <TD>#Salary#</TD>
        <TD>#Contract#</TD>
    </TR>
    </CFOUTPUT>
</TABLE>
...

• Enclose a CFOUTPUT block in a table using the TABLE begin and end tags.

One table will be generated for the page display.

• To include table headers, add one table row for the table header tags within the TABLE but before the CFOUTPUT block.

One row of table headers will be generated for the page display.

• Reference the name of the query that you want to display using the CFOUTPUT tag's QUERY attribute.
• Add one table row for the database column references within the CFOUTPUT block.

Surround each column reference with a table data tag.

One table row will be generated for each row returned for the query.

To generate a table with query results:

1. Open EmpList.cfm in HomeSite.
2. Add a begin TABLE tag after the H1 block and before the CFOUTPUT block.
3. Edit the tag to assign a table width of 95%.
4. Add a TR tag after the begin TABLE tag and before the CFOUTPUT block.
5. Add five TH ALIGN = "LEFT" blocks to that TR tag to create one table header for each column of data that you'll output to the page:

<TH ALIGN ="Left">First Name</TH>
<TH ALIGN ="Left">Last Name</TH>
<TH ALIGN ="Left">Start Date</TH>
<TH ALIGN ="Left">Salary</TH>
<TH ALIGN ="Left">Contract?</TH>

6. Close the table row with the closing TR tag.
7. Delete the BR tag within the CFOUTPUT block.
8. Create a new table row by adding a TR tag after the begin CFOUTPUT tag.
9. Add table data (TD) blocks to surround the five table column names referenced for output:

<TD>#FirstName#</TD> 
<TD>#LastName#</TD>
<TD> #StartDate#</TD> 
<TD>#Salary#</TD>
<TD>#Contract#</TD>

10. Add an ending TR tag after the last closing TD tag and before the closing CFOUTPUT tag to end the table row.
11. Add the closing TABLE tag after the closing CFOUTPUT tag to end the table.

Your table code should look like this:

<TABLE>
    <TR>
        <TH ALIGN ="Left">First Name</TH>
        <TH ALIGN ="Left">Last Name</TH>
        <TH ALIGN ="Left">Start Date</TH>
        <TH ALIGN ="Left">Salary</TH>
        <TH ALIGN ="Left">Contract?</TH>
    </TR>
    <CFOUTPUT QUERY="EmpList">
    <TR>
        <TD>#FirstName#</TD>
        <TD>#LastName#</TD>
        <TD>#StartDate#</TD>
        <TD>#Salary#</TD>
        <TD>#Contract#</TD>
    </TR>
    </CFOUTPUT>
</TABLE>

12. Save the file.
13. View the page in a browser.

The employee data appears in a table.

Click here to see how the page should look at this time.

Click here to see the code behind the scenes.

Note:

The navigation links will not work at this time.

Copyright © 1999, Allaire Corporation. All rights reserved.