Are you paying attention? That’s kind of a trick title, isn’t it? True “table” formations created today using Cascading Style Sheets (CSS) aren’t really tables at all...
But the effect is the same, so for all intents and purposes for the remainder of this article we will refer to them as tables – but you will know that they aren’t the old-fashioned nested things that used to cause webmasters to pull their hair out. We are talking about the “tables” of today – tables designed using CSS.
Why Are Old Fashioned Tables So Bad?
The folks over at HotDesign.com seem to really hate tables – in fact, in their article titled, “Why Tables for Layout is Stupid,” they say:
"Tables existed in HTML for one reason: To display tabular data. But then border="0" made it possible for designers to have a grid upon which to lay out images and text. Still the most dominant means of designing visually rich websites, the use of tables is now actually interfering with building a better, more accessible, flexible, and functional Web."
In the article the author goes on to state that using style sheets instead of tables will make your pages load faster, lower your hosting costs (not much – that one’s stretching it a bit), make your re-designs more efficient, help maintain visual consistency throughout your sites, get you better search engine results, make your sites more accessible to all viewers and give you a competitive edge as the world moves to Web standards. Wow – that’s a lot to expect from CSS. But CSS is the “little engine that could” for Web developers – it can do practically anything!
How It Works
To use CSS layouts instead of tables you should really have a basic understanding of CSS. It also doesn’t hurt to get a better understanding of the how and why behind style sheets, what they were created to do – and why using CSS is so much better than anything you’ve ever used in the past. Style sheets are based upon the concept of “absolute positioning.” What that means is that every single element is perceived as a unique entry that can be specifically – and absolutely – placed anywhere on the page in relation to its edges.
The most efficient way to accomplish this “absolute positioning” is with the use of div boxes. Important: you should always remember margins and stack order of the div boxes. The margins can be set in relation to the edges of the page – vertically and horizontally. The stack order of the div boxes allows overlapping – or if you so choose – prevents overlapping, allowing you to hide part of a div box, placing something else on top instead.
The stack order translates to z-index number. Unfortunately, that is the CSS command that is most difficult for users to grasp. There is an excellent illustration at HTML.net that may help you to better understand what the z-index number is and how it works [http://www.html.net/tutorials/css/lesson15.asp]. Once you understand how it works you will discover that there are many, many ways that you can use CSS to create virtually any layout.
The Basic Layout
The basic layout – sans tables – typically consists of a header, navigation (typically a sidebar) and the main section – the content. You should create a different div box for each one – that will help you with positioning, organization and control of your page’s layout. These three basic areas can be located anywhere on a page – that’s where your own creativity comes in. Sure the header could be at the top, the navigation could be on the left in a sidebar and the content could be to the right – a typical average page. But you can shake things up – move the header anywhere you want - and the navigation doesn’t have to be a sidebar, it could be a top toolbar, a specially placed section to help your visitors move around your site. And the content, it could be the whole width of the page – next to the “header” (which doesn’t always have to be at the top) – or anywhere at all.
However, the key things that you have to know and must remember are:
1. Position within the page (margins to the edges of the page).
2. Position relative to other elements (i.e. where the header is in relation to the content, and where the content is in relation to the navigation, etc.).
3. Size (the height and width of everything).
4. Importance (the order of appearance of the areas within the source code).
So the basic div structure of the layout would look like this:
Header
Navigation
Content
That doesn’t really tell you much right off the bat – in fact, this is about as basic as you can get. In order to create your own layout – with the heights, widths, header/navigation locations, size of the content area, etc. that you want – you will need to do a lot of tweaking. Remember – the key phrase here is “absolute positioning” – so your directions will have to be absolute!
Before we begin to build our CSS layout, however we will need some facts. Remember – you need to know the size and the location of everything. Get all that information together and putting it all into the CSS file will be easy. For the sake of argument the information for our sample CSS layout will be:
Content Area – width 500 pixels
Navigation Area – width 200 pixels
Header Area/Image – width 700 pixels, height 100 pixels
Tweaking the Layout
Let’s get the layout started with the content div box – typically your content is the most important. It isn’t listed “first” in your markup (see above div boxes) – but in your CSS file you can put it in whatever order is most important to you, your organization and your site.
To place each div within the HTML of your Web page you will use the following tags:
Remember – we are starting with content – so the style sheet reference for the “content” box is listed below:
div.content {
position: absolute;
margin: 100px, 0px, 0px, 200px;
width: 500 px;
z-index: 1;
}
What all of this means is that the “position” and markup of “absolute” shows that the box is positioned “absolutely” to the “edges” of the document. The “margin” indicates where the content box is located within the document – which in this case is 100px from the top and 200px inside the document’s edges and goes all the way to the edges (the 0px) of the other sides of the document. The “margin” is always set in clock-wise order in relation to the top, right, bottom and left of the page. The “width” of the content box is as we designated above – 500px wide – and the z-index sets the stack order of the div boxes showing that the content box will be positioned underneath any other box with a higher z-index.
The next section will be the navigation – also a very important element in this layout design. Because our navigation is of the typical “sidebar” variety and is located alongside the content div box, we will include some references that are similar to the ones in the content box:
div.navigation {
position: absolute;
margin: 100px, 500px, 0px, 0px;
width: 200px;
z-index: 2;
}
Again, “position” is “absolute,” but this time the margin is set to show, as with the content – to be 100px from the top. But this time the margin is 0px for the left because it is on the left side, flush with the page’s edge – and 500px to the right, to allow for the 500px wide content area. Width of the navigation box is 200px – and the z-index is 2 in order of overlapping or positioning pecking order.
The final section that we will be going over is the header – not nearly as important as either the content or the navigation – this section can be listed in pecking order or in order of visibility – again, dependent upon the personal preferences of the Web developer.
div.header {
position: absolute;
margin: 0px;
width: 700px;
height: 100px;
z-index: 3;
}
And once again “position” is absolute – but this time the margin markup is just 0px – if it is 0px all around, you can list it as 0px and it will be sufficient. It is not necessary to denote all four sides in this case – it is assumed that 0px translates to 0px, 0px, 0px, 0px. The width – and this time also the height – are marked as indicated previously – 700 pixels wide and 100 pixels high. The z-index order is 3 – overlapping both the content and navigation boxes if necessary.
Testing 1… 2… 3…
It is very important to test your new CSS layout in multiple browsers before moving on and deciding that your new look will do its job. Unfortunately the issue of browser compatibility could fill another entire article - all by itself – so we will try to keep this brief and to the point.
Test first with the “usual suspects” – Microsoft Internet Explorer, Mozilla/Firefox, Opera and Netscape. Test first with the latest versions of these browsers – working on the assumption that most people update their browsers with regularity and that you will see the average screen view when using these “big guys” of the browser world.
Next you should use older browser versions for your testing. If you do not have an older version there are online programs, Web-based browser compatibility checkers and viewers that you can use to get the job done. In most cases, it won’t be compliant – but check your stats – how many of your regular site visitors or what percentage of your unique traffic actually even uses these old fossils anymore? Before you panic > research > that’s always the best way.
Check for horizontal scroll bars – especially in the 800x600 resolution – just to see how those out-of-the-box never-ever-tweak-the-default-settings surfers will view your new page. Check to see that all div boxes, image backgrounds and other settings are displaying properly. Older browsers – like Netscape 4.x – will typically not properly display: the “float” property, images in paragraphs, lists’ margins and paddings, white space in the source code between images or background images.
When checking in text-only browsers you will see that elements such as navigation and sometimes the header are pushed to the bottom of the page following the content. While this can create some layout issues and concerns about how the page will be navigated, look around – in most cases the page is still readable, usable and understandable.
Will You Use CSS Layouts in Your Next Project?
Now that you have a basic understanding of how CSS layouts can work in place of tables in a Web page – will you be trying them out in your next project? Don’t let all these new ideas and new functions scare you off – it’s totally worth the time and effort you will be putting into changing the way you display your content.
Happy developing! Please share your experiences using CSS layouts in your new Web page designs – and ask for help!
