Setting The Table
The humble table hey? Poor thing. It's almost become a byword for bad design. Why though? It's still as useful as ever though. Maybe it's not best used for layout of a page, but, when you're laying out data/forms, it's hard to beat a simple table.
Using CSS to layout a complicated form with lots of fields just isn't worth trying. If the intended use of tables is to display data, why can't it be used to show that data being edited? I still use them for layout of forms and have no qualms about it.
Recently I've been playing with use more CSS to govern the appearance of my tables. I've also started using the <caption> element to apply a "header" to each table. It's all very accessible and proper. Here's a simply of example of a table using a caption and some <col> elements.
Looks best in IE as Mozilla seems unable to process any styles applied using the COL tag. To see the HTML and CSS used look at the source of this page. Notice how lightweight the HTML is. No repeated attributes for any of the cells.
What I don't use are Notes tables. I don't need to tell you why. Instead, I create all mine in PassThru HTML. You then have complete control. It's amazing how powerful tables are. It's all documented at the W3C.
Next time you create a new form use your own HTML to create the table! It's might take a bit longer but it's much more fun/
Skip to the 
You can subscribe to an individual
Actually I'm not sure what all the fuss is about with Notes Generated tables.
OK, it you use the defaults then they do look awful. But you can tweak them.
You can even insert Caption tags quite easily. That is what the "other" option in the HTML tags is for. Just make sure you mismatch the entries such as "><caption>Wibble</caption" (will this show correctly?) what this will do is close the table tag, insert the caption, and any extra Notes generated tags dtop onto the end of the close caption tag where they are totally ignored by all browsers.
I much prefer working inside Notes Tables because you can actually see on the page exactly where everything should be.
@Dragon:
Nice hack, but how do you do <thead>, <tbody> and <tfoot> ?
In my experience, Notes tables are great for ... you guessed it ... Notes.
I didn't say it was perfect. :)
If you really want (need) all that extra stuff then use pass-thru HTML to lay it all out. I'm simply pointing out that getting rid of the standard Notes tables is not always better. Especially when you have a lot of stuff that needs laying out properly.
Case in point, I recently did an application for a huge steel manufacturer, where their forms were all laid out using tables. (6 cols across, title-field-title-field-title-field, about 18 down quite a few with merged cells for wider entries ie. textareas etc.) There were quite a few hide-whens and such in there. You have re-written that in pure HTML would have been a real pain. But by using the additional tags, I used the Notes table on the form and managed to keep everything nicely laid out. If another developer comes in to change it, then they will be able to see exactly what goes where on the page.
I'm all for making things simple. Both for myself and whoever has to maintain the apps. Dumping tables for the sake of it can often lead to other problems.
When I open a Domino Form to edit the HTML I like to see it laid out in front of me (the HTML that is). I don't want to have dig around in property boxes, guessing where it all might be.
Using PT HTML means it's all there for you to see and easily edit.
You know, with R6 you can do both - create your table with the Notes interface, then convert to HTML. If you then use the HTML preview pane, you can make changes to the HTML code and see the changes immediately. It's pretty convenient.
Another great use of plain old HTML table tags in Domino is within views. An embedded view with a few markup columns for formatting can make a NotesView look like a nicely formatted table instead of one of those awful Notes rendered HTML views.
Hi Rock,
could you post 2 screenshots of the differences in Firefox and IE? I look at you above form in IE6 and FF104 and can't spot any?
Could it be the local preview? (Notes doesn't spit out a complete Doctype so FF goes Quirx).
:-) stw
Ok. Your page is Quirx online too. So what could it be?
The field labels are gray text in ie6 and black text in FF.
@Jack... And I'm getting color blind <g>.
However one little quirk. Since you do passthru html, then you could/should (for accessibility sake) use [label for=...] for the labels. This conforms to accessibility guidelines and serves as an anchor for a style definition, so gray comes back in FF too. You could play with the width setting for the labels and eventually get label and field in one cell (but that's already optional).
:-) stw
I think Domino 7 is going to give us the ability to insert thead, when I remember right.
I have no fixed preferences here. Depending on the complexity of the problem - or my actual level of lazyness - I use on or the other (pass-through vs. Domino generated). But I strongly back up Esters comment. Maybe just to often I forget about this one, althogh i'ts been there for almost 3 years now ...
Just to know: what's so special about this caption tag? Why not use a <th> tags instead? Why is a caption better?
A <th> is actually ment to be the header of one table column. I might be appropriate to spread it over more than one column, but strictly speaking it is an semantical abuse to spread it over all the columns.
Also, the caption is not concidered a part of the table structure, but really just that, a caption. Of course, you can still apply some fancy formatting, as Jake did.
No need for a table in this context, I think...
Why don't you just use the HTML-Tags created for forms, such as fieldset, legend and label?
You can do that Ines but the CSS to try and achieve the same layout is very tricky!
I was trying to investigate the differences in displaying by IE and Firefox (my favourite ;). Styling of COL element in Firefox is poor, that's true. But I noticed you have used some strange CSS definition of COL widths:
width="20%";
(exact copy of HTML COL element's attribute definition??). IE is guessing it right, but Firefox takes only (and works with):
width:20%;
Too little time to validate (HTML+CSS) this demo page? :-D
I completely disagree with the statement "Using CSS to layout a complicated form with lots of fields just isn't worth trying." Currently I layout almost every hand coded HTML form using CSS, there are VERY few occasions where my example on Mikezilla {Link} cannot be reused almost effortlessly and the coding is FAR easier than hand coding HTML tables for the same result. The reason people believe that using CSS for form layout isn't worth while is because they don't do it on a regular basis. I do, not because I am an anal CSS geek but because it is genuinely easier once you have done it several times and are used to doing it.