Content
![]() |
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 |
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:
| .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> </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:
|
[Home page] [About us] [Privacy Policy] [Contact Me] |
|
Web Page Layout Using Tables and CSS: part 1 |