suburban glory

A Blog in Suburban Glory:
Web Dev Ideas and Inspiration

Creating a multi-column layout with PHP and tables or CSS.

|| Category: PHP ||

There are many reasons why data from a database needs to be presented in an attractive multi-column layout. It may be that you have a list of user names or site editors and contributors to display, or a list of categories for visitors to browse.

It is for the latter case that I needed both two and three column layouts for a directory script I was writing for my own personal site.

If you have a grasp of PHP and CSS it is actually a fairly straight forward task and below are two ways of achieving this with tables or CSS for styling.

Firstly, lets take a look at the code for creating a table layout:


$find_data = mysql_query("SELECT * from category");

while ($result = mysql_fetch_array($find_data)) {
	
$data[] = $result;

}

$data = array_chunk($data, 2);

echo '<table id="data-output" border="1">';
foreach ($data as $row) {
	
    echo'<tr>';

    foreach ($row as $column) {
        print '<td>' . $column['name'] . '</td>';
    }

    echo '</tr>';
}

echo '</table>'; 

PHP coders will be familiar with the first part of this block of code. It is simply taking all data from the table called category and leaving it in an array called $data.

From here it is a case of putting it through the array_chunk() function and cutting it down into equal sized amounts, which above is 50/50.

This is then passed through two foreach loops to achieve a tables-based layout.

Change the number of columns by changing the number in the array_chunk function; 3 for three columns, 4 for four columns and so on.

And that's it.

But what about a non-table output?

Lets make some simple changes to the code and add a little CSS.

So we're call the data from the table as before and we'll still pass it through the array_chunk() function, but instead of tables we're now make sure the code outputs as an unordered list:


foreach ($data as $row) {
	
    echo'<ul class="row">';

    foreach ($row as $column) {
        print '<li class="column">' . $column['name'] . '</li>';
    }

    echo '</ul>';
}

And add a bit of styling to the row class:


.row {
list-style-type: none;
float:left;
width: 150px;
margin-right : 15px;
}

The margin-right declaration will create guttering inbetween the columns.

You need to play around with the CSS and the number in array_chunk() to achieve the right number of columns for your needs.

What I also do is add an incremental number to the PHP like so:


$i = 1;

foreach ($data as $row) {
	
    echo'<ul class="row">';

    foreach ($row as $column) {
        print '<li class="column' . $i++  .' ">' . $column['name'] . '</li>';
    }

    echo '</ul>';
}

This allows the styling of each column though it does create a lot more CSS code.

So here are two different ways to present data in a multicolumn format using PHP and tables or CSS.

To see an example of this in action then take a look at my directory here: http://www.suburban-glory.com/directory.html

Comments

Dayat || Fri 27th Aug 2010

Thanks. This entry really help my other wordpress blog

Omoba Odusanya || Wed 17th Nov 2010

U've simply blessed me with codes, thank you.

Unangst || Tue 3rd Jan 2012

Thanks! Wonderful tutorial! I looked for a LONG time and then I found your code and it worked for my application!

Andy || Mon 30th Apr 2012

Thank You. I was having a severe brain fart, I tend to overcomplicate things. You saved the day =)

You can add comments below.
Auto-paragraphing is enabled. Double newlines will be converted to paragraphs.

Allowed tags: a, abbr, acronym, b, blockquote, caption, cite, code, dd, del, dfn, div, dl, dt, em, i, ins, kbd, li, ol, p, pre, s, strike, strong, sub, sup, table, tbody, td, tfoot, th, thead, tr, tt, u, ul, var.

If you wish add code examples then please do so between the following tags:

<pre><![CDATA[
Place code here
]]></pre>







mainland