rowspan/colspan help

[TheBagbournes]

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?

 

[Ben C]

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.

 

[Jukka K. Korpela]

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

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>

 

[TheBagbournes]

Scripsit TheBagbournes:


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


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

 

[Jukka K. Korpela]

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.

 

[TheBagbournes]

Scripsit TheBagbournes:


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.


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.

 

[Jukka K. Korpela]

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.