Designing Web Pages without Tables

(Page 1 of 4 )

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.

Introduction

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.

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.

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.)

Next: No Tables for Layout >>
 

More Style Sheets Articles
More By Sasha Slutsker

Comments On: Designing Web Pages without Tables

· Since ALL browsers use table consistently, and not all browsers use CSS...    · You keep using tables, and the rest of us will take what you call a job. Oh, and if...    · you are right to continue to use tables for now. A year or two down the road, CSS...    · that's Netscape 4.7    · Looks like tables are still good enough for Dev Shed sites.    · I decided to put the table/css debate aside for a moment to try creating the css...    · unless your designing for an intranet where you can control the browsers used, stick...    · You need to add the CSS code that defines the content, rightnav, and leftnav...    · Also, you can see an example of a site written in completely valid XHTML/CSS here:...    · The Solar Conflict site is simple yet elegant. It taught me all I need to know to...    · Yes you can make really good web sites with CSS : but if you want to know how to do,...    · For my site, I've used the display: inline and display: table-cell commands, to get...    · This site is "devoted" totally to css and shows how flexible it really can be in the...    · I forgot exactly the code I used, but try something like border-margin:0; it could...    · but it is aggravating that IE renders pages so differently than all the other...    ·     · It's easy to label developers that still use tables as ignorant and afraid of...    · Actually I find that when I'm trying to make pages accessible CSS is more of a help...    · Actually I find that when I'm trying to make pages accessible CSS is more of a help...    · Um, Sasha, did you know your name reads Sasha Slut in the article listing? Call me...    · The opening css design on "zen garden" renders terribly in IE5.0. To be specific,...    · I'm curious. Am I the only one that uses CSS with tables? I used divs too, but it...    · I too have seen the ramifications of IE being way to forgiving and Netscape seeming...   >>> Post your comment now!