Multi Column Text Without Tables

[Cibressus]

I have read (Learning XML - O'Reilly Publishing, 2001), in which, it
is stated that you should not use tables to format text. I understand
this is because it separates data from formating, which can lead to
adverse effects such as not being rendered properly on speech only
browsers.

If I should not use tables to split text into multiple columns, what
should I use? What should I use if I need more flexibility?

 

[Nik Coughlin]

I have read (Learning XML - O'Reilly Publishing, 2001), in which, it
is stated that you should not use tables to format text. I understand
this is because it separates data from formating, which can lead to
adverse effects such as not being rendered properly on speech only
browsers.

If I should not use tables to split text into multiple columns, what
should I use? What should I use if I need more flexibility?

http://www.google.com/search?q=3+column+layout

 

[Brian Cryer]

I have read (Learning XML - O'Reilly Publishing, 2001), in which, it
is stated that you should not use tables to format text. I understand
this is because it separates data from formating, which can lead to
adverse effects such as not being rendered properly on speech only
browsers.

If I should not use tables to split text into multiple columns, what
should I use? What should I use if I need more flexibility?

The gist of it is to format each of your columns individually and then float
one column against the next. So something like:

<p style="width:20; float:left">Left column</p>
<p>Body</p>

In practise you'll probably want to apply those styles to divs and move the
style defs into a separate style sheet. There are limitations and you'll no
doubt find issues, but that's the general gist of it.

To be honest though, and whilst I do mostly use this technique, there are
still times when using a table for part of the layout is just so much
easier.

Hope this helps.

 

[dorayme]

To be honest though, and whilst I do mostly use this technique, there are
still times when using a table for part of the layout is just so much
easier.

Meaning, I assume, that the basic skeleton be a table with 3
cols. If you do only this and from there on do not use tables for
layout, within the columns, it is no big crime and has much to
recommend it in actual practice.

 

[Jonathan N. Little]

Brian Cryer wrote:

<p style="width:20; float:left">Left column</p>

^^^
20 what?. A little correction here is that a length in this application
unless 0 needs the units specified. "width: 20em;"

 

[marss]

If I should not use tables to split text into multiple columns, what
should I use? What should I use if I need more flexibility?

Multi-columns layout by means of div no more than guru's freak. If you
want columns then use an element that has columns.
You can eat a soup using fork but spoon is more handy. IMHO.

Mykola
http://marss.co.ua

 

[Brian Cryer]

Brian Cryer wrote:

^^^
20 what?. A little correction here is that a length in this application
unless 0 needs the units specified. "width: 20em;"

Oops. Well spotted. I meant 20%, but 20em would be just as good - just not
20px.

 

[Brian Cryer]

Meaning, I assume, that the basic skeleton be a table with 3
cols. If you do only this and from there on do not use tables for
layout, within the columns, it is no big crime and has much to
recommend it in actual practice.

I still have some pages on my website that use a two column table for laying
out the entire page. The disadvantage of using a table for controlling the
page layout is that the browser won't render anything until it has read to
the end of the table. This means that where the table is used to control the
page layout that it won't render anything until it reads to the end of the
page. So performance wise, its not a good idea. That said, I've not done
empirical testing with Mozilla or IE 7 so there is scope for browsers being
more intelligent and rendering sooner than they used to be.

Whatever, I do agree that using tables is "no big crime and has much to
recommend it in actual practice."

Where I tend to use tables occasionally for layout now is where I want a few
items lined up (for example in a 2 x 2 grid), and its just so easy in a
table.

 

[Neredbojias]

Well bust mah britches and call me cheeky, on Wed, 11 Jul 2007 12:27:47 GMT
marss scribed:

Multi-columns layout by means of div no more than guru's freak.

Hardly. It is the standard. Don't denigrate the standard because you
don't know it.

 

[Adrienne Boswell]

You can eat a soup using fork but spoon is more handy.

I like that analogy.

 

[Nik Coughlin]

Multi-columns layout by means of div no more than guru's freak. If you
want columns then use an element that has columns.
You can eat a soup using fork but spoon is more handy. IMHO.

It's really, really easy to do columns without tables. Now, equal height
columns on the other hand... can't be done without tables. Or css tables,
but without IE support those are useless.

 

[dorayme]

I like that analogy.

Not as apt as if he had used casserole. You can't eat soup with a
fork. You can layout columns without a table. The truth is that
it takes quite some skill and thought and fiddling about to get
more than 2 col layouts to do all the things that the modern
author can reasonably expect. 2 col layouts are generally a cinch
with a float for left or right and so there is little reason in
this case to begin such a layout with a table.

Nearly all meals that do not require any cutting, are more
sensibly eaten with a spoon rather than a knife and fork. It
never ceases to amaze me that people even eat casseroles with a
fork and I have seen folk actually cutting mainly the plate in a
conditioned-response sort of a way when there is nothing that
_needs_ cutting.

 

[Bergamot]

It's really, really easy to do columns without tables. Now, equal height
columns on the other hand... can't be done without tables.

Not true. It can be done fairly easily with creative use of borders and
negative margins.

http://webhost.bridgew.edu/etribou/layouts/
http://www.bergamotus.ws/samples/3column-stretch-with-borders.html

 

[Nik Coughlin]

Not true. It can be done fairly easily with creative use of borders
and negative margins.

http://webhost.bridgew.edu/etribou/layouts/
http://www.bergamotus.ws/samples/3column-stretch-with-borders.html

You're cheating, those are hacks that make it seem like you have equal
height columns. You don't. But I should have been more specific, you can't
do a fluid 3 column layout where the columns are rounded corner boxes
implementing png transparency. Can't be done for Internet Explorer without
using tables.

I would love you to prove me wrong

Here's my take on it (an older version, but defining the problem):
http://www.nrkn.com/3ColRoundAlpha/

And (a newer version, given up on equal height but a lot of dumb things I
did in the first version have been fixed):
http://www.nrkn.com/3ColRoundAlpha/new/

The second is much nicer, but I haven't tried to make the columns equal this
time as I don't think it can be done in a cross browser fashion without
tables. Yes it has issues with IE<7 as you pointed out earlier But
those can be fixed easily enough.

 

[Bergamot]

You're cheating, those are hacks that make it seem like you have equal
height columns.

So? Appearances are everything!

I should have been more specific, you can't
do a fluid 3 column layout where the columns are rounded corner boxes
implementing png transparency.

That is different thing altogether, of course.