Web Page Layout Using Tables and CSS

Tables are the main method used to layout/structure Web Pages. Layout using tables is considered by many purists as table misuse, but it is far simpler than using Cascading Style sheets for element positioning.

Although we are going to use tables for the page layout we are going combine that with CSS to create a very flexible and easily update page layout.

If you haven't already done so then please review the following related articles before continuing:

We will again use the structure in Web Page Layout Using Tables Part 2 but this time we will incorporate style sheets.

Logo
Empty cell	Content
Navigation
Bottom Navigation

Here is the HTML/xhtml for the above table structure but with all the html formatting removed and with class names assigned to the table elements (highlighted):

<body>
<table class= "main">
<tr>
<td colspan="2" class="header">

Logo
</td>
</tr>
<tr>
<td class="empty">
Empty cell</td>
<td rowspan="2" class="content">
Content
</td>
</tr>
<tr>
<td class="navigation">
Navigation
</td>
</tr>
<tr>
<td colspan="2" class="footer">
Bottom Navigation
</td>
</tr>
</table>

</body>

Now all we need to do is to create an external style sheet to control the table formatting. Here is the basic structure or our external style sheet:

.main{}
.header{}
.empty{}
.content{}
.navigation{}
.footer{}

Now let's add some detail to the style sheet. What we will do, to illustrate how it works, is to construct a table with the following:

width 720 pixels
borders (set for illustration only black main table, green empty cell, red content and blue navigation).
content will be indented 10 pixels from left
font Verdana 10 pt sans serif.
Navigation will be bold Verdana 8 pt sans serif and centred.
Line separation for navigation will be 22 pixels.
Bottom navigation will be centred and 8pt.

Here is the style sheet (saved as webpagecss.css)

.main
{
width: 720px;
border-collapse: collapse;
border: solid #000 1px;
}
.header{}
.empty{
border: solid green 1px; /* illustration only*/
}
.content
{
font-family: Verdana,Arial,Sans-serif;
font-size: 10pt ;
border: solid red 1px; /* illustration only*/
padding-left:10px;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
}
.navigation
{
width: 160px;
text-align: center;
border: solid blue 1px; /* illustration only*/
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt ;
line-height: 22px;
font-weight: bold;
}
.footer{
text-align: center;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 8pt ;
}

To use it just insert in the header tags as shown highlighted below (note: I have removed other meta tags for clarity):

<head>

<title>webpage-template-2</title>

<style>
@import url(webpagecss.css);
</style>

</head>

To see how it works here is the table without the style sheet and here is the table with the style sheet.

Related Articles and Resources:

Main menu

Website Resources