Create My - eCommerce and Web Design Hornsby - eCommerces and Web Design Sydney

How to Create a CSS Table

Sometimes you will want to present non tabular information in a table format because you like the look of uniformity. The way to do this is to use divs in almost the same way you would do so for a table. The great thing about using a DIV/CSS table over a regular table is you have much more flexibility in manipulating the layout. For instance you might want every second row to have 3 columns of equal width compared to every other which 4 columns of equal width.

The code in this post will let you build the table pictured below. Taking this the next level will allow you to create the complex CSS tables used in loan results of the MortgageCorp Mortgage Calculator pictured left. I would recommend the CSS table over a regular table unless tabular data is being presented.

In the below example we might want to present our results over two rows. The first row contains 4 parts of data and the second row contains 3 parts. If we want to get fancy we might want to have a top-half background and a bottom-half background for the 2 rows. We are going to keep this simple and use different border colours.

The HTML

The CSS