Home arrow Style Sheets arrow Designing Web Pages without Tables

Designing Web Pages without Tables

Many "tricks" were developed before the days of CSS in order to display neat-looking web pages. The main trick is to use tables (with the property border = 0) in order to put menus and other similar content on the page. This article will teach one how to stop using those messy tables and enter the world of design with CSS.

Author Info:
By: Sasha Slutsker
Rating: 3 stars3 stars3 stars3 stars3 stars / 81
August 09, 2004
  1. · Designing Web Pages without Tables
  2. · No Tables for Layout
  3. · Absolute Positioning, Add Borders and Margins
  4. · Lack of Browser Support

print this article

Designing Web Pages without Tables
(Page 1 of 4 )


Way back in the old days of the web, there were no standards and web browsers were developing new tags almost daily. When W3C developed the web standards, it was obvious that there was a need to separate content from presentation. Cascading Style Sheets (CSS) are used to show how a website looks and XHTML (or HTML if you haven't updated to XHTML yet) is used to display the content of the website.

I suppose you are wondering why someone would ever want to use CSS instead of tables? I mean, when someone has been using tables their entire life, switching over to this new system makes little sense, does it not? Here are the main reasons.

  • It cleans up your code - With CSS you source code will be twice as small.

  • Saves bandwidth - One CSS file for your whole site. Also, the actual HTML pages are shorter too.

  • Easier to maintain - Change one CSS file and your whole site's layout is changed.

  • Separate Content from Layout - You will finally restore order to your web site.

This article begins with how to use CSS in order to develop web pages without any tables for layout. This article assumes basic knowledge of CSS and full knowledge of HTML. (Basically, in CSS, you should understand how to include one in a file and the basics of classes.)

blog comments powered by Disqus

- CSS Padding Overview
- CSS: Margins Overview
- Top CSS3 Button Tutorials
- More Top CSS3 Tutorials for Animation and Im...
- CSS Mega Menus: Adding Extra Sections
- CSS Mega Menus
- CSS3 Accordian Menu: Horizontally Display Hy...
- CSS Combinators: Working with Child Combinat...
- CSS Combinators: Using General Siblings
- Intro to CSS Combinators
- CSS Semicircles and Web Page Headers
- Drawing Circular Shapes with CSS3 and Border...
- More CSS Pagination Link Templates
- CSS Pagination Links
- Animated CSS3 Image Gallery: Advanced Transi...

Watch our Tech Videos 
Dev Articles Forums 
 RSS  Articles
 RSS  Forums
 RSS  All Feeds
Write For Us 
Weekly Newsletter
Developer Updates  
Free Website Content 
Contact Us 
Site Map 
Privacy Policy 

Developer Shed Affiliates


© 2003-2019 by Developer Shed. All rights reserved. DS Cluster - Follow our Sitemap
Popular Web Development Topics
All Web Development Tutorials