How to Create a CSS Table

Complex CSS TableSometimes 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.

Basic CSS Table

The HTML
[cc lang=”HTML”]

content
content
content
content

content
content
content

content
content
content
content

content
content
content

[/cc]

The CSS
[cc lang=”CSS”]
.table{
width:960px;
overflow:hidden;
margin:0 auto;
}

.row{
display:block;
padding-top:5px;
}

.col{
padding:5px;
display:inline-block;
}

.row1 .col{
width:221px;
border:1px solid #0000FF;
}

.row2 .col
{
width:300px;
border:1px solid #FF0000;
}
[/cc]

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s