Introduction
Many people are abandoning the use of tables in preference for CSS Lists. While in the majority of cases, that is a good thing, it isn't always the correct thing. They say tables are bad and everyone should just ignore them. Because of that, tables get a very bad reputation around the web development world.
When Not To Use Tables
Tables should never be use to layout your web site. That is not what tables were created for. Unfortunately, because of the bad behaviors or many of the browsers, even in today's standard, there is still a large number of people using tables as a way to present their web site. In truth, there is nothing that says one cannot use tables as a design choice but it is vastly accepted that it shouldn't be. So if you are using tables, it is time to move on and use CSS.
When To Use Tables
Tables were created for and should only be used for displaying tabular data. In fact, there is no other method that is better than tables for displaying tabular data. However, because tables have gotten such a bad reputation due to its misuse, I find so many people (myself included), not using data when the data to be displayed is clearly tabular. Not only is that bad but it is stupid on my part because it really is not that easy to get a list or divs behave just like a table in all the major browsers. But I am going to move away from that and stick with a new rule. If the data is tabular, use tables, otherwise, use something else.
Transitioning
Truth be told, most of the time, using tables to style a web site is much easier than not because of the limitations of many of the browsers. It is easier when you don't have to support Internet Explorer version 6.0 or older. Unfortunately, it still owes more than 30 percent of the market shares. Unless you are like me and don't really care about those users, you'll need to support it and that is what makes it hard to do. Though that doesn't mean it is impossible to do.
There are plenty of articles out there that discuss the topic of layouts without tables and they do a very good job of it by providing clear and precise instructions. I don't plan on writing another article of that type because there are so many others out there already. What I plan on doing is providing a solution for some of the common problems developers run into as they try to transition away from tables.
Best Structure for Columns
After many testing attempts, the best structure that I find for having a multiple columns layout is to do it two columns at a time and expanding out when needed.
Code wise, the code for a two column layout would look something like the following:
<div id="wrapper">
<div id="column_1">Content of first column</div>
<div id="column_2">Content of second column</div>
</div>
To make it three columns, simply convert one of the columns intwo a wrapper that has two divs inside of it. That would make our source code looks like the following:
<div id="wrapper_1">
<div id="column_1">Content of first column</div>
<div id="wrapper_2">
<div id="column_2">Content of second column</div>
<div id="column_3">Content of third column</div>
</div>
</div>
Now if we ever needed any more columns, just continue to convert of the one columns into a wrapper and have two divs inside of it. Using this method, you can also easily add a div that expands over two or more of the columns making it quite easy to have a div for the header and/or footer. The only downside that I see so far with this method is that it contains more markup that some of the other methods. However, I'll take flexibility over markup any day.
Missing Height
Chances are, you will be using floats to position certain elements here and there. But when you do, the parent container of that element loses its height. That is really a problem when you have a background that needs to fill out to a height of that inner element. So how do you get that height back without explicitly setting the height for it? You can do it with display:table. However, that does not work in Internet Explorer and can produce some other unexpected behavior. The better choice is to use overflow:hidden. That will restore the height without the side effects known to display:table.
Position and Margin
In my latest adventure of completely rewriting my web site CSS, I began to use margins more and lower the usage of positions. To my surprise, not only did it make my code looks nicer but it was much easier to work with. The only time I am using positions now is when I really have to. So, if you can, use margins to position your elements when you can and only rely on positions if it is not doable. That is especially true when it comes to position:absolute as that can be a pain in the your know where.
But why use margins over positions? The answer is because when you use positions, the element are taken and basically put on another layer. That is where all the height issues comes from. Using margins keep the element in the same layer as all the other elements so there is less worry of one item overlapping another.
Reset CSS
Another thing that made my life easier when I rewrote my CSS was that I used a reset CSS so that I have a level playing field for the design in all of the browsers. There are a lot of browsers reset out there but I am currently using the one from Yahoo. What the reset CSS do is basically reset all of the properties of various tags so that they are the same in all the browsers. That saves us the trouble of fixing margins for Internet Explorer for example. As mentioned, I used Yahoo Reset CSS which is included below:
html {
background: #FFFFFF;
color: #000000;
}
body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code,
form, fieldset, legend, input, textarea, p, blockquote, th, td {
margin: 0;
padding: 0;
}
table {
border-collapse: collapse;
border-spacing: 0;
}
fieldset, img{
border: 0;
}
address, caption, cite, code, dfn, em, strong, th, var {
font-style: normal;
font-weight: normal;
}
li {
list-style: none;
}
caption, th {
text-align: left;
}
h1, h2, h3, h4, h5, h6 {
font-size: 100%;
font-weight: normal;
}
q:before, q:after {
content: '';
}
abbr, acronym {
border: 0;
font-variant: normal;
}
/* to preserve line-height and selector appearance */
sup {
vertical-align: text-top;
}
sub {
vertical-align: text-bottom;
}
input, textarea, select {
font-family: inherit;
font-size: inherit;
font-weight: inherit;
}
/* to enable resizing for IE */
input, textarea, select{
* font-size: 100%;
}
/* because legend doesn't inherit in IE */
legend {
color:#000000;
}