Jump to Main Content

Creating a CSS Table Layout

Moving left, middle and right column content up

You’ll notice that our left, middle and right cells have their content pushed down. The reason is because the middle cell has more content and is adjacent to these cells. We add the following CSS rule:

table#layout td#left{
width:190px;
vertical-align:top;
}
table#layout td#middle{
vertical-align:top;
}
table#layout td#right{
width:190px;
vertical-align:top;
}

By setting vertical-align to top, we force our left and right cell content to move to the top of the cell. Save your file and preview the results.

Moving left & right cell content up

Left and right cell – tiling background

Let’s create a tiling background which will repeat down the left and right cells. Since we have an ID assigned to both, it’s easily done by adding the following:

table#layout td#left{
width:190px;
vertical-align:top;
background-image:url(images/background_tile.jpg);
}
table#layout td#right{
width:190px;
vertical-align:top;
background-image:url(images/background_tile.jpg);
}

We use the background-image property and set the value to a small gradient texture. Setting a repeating value isn’t necessary since the background will tile as additional content is added in left, middle or right cells. Save your file and preview the results.

Tiling backgrounds

Middle cell – background color

Since our content is in the middle, add the following rule to our existing middle ID:

table#layout td#middle{
width:380px;
background-color:#FFFFFF;
}

We set background color of our middle cell to white to make our text readable.

Middle cell

Formatting left and right heading three tag

Let’s touch up our heading three tags which are in both columns. Add the following rule:

h3{
margin:10px;
font-size:1.2em;
text-align:center;
}

We use our heading three as our selector and use the following property-values:

  • Margin
    • Set to 10 pixels, on all sides
  • Font-size
    • Set to a proportional 1.2em
  • Text-align
    • Set to center

Save your file and preview the results.

Heading three

Format our heading two - middle column

Let’s touch up our heading two tag in our middle column. Add the following rule:

h2{
margin:10px;
font-size:1.6em;
}

We use our heading two as our selector and use the following property-values:

  • Margin:
    • Set to 10 pixels on all sides
  • Font-size:
    • Set to a proportional size of 1.6em

Save your file and preview the results.

Heading two

Creating space - middle column

Currently, the paragraph text in the middle column is very tight, that is, against the left edge of the left column. Add the following CSS rule to provide a bit of space:

p{
padding:8px;
font-size:.8em;
line-height:1.5em;
}

We set all paragraphs to have the following property-values:

  • Padding
    • Set to 8 pixel on all sides
  • Font-size
    • Set to a proportional size of .8em
  • Line-height:
    • Set to a proportional size of 1.5em

Setting padding provides horizontal and vertical spacing between the left column and paragraph. Some people feel as though setting a line-height on paragraphs makes for easier reading. Save your file and preview the results.

Paragraphs styled

We'll continue with formatting our photos next.

top of page