When are tables appropriate, and when are they not?

Hello,

I understand the issue that tables should be used for tabular data and
not for layout, but I would like some clarification as to exactly what
constitutes tabular data.

For example, if I have a form, in which the user is required to fill in
various bits of information, then laying out with a table makes it easy.
A basic example...

http://www.kidsinaction.org.uk/TableForm.html

[Please note that this is a very basic quick example knocked up for the
purpose of illustration. In a real example, more effort should be made
to ensure it is accessible, by using label tags, axis and pivot
attributes, etc. This was all omitted for brevity and clarity]

The main advantage of this (ab)use of tables is that the cells
automatically line up both horizontally and vertically.

Can this be done in CSS? I know I could treat each row individually, and
use a div, but then how would I get the second column (with the entry
boxes in) to line up? Using a table allows the browser (or whatever
rendering device is being used) to decide how much space to give each
row and column to allow the contents to fit. All the entry boxes line up
vertically in the table.

More to the point, is this actually an abuse of tables? I read a thread
here a while back in which someone suggested that this was reasonable.
It was suggested that this was a form of tabular data. No-one argued
with that, and it seemed a fair suggestion.

Any comments? This is a genuine question, not an intention to troll or
start an argument. I'm really not sure if this is an abuse of tables and
would like to hear the experts' opinion. If it is an abuse, is there a
sensible and simple CSS alternative? TIA

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver wrote:

[table used to display form]

More to the point, is this actually an abuse of tables? I read a thread
here a while back in which someone suggested that this was reasonable.
It was suggested that this was a form of tabular data. No-one argued
with that, and it seemed a fair suggestion.

My opinion hasn't changed since then ;-) - I use tables for forms.

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Sun, 5 Feb 2006 14:40:46 +0000 from Alan Silver <alan-
silver (AT) nospam (DOT) thanx.invalid>:

I understand the issue that tables should be used for tabular data and
not for layout, but I would like some clarification as to exactly what
constitutes tabular data.

For example, if I have a form, in which the user is required to fill in
various bits of information, then laying out with a table makes it easy.

As soon as you state it to yourself as "laying it out", alarm bells
should go off in your head. That tells you're you've skipped over the
essential step of asking whether your data actually are tabular.


In the case of a form in particular, you might make a case that the
captions and the fill-ins (text boxes or option lists) are logically
a two-column table, with each caption tied to its fill-in. But that
breaks down if you have any fill-in without a caption.

--
Stan Brown, Oak Road Systems, Tompkins County, New York, USA
http://OakRoadSystems.com/
HTML 4.01 spec: http://www.w3.org/TR/html401/
validator: http://validator.w3.org/
CSS 2.1 spec: http://www.w3.org/TR/CSS21/
validator: http://jigsaw.w3.org/css-validator/
Why We Won't Help You:
http://diveintomark.org/archives/200..._wont_help_you

Stan Brown wrote:

[form being tabular data]

In the case of a form in particular, you might make a case that the
captions and the fill-ins (text boxes or option lists) are logically
a two-column table, with each caption tied to its fill-in. But that
breaks down if you have any fill-in without a caption.

So.. If I have a large table, full of tabular data, and there are some
empty cells in it, it's not a table anymore?

--
Els http://locusmeus.com/
accessible web design: http://locusoptimus.com/

Thanks for the reply. I have made some comments below. Please note that
these are *not* intended to be critical, just to try and explore the
idea further. I am not advocating tables, I am trying to decide if they
can be replacing, without loos of functionality.

<snip>

The main advantage of this (ab)use of tables is that the cells
automatically line up both horizontally and vertically.

They line up horizontally. Any block-level elements will line up those
elements vertically.

E.g.:
Example of section 17.4.2 Examples of forms containing INPUT controls
http://www.w3.org/TR/html401/interac....html#h-17.4.2

Yup, they line up horizontally, but *not* vertically. This was precisely
the problem I wish to avoid. This form looks awful, and will cause the
user to become confused. The table approach means that all the entry
boxes are vertically aligned.

Can this be done in CSS?

Probably. I think so, yes.

Please show me how ;-)

Before you do though, I should point out that another advantage of the
table approach is that you don't need to specify a width for either
column. The rendering device decides what width to give them, based on
the size of the available space, size of contents, font size, etc.
Fixing the width, even using ems does not give that flexibility.

<snip>

No, I wouldn't say abuse. Forms (like a subscription form) are often
formatted with tables.

So are you saying that you feel this is an appropriate use of tables?

What's absolutely nonsense to me is
- use of nested tables

Depends on the context. I can think of plenty of times when this is
appropriate. Unfortunately, the vast majority of cases in the wild are
not ;-)

- using table for nothing that is remotedly close to tabular data

Agreed, hence my question. Can a form be called tabular?

- using table with all kinds of spacer.gifs, dozens of &nbsp; for
horizontal padding, dozens of <br> for vertical ventilation
- seeing a page that has 10, 30 or 50 tables

Agreed twice

<snip>

Any comments? This is a genuine question,

It's ok. It's called a discussion newsgroup.

Sure, but some people (not just here) treat these sort of issues as an
invitation to war!! I am genuinely interested in learning here, and
wanted to preclude any flames.

<snip>

I'm sure you will find possible CSS alternatives in the links of this page:

Table-based webpage design versus CSS-based webpage design: resources,
explanations and tutorials
http://www.gtalbot.org/NvuSection/Nv...CSSDesign.html

With all due respect, I only found one link there that attempted to show
how to do layout without tables. There were plenty links to articles
explaining why I shouldn't use tables, but little on how to go about it.

The one link (a list apart) that did do so suffered from problems
mentioned above. Please see my reply to another poster who quoted that
link directly.

Thanks for the reply. Any further comments appreciated.

--
Alan Silver
(anything added below this line is nothing to do with me)

As soon as you state it to yourself as "laying it out", alarm bells
should go off in your head. That tells you're you've skipped over the
essential step of asking whether your data actually are tabular.

Which is why I asked the question ;-)

In the case of a form in particular, you might make a case that the
captions and the fill-ins (text boxes or option lists) are logically a
two-column table, with each caption tied to its fill-in.

Which was precisely the opinion that I quoted in my original post ;-)

But that breaks down if you have any fill-in without a caption.

Why? Even real, honest tabular data sometimes has gaps.

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)

The main advantage of this (ab)use of tables is that the cells
automatically line up both horizontally and vertically.
Can this be done in CSS?

In this page,
http://www.alistapart.com/articles/practicalcss/
search and find the section titled

"FORM(s) and Function"

"Another common use for table layout is lining up FORM elements with
their labels. While it could be argued that this is an appropriate use
of TABLEs, the CSS technique that I describe below will prove to be
useful (...)"

Try increasing the font size of your browser and look again at that
form. The captions become bigger than the fixed space allocated to them,
and the second "column" entry goes down a line, destroying the neat
arrangement that a table would give.

Furthermore, if the user has a big monitor and maximises their browser
(using the common example of a computer user viewing the form in a web
browser), then the fixed width column stays the same width. They don't
get the benefit of the wider space that their big monitor allows. A
table will be resized to use as much space as it can. This is another
big advantage of using tables.

Please understand, I'm not advocating tables, nor am I being
argumentative, I'm just trying to explain why the solutions proposed so
far don't solve the problem as well as a table does. I would be very
happy if someone could propose a CSS solution that works as well.

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)

E.g.:
Example of section 17.4.2 Examples of forms containing INPUT controls
http://www.w3.org/TR/html401/interac....html#h-17.4.2
Yup, they line up horizontally, but *not* vertically. This was
precisely the problem I wish to avoid.

Is that vertical lining up problem so bad? really really bad?

Yup, it looks ugly, and can be very confusing to a significant
percentage of users.

This form looks awful, and will cause the
user to become confused. The table approach means that all the entry
boxes are vertically aligned.

Can this be done in CSS?

Probably. I think so, yes.
Please show me how ;-)

I have in another post.

Ah, but I added the caveat below. Unless I missed the point (entirely
likely), the example posted suffered from the problem described
immediately below...

Before you do though, I should point out that another advantage of
the table approach is that you don't need to specify a width for
either column.

This is debattable. Declaring a width for <col> and declaring
table-layout: fixed will speed up parsing and rendering in all modern
browsers.

I have never noticed a problem in rendering speed by not specifying the
width, and I have seen significant advantages in allowing the browser to
decide what to use.

The rendering device decides what width to give them, based on
the size of the available space, size of contents, font size, etc.
Fixing the width, even using ems does not give that flexibility.

I never used em for col width; I always used %tage instead.

Also suffers from serious problems. How do you know in advance what the
relative size of the contents are? Who says a text box will always be
half the size of the caption (or whatever). Using percentages fixes you
to issues like this. Allowing the browser to decide gives the best
balanced layout, taking all the factors into account.

snip
No, I wouldn't say abuse. Forms (like a subscription form) are often
formatted with tables.
So are you saying that you feel this is an appropriate use of
tables?

Maybe it's not the best usage. I think what you do is acceptable use of
table.

OK, that's a point worth noting. That was one of my original aims in
posting.

In a spreasheet application or a database application, one could be
using a table to render customer info and its related personal data.

Now you are talking about *real* tabular data. I don't think anyone
would suggest that's not an appropriate use of tables!!

What's absolutely nonsense to me is
- use of nested tables
Depends on the context.

I have no relativity on nested table. A table of tables makes no sense
to me. I wouldn't be able to see or use one in MS-Excel or any
spreadsheet application.

Then you obviously have little experience in data-centric applications
of any real depth. This is not a criticism, just an observation based on
this comment.

Many real-world applications work with hierarchical data, where nested
tables would be appropriate. I have had to develop this sort of thing
many times.

Furthermore, assuming that you accept the use of a table for laying out
a form, what would you do if one part of the form required some tabular
data to be presented to the user? For example, I have a form (on a
private page, so I can't post an URL) where the user can type a template
for an e-mail. They can include various application-specific tags, that
will be interpreted by the application to create a personalised e-mail.
There is a small table showing the syntax for these tags. By necessity,
this table needs to be next to the entry box for the template. This
leads to a nested table. Maybe you think this does not make sense, but
it does to me.

Nested tables is no more sensible than typing on a keyboard located
inside another keyboard, a car traveling inside another car, reading a
book inside another book, etc.

Totally inappropriate comparisons. That's like saying that since you
can't have a filing cabinet inside a filing cabinet, you shouldn't be
allowed directories inside directories on your computer's hard disk. The
one has nothing to do with the other.

I can think of plenty of times when this is
appropriate. Unfortunately, the vast majority of cases in the wild
are not ;-)

Well, that was and still is the challenge issued by David Dorward:

"If you really do have data that should be in nested tables, I do want
to see it!"
http://dorward.me.uk/www/nested/

I've given you a couple above (based on the assumption of using a table
to layout a form of course).

- using table for nothing that is remotedly close to tabular data
Agreed, hence my question. Can a form be called tabular?

No. A form can be tabular depending on the data it presents.

Please explain that last comment as I don't really understand what you
mean.

Thanks for the reply, I'm finding this very informative.

--
Alan Silver
(anything added below this line is nothing to do with me)

Alan Silver wrote:

"FORM(s) and Function"

Try increasing the font size of your browser and look again at that
form. The captions become bigger than the fixed space allocated to them,
and the second "column" entry goes down a line, destroying the neat
arrangement that a table would give.

The widths were specified in px units rather than ems.

Furthermore, if the user has a big monitor and maximises their browser
(using the common example of a computer user viewing the form in a web
browser), then the fixed width column stays the same width. They don't
get the benefit of the wider space that their big monitor allows. A
table will be resized to use as much space as it can. This is another
big advantage of using tables.

It is not uncommon for table-based forms to fix the width of columns as

well. You may not do that allowing the form to fill the space.
Using percentages for widths instead of pixels would accomplish the same
thing in the non-table form.

There is no doubt that tables have certain advantages for layout. Just
not enough.

--
jmm (hyphen) list (at) sohnen-moe (dot) com
(Remove .AXSPAMGN for email)

"FORM(s) and Function"

Try increasing the font size of your browser and look again at that
form. The captions become bigger than the fixed space allocated to them,
and the second "column" entry goes down a line, destroying the neat
arrangement that a table would give.

The widths were specified in px units rather than ems.

Yup, but it suffers from similar problems if you change the units to
ems. The problem is that CSS doesn't seem capable of setting a
container's width based on the contents. That's one of the main powers
of tables.

Furthermore, if the user has a big monitor and maximises their browser
(using the common example of a computer user viewing the form in a web
browser), then the fixed width column stays the same width. They don't
get the benefit of the wider space that their big monitor allows. A
table will be resized to use as much space as it can. This is another
big advantage of using tables.

It is not uncommon for table-based forms to fix the width of columns as
well.

Which rather defeats the advantage I was describing. It may not surprise
you to know that I don't do this ;-)

You may not do that allowing the form to fill the space.
Using percentages for widths instead of pixels would accomplish the same
thing in the non-table form.

Nope, that still requires you to guess the relative size of the column
contents. Plus, the percentages are based on the container (likely to be
the window), not the contents.

There is no doubt that tables have certain advantages for layout. Just
not enough.

Well, in this case I'm not so sure. It seems to me that they do have the
edge here. Sure you can get away with CSS-based layouts in this case,
but that presents as many problems as it solves.

Thanks for the reply.

--
Alan Silver
(anything added below this line is nothing to do with me)