Home arrow Style Sheets arrow Page 2 - Designing Web Pages without Tables
STYLE SHEETS

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
TABLE OF CONTENTS:
  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
SEARCH DEVARTICLES

Designing Web Pages without Tables - No Tables for Layout
(Page 2 of 4 )

No Tables for Layout

Tables were never meant for layout. They are supposed to be used for displaying tabular data such as athlete records or other information that goes into a table. For layout, you must use CSS. The <div> tag is a loosely defined block-level element made so that you can use CSS on your web page.

Making Classes for the <div> Elements

The first thing you need to do is define a CSS class which your <div> elements will use. This is how to do it:

div.leftnav{

background: white;

color: black;

/* Other display information here */

/* Add Positioning information here */

}

This CSS class is rather simple and won't really do anything right now but define black text on white background. You must position the element somewhere on the page.

Simple Relative Positioning

This means that we just position an element where it is, without defining the exact location.

div.leftnav{

background: white;

color: black;

/* Other display information here */

width: 15%;

}

What did we do? We said that the left navigation would be on the left wherever it is put on the page. This isn't bad, but for more flexibility, you might need absolute positioning. Also, it is important to note that what I just showed you was not real positioning (relative or otherwise.) All that was defined was the width so it will make an element that is 15% wide wherever is it on the page. It won't really position it anywhere. For real positioning, read on.


blog comments powered by Disqus
STYLE SHEETS ARTICLES

- 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 
Support 

Developer Shed Affiliates

 




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