Table theory....

[theEclipse]

As we all know in the past few years a revolution in website design has changed the way some people design websites. I would call this the table revolution.

But my question is this: when is it appropiate to use a table? I personally cant stand to have my forms laid out in a manner that skews the fields and field names at different spots based on how big the field is, so I like to use a table for making things nice and orderly. Is this still an accessible way to code?

Robert Carpenter
Remember....eternity is much longer than this ~80 years we will spend roaming this earth.
ô¿ô

http://www.robertcarpenter.net

 

[BillyRayPreachersSon]

Not really, no. As well as not using tables for layout [of non-tabular data], and the separation of content from presentation, another change is the pushing of semantically correct markup.

This means that if you have a heading, you should use heading elements (h1, h2, h3, etc). If you have paragraphs of text, you should use p elements, etc.

So, with this same train of thought, you should use tables to display tabular data. This could be, for example, a spreadsheet, an invoice, etc.

It would NOT be where you simply wanted your page to have 2, 3, etc columns for any old data.

Your best bet is to use floats. Unless you want your pages to look good in nIE4 or NN4 (doubtful), then as long as you use them correctly (with a few clears thrown in), you should have no problems.

I'd ask in the HTML/CSS forum for help with this if you get stuck, but you can see an example here on our contact page of how effective they are:

http://www.coedit.co.uk/contact/

Hope this helps,
Dan

Coedit Limited - Delivering standards compliant, accessible web solutions

[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[ChrisHunt]

when is it appropiate to use a table?

Like Dan says, "for tabular data". There's a little about when to use a table, and a lot about how to do it, at

http://www.456bereastreet.com/archive/200410/bring_on_the_tables/

Forms are an edge case. You could argue that a form is potential tabular data, where you haven't entered the data yet. Like an empty spreadsheet. A table-based form can be quite accessible, provided it's properly marked up. For example, put each label in a <th> (well, in a <label> in a <th>) and the input in an adjacent <td>.

Another element that can be useful for structuring forms is the <dl>. I use them for applications where I mix fields which can be changed by the user (using <input>s), and those which can't (using plain text). Like this:

<dl>
<dt><label for="userid">User Name:</label></dt>
<dd><input type="text" id="userid" name="userid" value="foobar" size="15" /></dd>
<dt>Last Login:</dt>
<dd>11th May 2006</dd>
</dl>

However, in most cases, you simply don't need anything beyond <form>, <fieldset> and <label> (OK, maybe the occasional <div> or <span>) to lay out a good looking form. Here's two of mine:

http://napitalia.org.uk/eng/libsrch.shtml

and

http://mcgonagall-online.org.uk/cgi-bin/ksearch.cgi

. All neatly lined up, and not a <table> (or even a <br>) to be seen.

Take a look at

http://www.themaninblue.com/writing/perspective/2004/03/24/

for more tips on styling tables.

-- Chris Hunt
Webmaster & Tragedian
Extra Connections Ltd