Colspan and alignment....

[jodleren]

Hi!

I have a form, which has a comment after the text field, eventually a
button or something, then the text... the point, I was expecting to
align left when I set the last field to colspan=3.
The code below does not align as I want it too.. I think it is clear
when you see it... any ideas how I make this look good...
I have been looking into it, but need some help here....

Code are as follows

BR
Sonnich

<TABLE CELLPADDING="1" CELLSPACING="2" BORDER="1">
<TR>
<TD VALIGN=CENTER>Name:&nbsp;</TD>
<TD VALIGN=CENTER><INPUT TYPE=TEXT NAME="name" VALUE="Me!"
SIZE="25" MAXLENGTH="256" /></TD>
<TD COLSPAN="3" VALIGN=CENTER>comment</TD>
</TR>
<TR>
<TD VALIGN=CENTER>Name2:&nbsp;</TD>
<TD VALIGN=CENTER><INPUT TYPE=TEXT NAME="name" VALUE="Me!"
SIZE="25" MAXLENGTH="256" /></TD>
<TD VALIGN=CENTER>comment</TD>
<TD VALIGN=CENTER>&nbsp;</TD>
<TD VALIGN=CENTER>&nbsp;</TD>
</TR>
<TR>
<TD VALIGN=CENTER>Text:&nbsp;</TD>
<TD COLSPAN="4" VALIGN=CENTER><TEXTAREA NAME="text" COLS="60"
ROWS="7">bla bla bla bla bla bla bla bla </TEXTAREA></TD>
</TR>
<TR>
<TD VALIGN=CENTER><INPUT TYPE=SUBMIT NAME="btn_go_save"
VALUE="Submit" ONCLICK="setvar(this.name);" /></TD>
<TD COLSPAN="3" VALIGN=CENTER><INPUT TYPE=SUBMIT
NAME="btn_delete" VALUE="Delete" ONCLICK="setvar(this.name);" /></TD>
<TD VALIGN=CENTER><P ALIGN=RIGHT><A HREF="../people.php?
name=inga&amp;lng=ee">Test here</A></TD>
</TR>
</TABLE>

 

[Bergamot]

The code below does not align as I want it too.. I think it is clear
when you see it...

If you want people to see it, you should post a URL, not code.

 

[jodleren]

If you want people to see it, you should post a URL, not code.

Here it is
http://my.tele2.ee/sonnich/test.htm
(though no functionality)

BR
Sonnich

 

[Jukka K. Korpela]

Scripsit jodleren:

I have a form, which has a comment after the text field, eventually a
button or something, then the text... the point, I was expecting to
align left when I set the last field to colspan=3.
The code below does not align as I want it too.. I think it is clear
when you see it...

It isn't. Even after you posted the URL, you haven't said _what_ was it that
you expected to align left and how (on which browser) it isn't aligned left.
You have no align="left" attribute, though that's the default, and all the
fields look very much left aligned to me on IE 7, except the very last cell
where you have ALIGN=RIGHT in your code (and a semantically wrong P
element - there's no paragraph there).

 

[Bergamot]

http://my.tele2.ee/sonnich/test.htm

I'm with Jukka. It is not clear what your issue is, but it seems likely
you are trying to fix the wrong problem.

You have decided on a solution (colspans) when you haven't properly
identified what you are trying to accomplish. The best way to achieve
your goal may be a different method altogether.

 

[Chaddy2222]

Hi!

I have a form, which has a comment after the text field, eventually a
button or something, then the text... the point, I was expecting to
align left when I set the last field to colspan=3.
The code below does not align as I want it too.. I think it is clear
when you see it... any ideas how I make this look good...
I have been looking into it, but need some help here....

Code are as follows

<snip>
Frankly, you should not use tables at all for this, it's a simple form,
place each field in a Div and give it some style with CSS where necessary.

 

[Sonnich]

Scripsit jodleren:


It isn't. Even after you posted the URL, you haven't said _what_ was it that
you expected to align left and how (on which browser) it isn't aligned left.
You have no align="left" attribute, though that's the default, and all the
fields look very much left aligned to me on IE 7, except the very last cell
where you have ALIGN=RIGHT in your code (and a semantically wrong P
element - there's no paragraph there).

I simply want the "comment" to be next to the input field.
I think it is funny, that in the lower row, the colspan works, and the
test here is really one, while the delete is colspan=3 and relly is so
(som 60% I'd guess).
The first row - I was expecting the text followed by an input field
and the last ~60% for the last <td colspan=3>, forcing the text next
to the input field.
On 2nd row, I would have expected it somewhat evenly 20% for each
<td>. Now it is more like: 10-50-25-5-15. The input is much wider,
that is my main issue.

/S

 

[Jukka K. Korpela]

Scripsit Sonnich:

I simply want the "comment" to be next to the input field.

So apparently the problem is not alignment: the "comment" is left aligned
within its cell, and you don't even need to do anything with it (it's the
default). The problem is in _cell widths_: the cell containing the input
field is wider than needed for the field,

I think it is funny, that in the lower row, the colspan works,

Of course it works on the first two rows as well. It's the division of the
table's width (dominated by the textarea width) to columns that causes the
phenomenon. There is no simple fix, since browsers allocate column widths
weirdly, but the overall complexity of the table affects this. So why do you
use colspan in the first place? If you want some text to appear (almost)
immediately after an input field, why don't you put them into the same cell?
I guess I can guess some of the reasons, but the sketchy page really
suggests that the table is excessively complicated.

The first row - I was expecting the text followed by an input field
and the last ~60% for the last <td colspan=3>, forcing the text next
to the input field.

Nobody expects... the IE column allocation! ;-)

That could be a tough problem, since IE resists attempts to control its
allocation algorithm except by explicitly setting "absolute" widths for
everything, which is a manifestly Bad Idea.

 

[Sonnich]

ScripsitSonnich:


So apparently the problem is not alignment: the "comment" is left aligned
within its cell, and you don't even need to do anything with it (it's the
default). The problem is in _cell widths_: the cell containing the input
field is wider than needed for the field,


Of course it works on the first two rows as well. It's the division of the
table's width (dominated by the textarea width) to columns that causes the
phenomenon. There is no simple fix, since browsers allocate column widths
weirdly, but the overall complexity of the table affects this. So why do you
use colspan in the first place? If you want some text to appear (almost)
immediately after an input field, why don't you put them into the same cell?
I guess I can guess some of the reasons, but the sketchy page really
suggests that the table is excessively complicated.

I have one check box, I simply want the comments in a nice coloumn to
the right, and still have the textbox.
For that I need the table. Also inputs etc might have different
widths.
I wonder whether a table in a table might be the solution.

/S

 

[Jukka K. Korpela]

Scripsit Sonnich:

I have one check box,

No, not on the page that you specified.

I simply want the comments in a nice coloumn to
the right, and still have the textbox.

For clarity and accessibility, you should have only one input field and its
label on one line (with few exceptions), so the goal should be reconsidered.

For that I need the table.

Well, using a table is tricky in a case like this. Before digging deeper,
consider whether you need to be in a hole. I don't mean the table as such;
simple tables are simpler, and a form could be construed as containing
tabular data. But the more complexity you add, the more browsers will bite
you. Their table behavior has always been poor.

 

[jodleren]

ScripsitSonnich:


No, not on the page that you specified.

Now I do

http://my.tele2.ee/sonnich/test.htm

Here it is clear, that on one line the comments would not be aligned
if they all were right after the input. Therefore I'd like to use a
table

BR
Sonnich

 

[Jukka K. Korpela]

Scripsit jodleren:

Now I do

http://my.tele2.ee/sonnich/test.htm

But that's not what you _really_ have it, is it? It would be poor design to
put a checkbox after its label, since everyone and his brother puts them in
the other order. And you still have two empty cells, which make the table
layout more difficult.

Here it is clear, that on one line the comments would not be aligned
if they all were right after the input. Therefore I'd like to use a
table

Why _should_ a comment be placed far away from the field that it relates to,
just to align it vertically with other comments? It surely relates to the
field, not the other comments. (If not, then why is it there?)

Anyway, you could simply make the first two rows a single table, followed by
the textarea (preceded by its label) and the buttons, though the "Delete"
button looks suspiciously like the destruction button ("reset button").
There's no apparent reason for making the entire contents of the form a
single table. You can use e.g. some special background color for the entire
form to indicate that its parts belong together logically.