plainblack.com
Username Password
search
Bookmark and Share

CSS Vs. Tables

 

A question you’ll often be confronted with when you start to come up with a website design is how it should be constructed. A purist would say you should definitely make your website using purely CSS. Someone from the old vanguard would tell you that tables are still the most reliable method, and then others might give you an answer somewhere in between. The fact of the matter is, nearly every website you visit today will have CSS used to some degree. It’s not always an easy question to answer.

 

CSS is extremely powerful, and it is intended to be used for dynamic and creative layouts. Originally, when the web was still just a toddler, CSS was just a faint promise. Websites were built with clunky and repetitive tags, and tables were the only choice when coming up with layouts. Years have gone by, technology has progressed, and along with this progress many have started to scoff at the use of tables. Is that a good idea? Should tables be totally abandoned? This chapter examines some of the issues and tries to come up with an answer.

 

The Choices

 

When it comes to creating a layout, there are two ways to approach it. First, you could attempt to use purely CSS to construct a page. This can be a tricky proposition, but the rewards for attempting it are great. Pure CSS designs offer the designer a great deal of control over how they present content.

 

At one time, the idea of creating pages that looked like a magazine layout was only a dream, but CSS brings designers one step closer to that reality. There are many advantages to using pure CSS layouts, greater creativity being one of them. But another distinct advantage is the modularity. Look at this code as an example:

 

Code Example 1

 

 

<div id=”main”>

<div class=”header”>Header</div>

 

<div class=”navigation”>

<a href=”#”>Link 1</a>

<a href=”#”>Link 2</a>

</div>

 

<div class=”mainBody”>

Here is a little bit of example text.

</div>

</div>

 

 

This simple bit of code can be manipulated by using CSS. So, with just a little CSS, you can turn this:

 

Drab HTML

 

 

into this:

 

Exact Same HTML Modified with CSS

 

 

But what’s really amazing is that this exact same piece of XHTML can also be turned into this with just different CSS:

 

Same HTML, But With Different CSS

 

 

These examples clearly illustrate the guiding concept behind CSS, radically changing the appearance of a page merely by changing the style sheet. This demonstrates the need for CSS and its ability to separate content from presentation. Nevertheless, there are definitely times when you don’t want to use CSS just for a layout.

 

Want to experiment with this? Here is the CSS for both examples:

 

Example 1

 

 

body {

margin:0px;

height:100%;

}

#main {

font-family:arial;

font-size:12pt;

background-color: #D0D0D0;

height:100%;

}

 

.header {

border-bottom:double orange 5px;

background-color:#444;

text-align:center;

color:white;

font-weight:bold;

padding:10px;

font-size:19pt;

}

 

.navigation {

float:left;

margin:15px;

border:solid silver 1px;

background-color:#f3f3f3;

padding:15px;

-moz-border-radius:15px;

width:150px;

border-bottom: solid gray 3px;

}

 

.navigation a {

display:block;

text-decoration:none;

text-align:center;

color:#E1E1E1;

-moz-border-radius:10px;

margin:5px;

color:#050505;

}

 

.mainBody {

padding-top:20px;

}

 

 

Example 2

 

 

body {

background-color:#990000;

margin:0px;

height:100%;

}

 

#main {

margin-left:20%;

margin-right:20%;

background-color:#fffea8;

height:100%;

}

 

.header {

float:left;

width:200px;

font-size:20pt;

background-color:#d7d598;

border-bottom: dashed #bbbc76 3px;

border-right: dashed #bbbc76 3px;

padding-left:9px;

}

 

.navigation {

float:left;

padding-top:7px;

padding-left:20px;

}

 

.navigation a {

color:orange;

}

 

.mainBody {

clear:left;

padding-top:20px;

padding: 20px 10px 10px 10px;

}

 

 

 

So then, why use a table?

 

CSS layouts really are great in many ways, but there are still disadvantages. First, although CSS gives you an amazing amount of control, that control comes at the price of complexity, accessibility, and cross-browser concerns.

 

Even though the basic principles of CSS are very straightforward, the interaction of those properties can sometimes be unexpected. Simply practicing with CSS layouts will get you over this hurdle, but deciding to move from a table layout to a CSS layout shouldn’t be a lightly made decision. It isn’t something where you can simply choose right over left, red or blue. You have to make a very conscious decision ahead of time which route you’re going to go.

 

The first example design looks great using just CSS. How does it look when put together using a table instead?

 

Example 1, Tables

 

 

Did you catch that? Take a look at the design using just CSS again.

 

Example 1, CSS

 

 

That's right, they look exactly the same. As a matter of fact, when I was putting these together and I switched from one screen to another, I saw no difference whatsoever. If exactly the same thing can be done with these two different technologies, then why do so many people fret about CSS only designs? Good question.

 

Tables have the virtue of simplicity. They have been around since nearly day one of HTML and continue to exist in XHTML. Initially, their intended purpose was to display data, but there were those intrepid few who realized you could actually come up with a layout using tables.

 

Table

 

 

<table cellpadding="0" cellspacing="0" border="0" id="main">
<tr>
<td class="header" colspan="2">Header</td>
</tr>
<tr>
<td style="vertical-align:top;width:150px;">
<div class="navigation">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
</div>
</td>
<td class="mainBody">
Here is a little bit of example text
</td>
</tr>
</table>

 

 

OR

CSS Only

 

 

<div id=”main”>

<div class=”header”>Header</div>

 

<div class=”navigation”>

<a href=”#”>Link 1</a>

<a href=”#”>Link 2</a>

</div>

 

<div class=”mainBody”>

Here is a little bit of example text.

</div>

</div>

 

 

When the two pieces of code are compared, there is one thing that is readily noticeable. They are both using Classes and ID's. So, if they're both using CSS, what really is the difference? The table XHTML controls the layout, whereas the layout with <div> tags completely relies on CSS for all aspects of layout.

 

Table Advantages

 

Want a page with a header over two columns? Simplicity itself in the form of a table. The fact of the matter is, tables are still a viable method of organizing your pages if you’re not comfortable with CSS. It is far easier to code and visualize what you need when thinking in terms of a table, because you can just picture columns, headers and footers as being part of one giant whole.

 

Visible Rows & Columns – Table Layout

 

 

Tables used for layouts also have another advantage: they maintain layout even when CSS is turned off, which is something to consider when developing for Section 508 compliance.

 

There are times where the position of information on the page is important, and if you use CSS for positioning of elements on the page, you can run into serious problems if all of a sudden the user decides he doesn’t want to see your carefully crafted CSS at work. Pieces of your page could be strewn about in unpredictable locations. The horror!

 

CSS Layout, CSS Turned Off

 

 

VS

 

Table Layout, CSS Turned Off

 

 

Granted neither one of these examples looks pretty, but it's obvious that at least with the table layout, everything is in the position it should be. The CSS version can't boast that at all.

 

Tables are also better at stretching across the page, both width and, especially, height-wise. You can accomplish the same thing with CSS with a bit of work, but by their nature tables expand in a much more predictable fashion than CSS elements.

 

Now I may sound like I'm completely in favor of using tables instead of pure CSS for layouts, but that isn't true. The fact of the matter is, you really have to analyze who your audience is going to be, as well as your skill level with CSS. There are times when it's just far easier to use a table for a layout. Why spend hours trying to work out the kinks with a CSS layout when a table can do the same job in a fraction of the time?

 

The Big Advantage of Tables

 

The biggest advantage tables have over CSS is their simplicity in cross-browser functionality. All of CSS’s features are not fully supported by all browsers. This is particularly true when you factor in Internet Explorer. Netscape, FireFox, Opera, Konqueror and Safari all have relatively similar implementations of CSS (although the latter 2 are debatable). They tend to follow the standards laid down by the W3C, the World Wide Web Consortium.

 

Internet Explorer’s implementation of CSS is flawed in a way that makes it extremely difficult to anticipate how it will be rendered. At least at first. Again, with practice you can begin to anticipate how Internet Explorer will render your pages, but you can almost guarantee they won’t work the way you intended them to at first.

 

One thing worth mentioning is that generally pages behave much better when you code in XHTML Strict as opposed to XHTML transitional. The Strict document type does not allow Internet Explorer, or any other browser, to get away with loose interpretations of CSS. That’s not to say it will solve all of your problems with cross-browser coding of CSS, but it will definitely make life much easier.

 

Can’t I just keep on using tables?

 

In the end, the biggest problem with continuing to use tables is they are becoming obsolete. That’s not to say that in a month no one will be using them. Tables still have a vital function, the one that they were originally intended to be used for, displaying data. But even then, the W3C is moving CSS into a position where it could take over that role too!

 

Reasons to use table-free layouts

 

 

Pros

Cons

Very clean XHTML/HTML.

Tougher to make them work against different browsers.

Easy to swap out different stylesheets to change the look of a design.

Requires more patience to learn than using tables.

Lets you easily modify certain aspects of the design/layout.

Unpredictable behavior at times.

It’s the current trend. Tables are becoming obsolete for layout purposes.

 

 

 

Plain Black design staff highly recommend using CSS for layouts instead of tables, but remember to start slow.

 

Conclusion

 

Although web technologies have given greater flexibility when creating websites, there are always times when you have to consider other options. Table-free designs are the future of the web, and despite what many say, design isn't quite there yet.

 

There is a time and place for tables, and when it comes to compatibility with different browsers, it's hard to argue with its power. However, they do tend to be difficult to work with, and when it comes to needing to change your design around, they can be stodgy to say the least.

 

Keywords: css tables

Search | Most Popular | Recent Changes | Wiki Home
© 2018 Plain Black Corporation | All Rights Reserved