Use Multiple Columns

In This Site

In This Section

The number one source for making your website sell!

Take Your Web Site to New Levels

Formatting the Output of the Database Results Wizard into Multiple Columns

It is very easy to use the Database Results Wizard (DRW) to create a long list of records from your database. Usually it will arrange your data in the following way.

Record 1
Record 2
Record 3
Record 4
Record 5
Record 6
Record 7
Record 8
Record 9

Sometimes though, you would rather have your data organized into several columns as in the following example.

Horizontal Columns
Record 1	Record 2	Record 3
Record 4	Record 5	Record 6
Record 7	Record 8	Record 9

Vertical Columns
Record 1	Record 4	Record 7
Record 2	Record 5	Record 8
Record 3	Record 6	Record 9

In this tutorial, we'll look at the first method.

We hope to have a tutorial showing you the second (much more challenging) example in the near future. Currently, you can view one solution at:

http://www.4guysfromrolla.com/webtech/111799-1.shtml

Start with a basic Database Region to Show Your List

First, let's create a form to show the default view. I created a database with some sample data, Record 1, 2, etc. I'll create a DRW that will display the data in a single column to display the following data.

Record
Record 1
Record 2
Record 3
Record 4
Record 5
Record 6
Record 7
Record 8
Record 9

Creating Horizontal Columns

So, how to do we recreate this table so that it shows the data in three horizontal columns. The following table has been generated from the same DRW, but we've altered some of the coding.

Record
Record 1	Record 2	Record 3
Record 4	Record 5	Record 6
Record 7	Record 8	Record 9

How did we accomplish this? We replace some of the HTML table tags with a little FrontPage Magic.

Switch FrontPage to HTML View. You will need to locate the HTML table tags that separate rows. They are the <tr> and <td> tags.

This is a simple cut and paste operation. Using the following table, search through the code to find the tags in the left column and replace them with the code shown in the right column.

Before	After
<tr>	<%
<td>	count = count + 1 If count = 1 Then %> <tr> <% End If %> <td>
</td>	</td>
</tr>	<% If count = 3 Then count = 0 %> </tr> <% End If %>
</tbody>	<%If count <> 0 Then Response.Write "</tr>"%> </tbody>
The above code was written by Stephen C. Travis and is reproduced here with his permission. It is protected under the terms of the GNU General Public License.

These tutorials are part of an upcoming training course called "FrontPage Magic - How To Create A Database Driven Website For Non-Programmers". Stay tuned for more details on this exciting new product.