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