CSS and Designing without Tables - A Brief Intro

In the old days, websites were generally built in tables — the grid-like container with columns that became the de facto method of building website. Nowadays, using CSS and designing without tables is the better way to go.

CSS (Cascading Style Sheets) has really come into its own in the last few years. Cascading Style Sheets are what saves website designers from many things — like having to assign font faces, sizes, positioning and the like to every paragraph of text on a web page. And from having to edit the same things when the time comes to make changes.

That said, if you're used to designing with tables, it can be difficult to wrap your wits around how designing with divs and CSS works.

Now, while I can hand-code web pages and am also a fan of Dreamweaver as a work-smarter tool that can write your CSS for you, I'd highly recommend that you learn how to write CSS — because any program can only do what it's been programmed to do. And the day will come when you have to fix something — and you can't fix it if you don't understand it. If there's any one thing that I don't let Dreamweaver do, it's touch my CSS files.

The following is taken from an email I sent to someone who picked up the basics of CSS very quickly, and then built his own website. If you don't read HTML well, you might start with our Learn Basic HTML and Web Page Construction series, which covers the basics, including some CSS with respect to fonts.

Otherwise, here it is:

Dear _____:

DocTypes: Essentially, we can apply CSS to just about HTML element, and it's up to the browser to interpret it — which depends upon the doctype at the top of the pages; the doctype specifies to browsers how it is to be displayed. If you use an incomplete (or no) doctype, the display falls into what's called "quirks mode", which pretty much means "good luck". These are doctypes:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

A reasonable (not so fussy) doctype for HTML 4.01 <= I recommend that you use this.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

A reasonable doctype for XHTML, which is used by WordPress blogs, among other sites. The XHTML coding is almost the same at HTML but not quite.

Luckily, if you add a full doctype to a Dreamweaver Template, DW will code for that particular doctype.

Structuring pages with Tables versus Divs: the question is not really "CSS or no CSS" — who wants to go back to font tags, and hand-editing every page? It's whether, for layout purposes, you want to encase your content in tables (which is easier if you're used to it) or divs (which are tricky at first but offer certain freedoms and lighter code). So, where you see questions like "Should I use CSS or tables?", what they're usually asking is "CSS and tables or CSS and divs?".*

* Side note: For years, the argument was that tables were never "intended" to be used for web page layout (who cares?); unfortunately for those who do care about this argument, someone who was present when tables were introduced says that layout was one of the uses suggested for tables. Anyway, this particular discussion gets rather heated with a fervor that is something to behold. As well, since 1998, the Web Standards Project (webstandards.org) was founded to get browser makers to follow Web Standards (agreed upon by browser makers at the W3C.org meetings) so that we can rely on standard coding to give us standard display — because current browsers don't always display the same. They've gone a good way towards this ideal, although Microsoft is still playing silly with some of it.

Now, while you've learned to work with tables, you've illustrated one excellent argument for using divs/CSS: display for multiple devices, such as a Blackberry. It's thought that the various browsers on dozens of models cell phones, Blackberries, etc. may not display table-based sites properly — and you've demonstrated for yourself that that's true. Given the history of desktop browsers, I'd recommend divs and CSS, as that's where the industry is going anyway.

Lastly, do yourself a favor and write your CSS in a separate page (which makes it an "external stylesheet"), and link to it from within the <head> area of your pages, so that updates require editing one file, not every page. And test/design in Firefox or Opera, as they're more standard than IE (which is buggy and has display issues), then fix your code for IE (I'll help, if it comes to that, although I've found ways to code that don't require separate "hacks" for IE).

IDs, Classes and HTML tags: CSS styles cascade down the CSS page, meaning that if you define something, and then redefine it later in the CSS page, the latter styling will apply. However, CSS also has two levels in addition to the ability to define how any HTML tag displays:

any HTML tag can also be styled (e.g., body, h1, p, etc.)
ID (id="something") which can only be used once on any page and has more "weight" than (can override) classes
class (class="something") which can be used multiple times on a page

body <= an HTML tag
#pagewrap <= an ID; can be used only once on a page
.someclass <= a class; can be used multiple times on page

I use IDs for main layout elements (header, footer, navbar, content) so that they're not inadvertently out-weighed by a class. (Note: while you can name your IDs and classes anything you like, I'd recommend taking care in doing so, or you'll be updating them later when they drive you nuts trying to figure out what you applied them to.)

Example Stylesheet

body {text-align:center; font-family:arial,helvetica,sans-serif} <= centers everything on the page that falls within the <body> and </body> tags, which is everything

#pagewrap {width:780px; text-align:left} <= now we need to center-align the "page" but left-align the content. If you're not setting a page width, I don't think you'll need this.

h1 {color:#f000, font-size:23px}

Floats: CSS/divs relies heavily on what is called a "float" ... meaning you can align or "float" something to the left or right or where it would be if you didn't float it:

<div style="float:left">sdfd</div>
<img src="someimage.jpg" style="float:right">

However, stuff later on the page may still be affected by the float, so you have to clear it from what went on before (you can clear:left, clear:right, or clear:both):

<div style="float:left">sdfd</div>
<img src="someimage.jpg" style="float:right">
<p style="clear:both">

Let's try it: Now, without writing an entire stylesheet, let me illustrate. Here's code starting right after the body tag (remember that we've already made the page center in the body tag):

<div id="pagewrap">
<div id="logo">logo and whatever here</div>

<div id="contentarea">
<div float me left; assign a width> Here's my content</div>
<div float me right; assign a width> Here's my navbar</div>
<div clear:both>footer</div>

</div> 
</div>

Columns with background colors: lastly (really), divs are generally only as tall as their content, which means that (for example) a navbar may not be as tall as the content on a particular page — which is okay if you don't want a background color on either one. With divs, if you want (for example) a navbar with a background color that runs to the bottom of the content, make a background image for that part of the page (e.g., the whole content/navbar); problem solved.

Diane Vigil founded DianeV Web Design Studio, has served as a consultant to numerous companies, as a moderator and administrator of the JimWorld SearchEngineForums and Cre8asiteforums, on the Site-Report Experts Panel — and has designed and built numerous websites since 1997.

DianeV Web Design Studio

© 1998- DianeV Web Design Studio. All Rights Reserved. :: Privacy/Legal/Return Policy. Any unauthorized reproduction
or distribution of the contents of this website is a violation of copyright law and may result in severe civil and criminal penalties.