How to learn to replace tables with CSS?

Forum Moderators: not2easy

Message Too Old, No Replies

How to learn to replace tables with CSS?

CSS for styling is one thing. CSS for layout is another. How to learn?

1337Mac

3:36 am on Apr 6, 2009 (gmt 0)

There is a popular school of thought that tables should only be used for tabular data and not layout. Unfortunately while this philosophy sounds great in principle, in practice I find it quite difficult to achieve. In general, CSS makes a lot of sense to me and regularly I use it to style my pages. But when it comes to trying to recreate layout structures I often fail miserably, getting unpredictable results that look nothing like what I'm trying to achieve. Are there any rules or guidelines that can be used to translate table structures into float/clear CSS-based layouts?

Please share what has worked for you. Or if you think CSS can/should not be used to emulate tables I am open to hearing that argument as well.
Thanks.

DrDoc

7:11 am on Apr 6, 2009 (gmt 0)

First of all, do not try to "recreate" an old layout. Table layouts are usually boxy and lack many of the possibilities a CSS based layout can offer.

I usually approach a CSS layout one step at a time. I slowly work my way deeper into the nested layout, styling as I go.

<body> 
  <div id="Page"></div> 
</body>

... becomes

<body> 
  <div id="Page"> 
    <div id="Header"></div> 
    <div id="Content"></div> 
    <div id="Footer"></div> 
  </div> 
</body>

... and then

<body> 
  <div id="Page"> 
    <div id="Header"> 
      <div id="Logo"></div> 
      <div id="TopNav"></div> 
    </div> 
    <div id="Content"> 
      <div id="SideNav"></div> 
    </div> 
    <div id="Footer"></div> 
  </div> 
</body>

Start that way while you familiarize yourself with CSS layouts. Then you can get more daring with floats and positioned elements.

Whether you do a "table like" layout, a floating madness layout, or a (re-)positioned layout ... start with one element at a time, styling as you go, until you have the whole framework and design built.

... at least that's how I approach it.

1337Mac

9:24 am on Apr 6, 2009 (gmt 0)

Thanks for that tip.
I do approach it in such a way but what usually happens is I can't get floats to work the way I want them to.

For example W3 Schools has an example of how to create layouts without tables:
[w3schools.com...]

When I look at the markup I understand what the CSS is doing, but when I try to for example add a third column, it totally breaks.

swa66

12:14 pm on Apr 6, 2009 (gmt 0)

Most trouble I see that people have with floats is that they think a float is a column, more or less like how a cell in a able row reacts. The example you pointed to does make it seem that way on first looks. But you really should see a float as the generalized version of an image with horizontal alignment

<img src="1.jpg" alt="image" align="left" />

.
With floats it's imported to know the parents will not stretch to encompass them anymore (unless they are floated themselves) as the floated element isn't part of the flow anymore. However floats do affect the flow and aside of shoving content to a side, they can also be "clear"-ed.
Combining that all with a trick to position backgrounds on parents when you want a background to go on beyond the height of a float usually does the trick.

rocknbil

2:37 pm on Apr 6, 2009 (gmt 0)

Are there any rules or guidelines that can be used to translate table structures into float/clear CSS-based layouts?

Once you get the ground work in, it's always good to base your work off a working example and play around with them; don't re-invent the wheel. Excellent 2 and 3 column layout examples [webmasterworld.com] posted by SuzyUK.

1337Mac

8:18 am on Apr 14, 2009 (gmt 0)

I've been doing some experimenting with an elastic three-column layout. One problem I encountered was that adding padding broke the layout. I found this odd since padding is on the inside of a DIV and should not affect how that DIV is positioned. Nonetheless, padding broke it. But I found a workaround: nesting DIVs.

Now there is just one more problem (for the time being):
The backgrounds won't reach to the footer, except for the tallest DIV. I've tried making the DIV heights 100% but this didn't work. Any ideas?

Here's the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Substituting Tables With CSS</title>
<style type="text/css">

</style>
</head>

<div id="header"><h2>Example header text</h2></div>
<div id="col1">
<div id="col1Content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas est etiam processus dynamicus, qui sequitur mutationem consuetudium lectorum. Mirum est notare quam littera gothica, quam nunc putamus parum claram, anteposuerit litterarum formas humanitatis per seacula quarta decima et quinta decima. Eodem modo typi, qui nunc nobis videntur parum clari, fiant sollemnes in futurum.
</div>
</div>
<div id="col2">
<div id="col2Content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</div>
<div id="col3">
<div id="col3Content">
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi.
</div>
</div>
<div id="footer"><h3>Example footer text</h3></div>

</div>

</div>
</body>
</html>

steve

12:44 pm on Apr 14, 2009 (gmt 0)

Search for 'faux columns', basically you add a background graphic to the containing element.

1337Mac

11:06 pm on Apr 14, 2009 (gmt 0)

Thanks Steve, I'm looking into it.

swa66

12:27 am on Apr 15, 2009 (gmt 0)

Actually, considering you use flexible width, you need more: look for "flexi-floats".