Database records returned to table - 3 columns vs. 1

Hello,

I believe Cfstarlight helped me on this with a previous post. He helped me to return recipes from my database into a table, utilizing 3 columns. So, the query would run, and the results would appear as such:

Recipe 1..............................Recipe 2.....................Recipe 3......
Recipe 4..............................Recipe 5.....................Recipe 6......
Recipe 7..............................Recipe 8.....................Recipe 9......
Recipe 10............................Recipe 11

I used the following code for the table:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<cfoutput query="type" group="type">
   <tr>
   	 <th colspan="3" align="left">#TYPE#
   	   </th>
   </tr>
   <tr>
   <cfset typeRow = 1>
   <cfoutput>
      	  <td width="33%"><a href="#LINK#">#RECIPE_NAME#</a></td>
   	  <cfif typeRow mod 3 eq 0>
	  	</tr><tr>
	  </cfif>	
	  <cfset typeRow = typeRow + 1 />
   </cfoutput>
   </tr>
</cfoutput>
</table>

Code (markup):

Now, I did away with grouping it by the recipe type. I simply want to display the results in three columns, so I modified it as such:

<table width="100%" border="0" cellspacing="0" cellpadding="0">

<cfoutput query="type">
   <tr>
   <cfset typeRow = 1>

      	  <td width="33%"><a href="#LINK#">#RECIPE_NAME#</a></td>
   	  <cfif typeRow mod 3 eq 0>
	  	</tr><tr>
	  </cfif>	
	  <cfset typeRow = typeRow + 1 />

   </tr>
</cfoutput>
</table>

Code (markup):

It returns the results, but only in 1 column! As such:

Recipe 1
Recipe 2
Recipe 3
...

If I keep the inner cfoutput tags in, it returns duplicates. Maybe I need to group by something else? But this doesn't make sense to me?

 

Yes, that's because the new table row tags <tr> are inside the <cfoutput>. So it's starting a new row for every record - ie Every row will have one column. You need to adjust the logic if you're no longer grouping by type.

<table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
	<cfoutput query="type">
		<td width="33%"><a href="#LINK#">#RECIPE_NAME#</a></td>
   		<cfif currentRow mod 3 eq 0>
	  		</tr><tr>
		</cfif>	
	</cfoutput>
</tr>
</table>

Code (markup):

 

Why not just do floating divs instead of the tables? You could simplify it a bit and just do:

<cfoutput query="type">
	<div style="width:33%;float:left;"><a href="#type.LINK#">#type.RECIPE_NAME#</a></div>
</cfoutput>
<div style="clear:both;">&nbsp;</div>

Code (markup):

That seems a lot cleaner IMO.