rowspan/colspan help

Discussion in 'HTML' started by TheBagbournes, Jan 27, 2007.

  1. I'm not the best HTML author (I'm a server side Java man), but I need a bit of help.

    I'm trying to lay a table out like this:

    +------------+---------+
    | | |
    + +---------+
    | | |
    +------------+---------+

    And I can't work out the rowspan/colspan incantation!

    Can anyone help me out a bit please?
     
    TheBagbournes, Jan 27, 2007
    #1
    1. Advertising

  2. TheBagbournes

    Ben C Guest

    On 2007-01-27, TheBagbournes <> wrote:
    > I'm not the best HTML author (I'm a server side Java man), but I need a bit of help.
    >
    > I'm trying to lay a table out like this:
    >
    > +------------+---------+
    >| | |
    > + +---------+
    >| | |
    > +------------+---------+
    >
    > And I can't work out the rowspan/colspan incantation!
    >
    > Can anyone help me out a bit please?


    Two rows. First row contains two cells, first cell in first row has
    rowspan=2.

    Second row just contains one cell.
     
    Ben C, Jan 27, 2007
    #2
    1. Advertising

  3. Scripsit TheBagbournes:

    > I'm trying to lay a table out like this:
    >
    > +------------+---------+
    >> | |

    > + +---------+
    >> | |

    > +------------+---------+


    Presumably this is to be viewed in a monospace font. But are you sure you
    want such a _table_, as opposite to such _layout_? Hint: What would be a
    meaningful summary="..." attribute in the <table> tag, and what would the
    <caption> element contain?

    > And I can't work out the rowspan/colspan incantation!


    It's too early to decide on that. The first question is whether you should
    use a table at all. But if you decide to use a table,

    <table>
    <tr><td rowspan="2">The stuff on the left</td><td>The upper stuff on the
    right</td></tr>
    <tr><td>The lower stuff on the right</td></tr>
    </table>

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 27, 2007
    #3
  4. Jukka K. Korpela wrote:
    > Scripsit TheBagbournes:
    >
    >> I'm trying to lay a table out like this:
    >>
    >> +------------+---------+
    >>> | |

    >> + +---------+
    >>> | |

    >> +------------+---------+

    >
    > Presumably this is to be viewed in a monospace font. But are you sure
    > you want such a _table_, as opposite to such _layout_? Hint: What would
    > be a meaningful summary="..." attribute in the <table> tag, and what
    > would the <caption> element contain?
    >
    >> And I can't work out the rowspan/colspan incantation!

    >
    > It's too early to decide on that. The first question is whether you
    > should use a table at all. But if you decide to use a table,
    >
    > <table>
    > <tr><td rowspan="2">The stuff on the left</td><td>The upper stuff on the
    > right</td></tr>
    > <tr><td>The lower stuff on the right</td></tr>
    > </table>


    I figured it out :

    <table cellspacing="0" cellpadding="0">
    <tr>
    <td rowspan="2">
    Single Row
    </td>
    <td>
    Top half
    <td>
    </tr>
    <tr>
    <td colspan="2">
    Bottom half
    </td>
    <tr>
    </table>

    You have to give the td on the second row colspan="2", otherwise the table is not balanced (every row has to have the same number of columns spanned).
     
    TheBagbournes, Jan 27, 2007
    #4
  5. Scripsit TheBagbournes:

    > I figured it out :


    I don't think so. You didn't react the question whether you should really
    use a table, and this normally means you shouldn't.

    Moreover, you seem to have rejected my simple and correct markup in favor of
    more complex and less correct.

    > <table cellspacing="0" cellpadding="0">
    > <tr>
    > <td rowspan="2">
    > Single Row
    > </td>
    > <td>
    > Top half
    > <td>
    > </tr>
    > <tr>
    > <td colspan="2">
    > Bottom half
    > </td>
    > <tr>
    > </table>
    >
    > You have to give the td on the second row colspan="2",


    Wrong.

    > otherwise the
    > table is not balanced (every row has to have the same number of
    > columns spanned).


    Wrong. _Your_ table is not balanced, since the first row has two columns and
    the second row has three columns: one cell shared with the upper row and two
    columns spanned by the second cell.

    Did you look at the effect? Add border="1" to the <table> tag and you'll see
    that your table is not balanced: "Top half" is a bit narrower than the
    "Bottom half", because there is ghost column, so to say.

    An unbalanced table is not explicitly forbidden in HTML specifications, but
    the effects are unpredictable.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 27, 2007
    #5
  6. Jukka K. Korpela wrote:
    > Scripsit TheBagbournes:
    >
    >> I figured it out :

    >
    > I don't think so. You didn't react the question whether you should
    > really use a table, and this normally means you shouldn't.
    >
    > Moreover, you seem to have rejected my simple and correct markup in
    > favor of more complex and less correct.
    >
    >> <table cellspacing="0" cellpadding="0">
    >> <tr>
    >> <td rowspan="2">
    >> Single Row
    >> </td>
    >> <td>
    >> Top half
    >> <td>
    >> </tr>
    >> <tr>
    >> <td colspan="2">
    >> Bottom half
    >> </td>
    >> <tr>
    >> </table>
    >>
    >> You have to give the td on the second row colspan="2",

    >
    > Wrong.
    >
    >> otherwise the
    >> table is not balanced (every row has to have the same number of
    >> columns spanned).

    >
    > Wrong. _Your_ table is not balanced, since the first row has two columns
    > and the second row has three columns: one cell shared with the upper row
    > and two columns spanned by the second cell.
    >
    > Did you look at the effect? Add border="1" to the <table> tag and you'll
    > see that your table is not balanced: "Top half" is a bit narrower than
    > the "Bottom half", because there is ghost column, so to say.
    >
    > An unbalanced table is not explicitly forbidden in HTML specifications,
    > but the effects are unpredictable.
    >


    Well, I needed to use a table to constrain the two right hand elements to line up exactly to the right of the left hand element, and each be exactly half the height, exactly adjacent.

    I was creating a spinner control. It's the only way to do it. A self contained element that contains one input field, and two CSS-styled divs which act as buttons.

    Adding

    td { border:1px solid black} shows you are correct in that there is an extra bit on the right at the bottom. But that first example you gave didn't work at all.

    I'm really not concerned with fashionable dogma about tables being "evil" or over in javascript land eval being "evil". I don't use tables for page layout because it's over-complicated. But I do use use whatever works without torturing myself or my code to fit fads.
     
    TheBagbournes, Jan 28, 2007
    #6
  7. Scripsit TheBagbournes:

    [ a fullquote, always a useful signal of lack of comprehensive reading,
    followed by
    an explanation that lacks a URL and doesn't really explain much: ]

    > Well, I needed to use a table to constrain the two right hand
    > elements to line up exactly to the right of the left hand element,
    > and each be exactly half the height, exactly adjacent.


    "Needed"? Is that because you don't know how to use CSS?

    Anyway, you didn't mention anything about this setting or specifically about
    your desire (or "need") to achieve an _exact layout_.

    > I was creating a spinner control.


    That's empty words without a URL.

    > It's the only way to do it.


    That's what you think.

    > A self
    > contained element that contains one input field, and two CSS-styled
    > divs which act as buttons.


    Good grief.

    > Adding
    >
    > td { border:1px solid black} shows you are correct in that there is
    > an extra bit on the right at the bottom.


    Funny, I knew it even before I tested it.

    > But that first example you
    > gave didn't work at all.


    It works remarkably well for the question you originally asked. Presumably
    you did not manage to copy it properly, or you actual page, which you don't
    reveal, contains much more oddities than you've told so far. Any correct
    HTML can be broken by incorrect HTML elsewhere on the page, or incorrect
    CSS, or incorrect JavaScript.

    > I'm really not concerned with fashionable dogma about tables being
    > "evil" or over in javascript land eval being "evil". I don't use
    > tables for page layout because it's over-complicated. But I do use
    > use whatever works without torturing myself or my code to fit fads.


    It seems that so far you haven't even now, with some help from outside,
    managed to get the simple idea implemented properly, and you were quite
    happy with an incorrect approach you souped up, until the mistake was
    pointed to you. I don't think this qualifies you as competent in matters of
    principles in web design and in criticizing what you think that other think
    about it.

    --
    Jukka K. Korpela ("Yucca")
    http://www.cs.tut.fi/~jkorpela/
     
    Jukka K. Korpela, Jan 28, 2007
    #7
    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. Bruce W...1

    colspan and rowspan problems

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

    Colspan and rowspan

    Klaus Wertler, Nov 25, 2003, in forum: HTML
    Replies:
    8
    Views:
    1,466
    Sid Ismail
    Nov 27, 2003
  3. Joshua Beall

    rowspan/colspan in CSS? Does it exist?

    Joshua Beall, Apr 7, 2004, in forum: HTML
    Replies:
    11
    Views:
    69,157
    Barry Pearson
    Apr 9, 2004
  4. Logix
    Replies:
    23
    Views:
    11,719
    Isofarro
    Aug 27, 2004
  5. gnewsgroup
    Replies:
    2
    Views:
    489
    gnewsgroup
    Feb 3, 2008
Loading...

Share This Page