How to do web design with tables
Normally most articles on the net are about making sites in CSS without tables. But in this tutorial I am going to show you how to make a site with tables. Most web-gurus insist on making a site in validated CSS, but I think it can be valuable to know how sites where used to make back when CSS was only used to style text.
In the early days of the web there where no easy way of controlling the layout of a page because there where no way of doing that. You could have text on a page, have line breaks and some images but that was it. Sometimes those early pages can be simple and very relaxing to view since most web sites of today are so dramatically different than those simpler pages.
When tables where introduced in HTML they where originally intended to be used when making visible tables on the web (think Excel spreadsheets), as its name implies. But web designers soon became very creative when they found out that by setting the border of the table tag to zero, the table became invincible. By adding columns or rows and declaring how text or images should be positioned in them they suddenly had a rudimentary way of controlling layout.
This became even more important when an image was cut up in small parts and put into a larger table where every cell of the table corresponded to a part of the image.
By using a border less table it was suddenly possible to do proper design on the style of a homepage. By time several problems appeared.
Tables was never meant to be used as design elements
Using tables heavily can increase the size of the page dramatically
Tables are sometimes used inside other tables, this can lead to incredibly complex code that is impossible to understand
But tables did have positive things about them to!
It was very fast to whip up a quick site in Dreamweaver in tables that would look reasonable good in most browsers
Tables where easy to learn
The first example shows you a table in HTML that contains a header, a left column, a right column and a footer. The width is limited to 640 and the height is adjusted to the content. Take note that the table is not invicible.
In the second example the table is filled with text. As you can see, it is the structure of most modern sites.
Welcome to my HTML and TABLE site
Meny1
Meny2
Meny3
Meny4
Meny5
This is my content, this is the area where the content will be added and where you will learn everything there is about TABLEs and HTML
This is the area where ads will be placed at
This is my footer with my copyright and contact me link
I suggest using Dreamweaver to make a table based layout. Try to do the table I did here, it is the easiest and fastest way of learning how to do table based web sites.
Thanks for reading and check back soon for more web-related tutorials.