easier way to layout a web form

[Steve Richter]

I am spending too much time thinking of nesting tables within tables to
get the form layout that I want.

a simple example:

Sub heading:
property text: entry field
property text: entry field
Sub heading:
property text: entry field
property text: entry field

In this case I am using nbsp; before the property text to get the
indenting effect I want, but that is too repetitive.

Sometimes I would like to split a form into two or more sub tables, one
beneath the other. But then I cant get the columns of the tables to
align with each other.

Another issue is switching a form from display mode to entry mode. My
solution there is one set of input boxes are visible in change mode,
another set of label controls are visible in display mode. But that is
too many controls, each with an ID, having to be marked visible or not
in the code behind.

I can think of solutions to these issues using server controls, but as
much as I like to do that sort of thing, that approach does not earn me
any money and has brought me to the edge of financial ruin!

Do I just have a mental block when it comes to web form layout. Does
ASP.NET have a simple property sheet control? Too often I end up with
tables within rows within cells within tables that results in a rats
nest of parallel html and code behind.

what can I say. What book have I not read? Does CSS address this sort
of thing? I notice CSS does not address html tables much. Is there a
good reason for that?

thanks,

-Steve

 

[Grant Merwitz]

No clear question there mate, but i can try help with some pointers

1) Indenting without  

Instead of using  , you can use a table cell and set the width

So your example would look something like this:

<table border=0 >
<tr>
<td colspan="4">
Sub Heading
</td>
</tr>
<tr>
<td width="12"></td>
<td>
property text:
</td>
<td width="12"></td>
<td>
entry field
</td>
</tr>
</table>

2) Getting two table's columns to align nicely

One was you can do this is by specifying widths - making sure that text in
that column does not push the width further than you specified.
This can be achieved by forcing text to wrap, or using a div tag with
overflow: auto - and ofcourse probably a million other ways too

3) Change mode and display mode

Not sure what you mean here

4) CSS and html tables

I think the major drive CSS has is into DIV tags.
Using these as columns, you can specify there width and positioning, and get
much the same effect as tables create. These can be created as styles in
your style sheet and attached to the div column.
We recently had our html code reviewed, and we were advised to use this
method. They infact said you should only use table to list data in a table,
and not to layout a website.
But i personally love using tables as thats the way i like laying out a
website.


Hope my comments help

Cheers

GM

 

[Steve Richter]

No clear question there mate, but i can try help with some pointers


4) CSS and html tables

I think the major drive CSS has is into DIV tags.
Using these as columns, you can specify there width and positioning, and get
much the same effect as tables create. These can be created as styles in
your style sheet and attached to the div column.

I'll check into this.

We recently had our html code reviewed, and we were advised to use this
method. They infact said you should only use table to list data in a table,
and not to layout a website.
But i personally love using tables as thats the way i like laying out a
website.


Hope my comments help

definitely. thanks!

-Steve