Colspan and alignment....

Discussion in 'HTML' started by jodleren, Feb 19, 2007.

  1. jodleren

    jodleren Guest

    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>
    jodleren, Feb 19, 2007
    #1
    1. Advertising

  2. jodleren

    Bergamot Guest

    jodleren wrote:
    >
    > 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.

    --
    Berg
    Bergamot, Feb 19, 2007
    #2
    1. Advertising

  3. jodleren

    jodleren Guest

    On Feb 19, 10:43 pm, Bergamot <> wrote:
    > jodleren wrote:
    >
    > > 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.


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

    BR
    Sonnich
    jodleren, Feb 19, 2007
    #3
  4. 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).

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 19, 2007
    #4
  5. jodleren

    Bergamot Guest

    jodleren wrote:
    > On Feb 19, 10:43 pm, Bergamot <> wrote:
    >> jodleren wrote:
    >>
    >> > 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.

    >
    > 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.

    --
    Berg
    Bergamot, Feb 20, 2007
    #5
  6. jodleren

    Chaddy2222 Guest

    "jodleren" <> wrote in message
    news:...
    > 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.
    --

    Regards Chad.
    http://freewebdesign.cjb.cc
    Chaddy2222, Feb 20, 2007
    #6
  7. jodleren

    Sonnich Guest

    On Feb 20, 1:03 am, "Jukka K. Korpela" <> wrote:
    > 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).
    >
    > --
    > Jukka K. Korpela ("Yucca")http://www.cs.tut.fi/~jkorpela/


    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
    Sonnich, Feb 20, 2007
    #7
  8. 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 20, 2007
    #8
  9. jodleren

    Sonnich Guest

    On Feb 20, 11:06 am, "Jukka K. Korpela" <> wrote:
    > ScripsitSonnich:
    >
    > > 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.


    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
    Sonnich, Feb 20, 2007
    #9
  10. 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 20, 2007
    #10
  11. jodleren

    jodleren Guest

    On Feb 20, 4:18 pm, "Jukka K. Korpela" <> wrote:
    > ScripsitSonnich:
    >
    > > I have one check box,

    >
    > 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
    jodleren, Feb 20, 2007
    #11
  12. Scripsit jodleren:

    >>> I have one check box,

    >>
    >> No, not on the page that you specified.

    >
    > 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.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
    Jukka K. Korpela, Feb 21, 2007
    #12
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. Replies:
    1
    Views:
    5,015
    Lucas Tam
    Oct 10, 2005
  2. Bruce W...1

    colspan and rowspan problems

    Bruce W...1, Oct 22, 2003, in forum: HTML
    Replies:
    2
    Views:
    3,284
    Jerry Perkins
    Oct 22, 2003
  3. Klaus Wertler

    Colspan and rowspan

    Klaus Wertler, Nov 25, 2003, in forum: HTML
    Replies:
    8
    Views:
    1,435
    Sid Ismail
    Nov 27, 2003
  4. cho.cabot
    Replies:
    3
    Views:
    1,169
    Jonathan N. Little
    Nov 13, 2006
  5. Peter
    Replies:
    8
    Views:
    744
    Peter
    Sep 2, 2009
Loading...

Share This Page