Web Page Layout Using Tables and CSS :Part 2

Web Page Layout Using Tables and CSS
Part 2

In part 1 we covered the table html/xhtml and here we will cover the style sheet to control the table. 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

Site Design Home
CSS
HTML/XHTML
Microsoft FrontPage
Scripting
Website Forms
Web Graphics
Website Layout
Website Links
Website Logos
Website Navigation
Web Pages
Website Templates

Website Resources

Starting Guides
Blog
Sitemap
Contact
Site Search

Web Page Layout Using Tables and CSS Part 2

Web Page Layout Using Tables and CSS
Part 2