CSS Lesson #5: Tackling Tableless Design

CSS Lesson #5

"Tackling Tableless Design"

Designing without the use of HTML tables. It's a relatively new concept, actually, but one that's very interesting and allows for a lot more design freedom. I won't lie to you, it can be pretty complicated and confusing. My first tableless design was the waterworld2 skin used for The Dragon Ball Fanfiction Library. I had upgraded the script running the fanfiction archive to 2.0 and the new templates were written using layers. I'd just finished reading The Zen of CSS Design (highly recommended) and figured that it was a good time to try out what I'd learned.

Two weeks later I had something passable but I didn't get around to refining it until three or four months later. By that time I'd done several eFiction skins using CSS and felt confident enough to tackle the project. I personally like this method of design as it challenges me. I hardly even use HTML tags anymore except for what's required to make a webpage and the <div>, <p>, <span>, <ul>, <li>, <strong>, and <i> tags. Sometimes tables are necessary, though. They're best for creating neat charts of information or for creating a design with strict columns or rows.

Layers Are Your Friends: <div> (division) tags, otherwise known as layers, are a requirement for tableless design. Without them you will flounder and then eventually drown... Okay, not really; a simple, mostly text webpage could probably get by just fine without but these are important.

Facts About Layers:

With

<div style="background-color:#406480; width:150px; padding:3px; color:#FFF; border:1px solid #000;">
<div style="background-color:#FFF; width:60px; height:50px; color:#000; float:left; border:1px solid #000;">float #1</div>
<div style="background-color:#FFF; width:60px; height:50px; color:#000; float:right; border:1px solid #000;">float #2</div>
</div>

float #1

float #2

IDs and Classes: Without these attributes you'll have a problem with styles overriding each other.

Facts About IDs and Classes:

Example:

back to the top

Formatting the Page: There are some things you should do in addition to the standard HTML to create a page that will use tableless design.

The Container

<html><body>
<div id="container">
insert content here
</div>
</body></html>

<div> and <p> Harmony

<div><p>paragraph #1</p> <p>paragraph #2</p></div>

A Layer For Every Player

back to the top

Selectors: There are more ways to select elements than these but I won't go into the highly specialized ones (other than the child selector) since IE ignores them.

Type Selector

Example:

Descendant Selector

Example #1:

Example #2:

Child Selector

Example:

Class Selector

.name

Example:

element.name

Example:

element.name1.name2

Example:

ID Selector

back to the top

Constructing A Design: Is it difficult to understand what I'm talking about? Here's a link to a page with examples that I created using the tableless design method. Every section is explained and I have the code and stylesheet info displaying in their own frames. It's best viewed in anything other than Internet Explorer. I don't recommend using negative margins (like I did in example #2) as IE tends to cut off part of the layer.

A Few Things to Keep In Mind:

CSS Zen Garden

back to the top

Inspirational Designs: These are tableless designs that I find very well-done. Don't let them intimidate you, though.

Atlantis

Japanese Garden

CS(S) Monk

Table Layout Assassination!

back to the top