Output Data Horizontaly - No Tables
View a Working Example of This Code
Comment on this Tutorial
Introduction
This tutorial will show you how to create a grid of data sorted horizontally, in as many columns as you specify - Without using tables.
This is virtually identical to the html tables version, except for the display code is slightly different. We use div's this time instead of tables and cells.
The Query...
The query for this example is a simple SELECT
<cfquery name="get_names" datasource="#dsn#">
SELECT names
FROM cfml_example_data
ORDER BY names
</cfquery>
The Code...
We need a variable to tell how many columns we are going to make
<cfset cols = 4>
Now we can start to make a container div to hold out individual 'cell' div's.
<div style="border:1px solid black;padding:5px;">
And begin outputing the data to create the table grid.
<cfoutput query="get_names">
Because our div 'cells' are individual units that can stand on their own, we don't need to figure out the beginning of a row like with a tables tr tag. This leaves out an entire cfif compared to the tables version.
Now create the 'cell' div's that hold the data. They need to float, and be sized. This allows the next div to suck up next to the previous. Specifying height and width ensures a uniform look. You can make the css more robust, but for the example I will keep it simple. They would do this in one long row, but we'll make them start a new row in the next bit.
<div style="float:left; width:80px; height:20px; background-color:##eee; margin:3px;padding:3px;"> #names# </div>
As we are outputing the data, we always need to check if we need to a new row.
We will close the row on two conditions. First we will close the row if query.currentrow mod cols is 0. If the output is currently on row 8 of the query, and we have cols set to 4, then we calculate 8 mod 4 (or 8 / 4 has a remainder of 0) and we know we need to close the row by using a div tag with clear:both;.
<cfif currentrow mod cols EQ 0>
<div style="clear:both;"> </div>
The second condition that would tell us we need to finish up the row is that if query.currentrow EQ the query.recordcount. The bit 'AND recordcount GT cols' is not needed, but prevents the filling in of extra blank 'cells' if their is not enough records to fill on complete row. Type a large number in the working example to see what mean.
Inside this if we run a loop to fill up the final row with empty 'cells'. This will make the grid look more complete.
<cfelseif currentrow EQ recordcount AND recordcount GT cols>
<cfloop from="1" to="#cols - (recordcount mod cols)#" index="i">
<div style="float:left;width:80px; height:20px; background-color:##eee; margin:5px; padding:3px;"> </div>
</cfloop>
Clear the final row also.
<div style="clear:both;"> </div>
And close the final cfif, cfoutput, and container div tag.
</cfif>
</cfoutput>
</div>
Conclusion
There it is, CSS grid of data created dynamically. Change the column count easily too.
____________
Comments
Webmaster
08/23/2006
See the example to see how changing the div 'cell' widths from static px width to a dynamic percentage can allow the divs to flow freely will taking up about 100% of the available width.
