Substituting CSS for HTML Tables
Many webmasters today feel that HTML tables are evil. They have every right to believe so since tables increase a page's size and are overall more costly to operate. Tables also easily clutter a page's code making quick changes harder.
The table tag was created to provide structure to data as spreadsheets do. However, tables are not intended for creating page layouts.
However tables are not always the devil. They are very acceptable for true tabular data.
In order to substitute CSS for tables, div's, which define a division or section in a document, must be used. Most pages are built up of a series of div's. Usually one is used for the header, one for the navigation, one for the body, and one for the footer. There is no limit to what you can do with them.
When you start using style sheets extensively, your site automatically becomes more usable.
Many webmasters think that tableless designs limit what they can create, since most CSS designs appear "boxy". CSS Zen Garden is an excellent site that beautifully shows through examples how CSS design can be even more visually appealing than old-fashioned designs using HTML tables.
Below is just one of the many examples available at CSS Zen Garden that shows the possibilities of CSS design.
All pages created will appear different in many browsers. Not everyone uses Internet Explorer these days; many use Firefox or other browsers. In order to make pages similar in all browsers, you should view your site in many different browsers such as Internet Explorer, Mozilla Firefox, Netscape, etc. You should also validate your page by using HTML/XHTML and CSS validators. Validators are great because they show errors in your pages' code and how to fix them.
CSS is marvelous because it can same you time, money (bandwidth), and can also make your visitors happy by making pages load faster. If you haven't already, you should consider changing your coding practices by getting rid of unnecessary code through CSS.