I'm in a mess with tables

- want to reproduce a paper form

[Mr Bo Jangles]

Hi all,

For a web app, I'm trying to reproduce the look of an existing (paper) Insurance Claim form - on-screen and then as printed. And I'm finding out the enormous amount I don't know about HTML tables (and CSS).

Can someone point me at a really good resource for tables?

Every resource I seem to look at seemingly contradict each other.
I need to be able to position the respective parts of the form fairly precisely, and don't know whether I can/should be using COLS, colspan, rowspan - some resources tell me some elements were introduced for MS IE and aren't part of the official standard - and so I need to know how it should be done. How much of the table specification, style and positioning is done in HTML, how much in CSS.

Be grateful for any assistance....

Many thanks,

[swa66]

I'd make sure to use label tags to their fullest, esp. so on complex forms. Accessibility requires them and it'll make your life easier down the road.

Not having seen the original form, I'd put them in one table (no nested stuff) and use rowspan/colspan as appropriate.

What I'd do on paper:

• Take a contrasting color and every column in the paper copy, make it a thin line, and a thick line where you use the border.
  
• Do the same for every row.
  
• Write a number in each thick cell.

now your table:

• every border (thin or thick is a cell)
  
• thin borders need to be jumped by a rowspan or colspan.
  
• Copy the numbers in the paper cells into your html <td>s and check if they match (size doesn't matter till the very end), just make sure they are in the right place.
  
• Once you have this enter the form's fields into it, the table will resize on it's own and still look horrible.
  
• Finally use CSS to do the layout of the table itself (colors, border collapse, padding, margins etc.)

HTH

[Mr Bo Jangles]

thank you. I have made some progress....

[Dave75]

I'd make sure to use label tags to their fullest, esp. so on complex forms. Accessibility requires them and it'll make your life easier down the road.

I'd add to that and say; use the legend tag to split up the form into sections. The other thing you may want for accessibility is accesskeys.

some resources tell me some elements were introduced for MS IE and aren't part of the official standard

Check out the W3Schools HTML Tag List [w3schools.com]