Kicking the Tables for Layout Habbit.

[shopkanji]

OK, I know tables are for layout are bad.

I’m trying to kick my habit.

I just don’t know how.

On the page I’m working on: http://www.fivecents.biz/phoebe/define.php?w=table

I have a VERY light gray background and most of my content in a white table. This gives me a very slight contrast. I am using some CSS to tell the table to have a medium black line on top and a think black line on bottom.

The problem is, it’s slow to load up because everything has to come in from that table before it shows.

How would I get my table using CSS?

[Triumph]

I just found out that tables for layout was bad. I'm in the same boat as you are.

I'll be watching this thread. :)

[shopkanji]

Triumph, on a diffrent CSS forum, I learned that tables aren’t all that bad.

This one guy worked with me to fix my table so it would load faster by adding <col> tags.

So for me personally, this is what I had at first:

<table width="100%" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" style="table-layout:fixed; border-top: medium solid black; border-bottom: thin solid black">
<tr align="left" valign="top">
<td>1</td>
<td>2</td>
<td>3</td>
</tr></table>

And he helped me by making it this:

<table width="100%" cellpadding="5" cellspacing="0" bgcolor="#FFFFFF" style="table-layout:fixed; border-top: medium solid black; border-bottom: thin solid black">
<col width="*"><col width="10"><col width="170">
<tr align="left" valign="top">
<td>1</td>
<td>2</td>
<td>3</td>
</tr></table>

He was saying that would tell the table exactly how to layout data without receiving it first, so it can lay down the groundwork first then shows things as the page gets them.

I noticed a really impressive load up speed on my page.

Here are some <col> tips:

The width is specified in pixels by using something like <col width="170">.
If no width is specified, then all of the columns will be equal regardless of the data on the inside, so three equal columns would be <col><col><col>
If a column is taking up the remaining space, then the width should be specified by an astrix <col width="*">

So, for me, I’m having three columns, the far right is 170 pixels, next to it is 10 pixels wide, then the far left is what ever space is left on the screen.

He also said that for my example, I could also use a DIV tag, but there are some things I should watch out for that I might take forgrannted in tables. He didn't elaborate.

[NogDog]

Tables are fine for displaying tabular data. (Think of "tabular data" as something in a book or document that would appear under the title, "Table 1: Some Title.")

Tables are not fine for page layout. They add bloat to your page (with the ancillary effect of making it harder to maintain), and they are not good for accessibility reasons and/or viewing via non-graphical browsers.

Instead, what you want to strive for is "syntactically meaningful HTML markup" (source text is in a logical sequence and marked up with meaningful HTML tags: H1-H4 for headings, P for paragraphs, UL/OL and LI for lists, etc.). Then you use CSS as a sort of separate layer to tell the "user agent" (browser, printer, etc.) how to format all those elements to achieve the desired "look and feel."

Mastering CSS layout is more complex than slapping things into tables, I think, but the reward of learning it justifies the effort. It gives you great design flexibility once you unlock yourself from the grids tables impose. Just take a look at www.csszengarden.com, for some examples.