Different Ways to Add Columns to a Web Page

Written by: S. R. Obbayi • Edited by: Amy Carson
Published Jul 15, 2011 • Related Guides: HTML | CSS

How do i make columns on a web page? is a question you might find yourself asking when websites or services like Yahoo Mail or Gmail come up with a new layout that dazzles you. The good news is that you too can learn the same techniques. Here is how.

click to enlarge

As you browse through various websites on the Internet it does not surprise one to wonder how some layouts and effects are achieved. So if you are wondering how to make columns on a web page, I would tell you there are two basic ways. You could use the built in HTML tables through the <table> tags or you could implement them using CSS and container HTML elements such as <div>.

Using HTML Tables for Layout

Using tables to render columns in a web page works okay. There is a problem however. Tables are not recommended in that they do not promote separation of presentation and data while being concerned with best practices.

Tables are designed for tabular data presentation. Nevertheless before I show you how to make columns on a web page using CSS and <div> containers, I will show you how to do it using HTML tables for knowledge sake. The most basic of table requires a pair of table tags <table></table>, one or more row tags <tr></tr> and on or more table cell data tags <td></td>.

<table>

<tr><td>Column One, Row One</td><td>Column One, Row Two</td><td>Column One, Row Three</td></tr>

<tr><td>Column Two, Row One</td><td>Column Two, Row Two</td><td>Column Two, Row Three</td></tr>

</table>

The code above will give your a two row, three column layout. This may work and seem simple and straight forward but should be considered as deprecated, even though officially it is not. As mentioned before it goes against best practices in web design.

Presenting Your Columns in Style with CSS

CSS layouts are achieved by using Cascading Style Sheets to dictate the position and magnitude of <div> containers in relation to the web page and in relation to each other. In order to understand this section you will need general knowledge of CSS. With that in mind, I am going to assume you have that knowledge and I will show you how to format your CSS to make columns on a web page. Take a look at the following code:

<head>

<style type="text/css">

#container{ width: 540px; }

#columnone{ float: left;

width: 180px; margin-left: -540px;

background: #FDE95E; font-weight:bold;}

#columntwo{ margin: 0 180px 0 180px; background: #EAEAEA; }

#wrapper{float: left; width: 100%;}

#columnthree{float: left;width: 180px;

margin-left: -180px; background: #C8FC98;}

</style></head><body>

<h2>Columns Using CSS Layouts</h2>

<div id="container">

<div id="wrapper">

<div id="columntwo">

Column Two, Row One<br />Column Two, Row Two

</div></div><div id="columnone">

Column One, Row One<br />Column One, Row Two

</div><div id="columnthree">

Column Three, Row One<br />Column Three, Row Two

</div></div></body>

This may look complicated but it is quite a basic way of achieving columns on your web page. I will now walk you through the code.

The Style Sheet

This appears in the <head> section of your web page. Container is the container element that defines the bounds of the columns. In this case we want them in a 540 pixel region. Secondly we define the columns bearing float:left. This means it should try and occupy the left most position it can take just after the element before it. This will allow the elements to be placed side-by-side. Each column must also have a width.

The right-most column should have a left margin that is minus its own width. The first column must have a left margin that is minus the entire container. This is because everything added after the container is laid beside it. So using a negative left margin forces it to move left back to the right place.

The remaining space which so happens to be the second column in this case is bound to a left margin equal to the sum of the widths of the elements on its left. In this case column one, while the right margin is set to be equal to the sum of the elements that appear after it. In this case column three. All this is contained in a wrapper that spans 100% of the container. So the margins for column two or remaining space pads the container on both side so it fits in the right place.

The rest of the elements such as the background are purely cosmetic.

The HTML has nothing special only that the wrapper <div> container bearing the remaining space which in this case is column two must come before any other column.

Which Option Should I Choose From?

Probably the only advantage tables has over CSS columns is tables are able to maintain the same height within all the columns in the layout while CSS would need some back breaking tweaks which are too complex to be covered in this guide. If one column has a lot of data, a CSS based layout will not scale the other columns to fit. Using attributes such as min-height or JavaScript code to dynamically resize the columns can achieve this.

Whichever method you use is a matter or preference. As for best practices and highly recommended, it is preferred that CSS layouts be used for general web page layouts. HTML Tables can be used for tabular data in grid based data formats even though well crafted CSS can still handle grid based data.

References

Source: author’s own experience.

World Wide Web Consortium (W3C), www.w3.org.

Images provided by writer.