what's the deal with the span tag and tables tags?

[developer]

Does anyone know what is the way IE treats span tags(<span>) and table
tags(<tr>, <td>)? Should the <span> tag be encolsed in tds and trs if
it placed with other elements that are in a table? Can the span tag
itself contain table tags within it?

I have some scripting code and when I wrap the span in table elements
it does not find the html within the span. Here is an example....
<tr><td colspan="4" align="left"><span id="201294_38604_1">[some html
here including tds and trs]</span></td></tr>

var span = document.getElementById(spanId);
alert("the value inside span is " + span.innerHTML); // this is blank

And if I do not wrap the span in table tags like so....

<span id="201294_38604_1">[some html here including tds and trs]</span>

It finds the html in the span. But when I clear the contents of the
html and later try to put some other html in, I do not see the html on
the screen.

Any help would be appericated.

[Lasse Reichstein Nielsen]

"developer" <Je*******@aol.com> writes:

Does anyone know what is the way IE treats span tags(<span>) and table
tags(<tr>, <td>)?
Mostly according to HTML and DOM standards. Does your HTML validate?
Should the <span> tag be encolsed in tds and trs if it placed with
other elements that are in a table?
If I understand your question correctly, yes.
Can the span tag itself contain table tags within it?
No. It's an inline element, so it cannot contain a table element,
and it can't be placed between a table element and its rows or cells.
<tr><td colspan="4" align="left"><span id="201294_38604_1">[some html
here including tds and trs]</span></td></tr>
The included td's and tr's are not valid inside the span (nor inside
another td element).

Is there a table element around this?
var span = document.getElementById(spanId);
alert("the value inside span is " + span.innerHTML); // this is blank
Probably due to error correction by IE. It's impossible to tell what
happens, since you haven't shown the exact code.
And if I do not wrap the span in table tags like so....

<span id="201294_38604_1">[some html here including tds and trs]</span>
What is around this? Is there a table element?
It finds the html in the span. But when I clear the contents of the
html and later try to put some other html in, I do not see the html on
the screen.
Probably due to an error.
Any help would be appericated.

That would require seeing the actual code. Can you make a small
page that displays the problem, and where the HTML validates?

/L
--
Lasse Reichstein Nielsen - lr*@hotpop.com
DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
'Faith without judgement merely degrades the spirit divine.'

[Michael Winter]

On 05/05/2005 13:59, developer wrote:

Does anyone know what is the way IE treats span tags(<span>) and table
tags(<tr>, <td>)?
Do you mind being a little more specific? IE has some restrictions with
its table model that are described in Microsoft's documentation. Search
MSDN for "How to Build Tables Dynamically" for more information.
Should the <span> tag be encolsed in tds and trs if it placed with
other elements that are in a table?
SPAN elements are only valid in contexts which allow inline elements.
That includes table cells (TD) and headers (TH), but not table rows (TR)
or any other table-related element.
Can the span tag itself contain table tags within it?
No. As SPAN elements are inline, only other inline elements can be
nested within them. Tables are block-level.
I have some scripting code and when I wrap the span in table elements
it does not find the html within the span. Here is an example....
A complete, usable demonstration would be far better. Snippets are
rarely useful when trying to diagnose a problem. Post a URL, if
possible, to a minimal example that illustrates the issue. Otherwise,
include the code in a follow-up post.
[...] <span id="201294_38604_1"> [...]

An id attribute value must start with a letter, then any combination of
letters, digits, hyphens (-), underscores (_), colons (:), and dots (.).

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[Mark Preston]

developer wrote:

Does anyone know what is the way IE treats span tags(<span>) and table
tags(<tr>, <td>)? Should the <span> tag be encolsed in tds and trs if
it placed with other elements that are in a table? Can the span tag
itself contain table tags within it?

First the disclaimer: Microsoft has some "quirks" and I don't know them
by any means. Frankly, I doubt anyone does any more, even at Microsoft,
since they seem to have rather built up over the years. Having said
that, there are "standards" about how tags can and should be used.:-

1. The <span> tag is an *inline* tag.
That means it can only appear _within_ a line and things which are
_not_ within lines cannot appear inside <span> tags.

2. The <table>,<th>,<tr> and <td> tags are all *block* tags.
That means they cannot appear _within_ a line - and so cannot appear
inside a <span> tag, for example.

So, your table should look similar to:-
<table>
<th>Table Header</th>
<tr>
<td>First row data <span>Inline element</span> goes here</td>
</tr>
</table>

But, having said that, IE is peculiar and may allow differences. My
advice would be to do it "properly" and then see if it works with IE. If
it does, stick to the "proper" method. If not, complain to Microsoft.

[Michael Winter]

On 09/05/2005 12:37, Mark Preston wrote:

[snip]

So, your table should look similar to:-
<table>
<th>Table Header</th>

The TH element is a cell, so it must appear within a row.

[snip]

Mike

--
Michael Winter
Replace ".invalid" with ".uk" to reply by e-mail.

[developer]

Ok here is an example.....

function getSpan(){
var elem = document.getElementById("201294_38604_1");
alert("the value of elem is " + elem);
alert("the value inside elem is " + elem.innerHTML);
elem.innerHTML = "" ; // does not work
}

<span id="201287_38614_1"><tr><td colspan="4" align="left" >4 Test
conditional</td></tr><tr><td width="3%">&nbsp;</td><td align="left"
colspan="3"><textarea name="01287_DDL_DT" rows="3" cols="55" >test
key</textarea></td></tr></span>

The first alert does confirm elem is an object, so IE does not seem to
mind that the id starts with a number since it found it. But the second
alert says the (span) object's contents are blank. So the clear in the
third line does not work.

What would be the best way to clear the contents because that is what I
need to do. If Span is for Inline elements, what could I use instead?
The div tag? Tbody? Should I use the tr and td directly to build the
table?

Thanks for any suggestions.

[Mark Preston]

Michael Winter wrote:

On 09/05/2005 12:37, Mark Preston wrote:

[snip]

So, your table should look similar to:-
<table>
<th>Table Header</th>

The TH element is a cell, so it must appear within a row.

[snip]

My apologies, Mike - perhaps I was simplifying too much.

[Mark Preston]

developer wrote:

Ok here is an example.....

[snip Javascript]

<span id="201287_38614_1"><tr><td colspan="4" align="left" >4 Test
conditional</td></tr><tr><td width="3%">&nbsp;</td><td align="left"
colspan="3"><textarea name="01287_DDL_DT" rows="3" cols="55" >test
key</textarea></td></tr></span>

I would use this:-

<div id="201287_38614_1">
<tr>
<td {colspan="4"...}>4 Test conditional</td>
</tr>
<tr>
<td {width="3%"}>&nbsp;</td>
<td {align="left"...}>
<textarea name="01287_DDL_DT" {rows="3"...}>test key</textarea>
</td>
</tr>
</div>

Notice that I have removed some extra close-tag brackets and have put
the old-style tag coding into curly brackets {...} and abbreviated them.
These last I would certainly do as CSS rather than in the HTML.

The main change is to swap <span/> for <div>: both can be considered the
same sort of thing - a layer in the page. However, while <span> is an
*inline* layer, <div> is a *block* level layer. This is not strictly a
full or accurate description, but it will do to get you going.

[Richard Cornford]

developer wrote:

Ok here is an example.....

function getSpan(){
var elem = document.getElementById("201294_38604_1"); ^^^^^^^^^^^^^^
The string values of ID attributes are required to conform with HTML's
specification for ID tokens:-

<quote cite="HTML 4.01 - Basic HTML data types: 6.2 SGML basic types">
ID and NAME tokens must begin with a letter ([A-Za-z]) and may be
followed by any number of letters, digits ([0-9]), hyphens ("-"),
underscores ("_"), colons (":"), and periods (".").
</quote>
alert("the value of elem is " + elem);
alert("the value inside elem is " + elem.innerHTML);
elem.innerHTML = "" ; // does not work
}

<span id="201287_38614_1"><tr><td colspan="4" align="left" >4 Test
conditional</td></tr><tr><td width="3%">&nbsp;</td><td align="left"
colspan="3"><textarea name="01287_DDL_DT" rows="3" cols="55" >test
key</textarea></td></tr></span>
In HTML there are only three contexts in which a TR element may appear,
they are as direct children of TBODY, THEAD and TFOOT:-

<quote cite="HTML 4.01 transitional DTD">
<!ELEMENT THEAD - O (TR)+ -- table header -->
<!ELEMENT TFOOT - O (TR)+ -- table footer -->
<!ELEMENT TBODY O O (TR)+ -- table body -->
</quote>

(In XHTML they may also be direct children of TABLE.)

You have specified several TRs as direct children of a SPAN element,
this is an error in HTML.

The SPAN element is an %inline element, and like all %inline elements
may only contain other %inline elements:-

<quote cite="HTML 4.01 transitional DTD">
<!ENTITY % special
"A | IMG | APPLET | OBJECT | FONT | BASEFONT |
BR | SCRIPT | MAP | Q | SUB | SUP | SPAN |
BDO | IFRAME">
....
<!-- %inline; covers inline or "text-level" elements -->
<!ENTITY % inline "#PCDATA | %fontstyle; | %phrase; | %special; |
%formctrl;">
....
<!ELEMENT SPAN - - (%inline;)* -- generic language/style container -->
</quote>

None of TBODY, THEAD, TFOOT or TR are %inline elements, so placing TRs
and/or implied TBODYs inside a SPAN is also and error in HTML.
The first alert does confirm elem is an object, so IE does
not seem to mind that the id starts with a number since it
found it. But the second alert says the (span) object's
contents are blank. So the clear in the third line does not
work.
When you abandon HTML in favour of tag soup mark-up you become subject
to the vagaries of browser error-correction. While a formal
specification may be able to state what would be correct, and how
correct mark-up should be treated, allowing constant handling by all
conforming UAs, it cannot dictate the handling of incorrect mark-up
(except for blanket requirements that incorrect mark-up not be
presented, which is not a realistic stance on an Internet where
technical competence is an unusual novelty). Each browser must implement
its own error-correction strategy, and they cannot even follow each
other as their error-correction code will tend to be private/secret.

So presented with tag-soup a browser will error-correct it as best it
can, and because the visual outcome of error-corrected tag soup in other
browsers is obvious they do all tend to produce the same (or broadly
similar) visual results. Which encourages HTML authors to regard
formally valid HTML mark-up as an irrelevance, as it won't make any
difference to their work. Unfortunately it is under the hood, where the
scripting is done, that differences in the outcome of browser
error-correcting become evident. The browser is trying to create a DOM,
which is supposed to be a tree with well specified parent-child
relationships.

A browser encountering an element in mark-up in a context where it
cannot be placed in the DOM will have to do something with it, and they
tend to vary considerably in what they do. They might move the element
back in the DOM to the last position in which it would have been valid,
or, if possible (as with block level elements) move it towards the root
to the last position where it could validly contain its specified
contest (and now much else besides), it may even ignore the inconstancy
and leave the element where it is. (and in some cases browsers will
ignore the 'tree' concept and allow parts of the DOM to have multiple
parents). I.E. The results of tag soup for the javascript author are a
mess of inconsistently structured DOMs with unexpected parent-child
relationships, and a huge additional headache when trying to write
anything for more than one browser.

In your case it looks like the browser you are using has moved the SPAN
in the DOM to a position where it is structurally valid (in some sense)
and the TRs are no longer its children, so that cannot be found within
its innerHTML (indeed it now appears to have no children).
What would be the best way to clear the contents because
that is what I need to do.
Wrap the table section in a TBODY of its own and use DOM methods to
remove the TBODY from the containing TABLE.
If Span is for Inline elements, what could I use
instead?
TBODY (but not with innerHTML)
The div tag?
Still not valid as a direct child of a TABLE.
Tbody? Should I use the tr and td directly to
build the table?
Probably, the W3C DOM Node manipulation methods are widely supported on
modern dynamic visual browsers and reliable in the context of table
construction/manipulation.
Thanks for any suggestions.

If you are going to script a document always start from the position of
formally valid HTML mark-up. Browsers are fragile, they should not be
kicked.

Richard.

[Thomas 'PointedEars' Lahn]

I don't want to post off-topic, but public correction is required here.

Mark Preston wrote:

1. The <span> tag is an *inline* tag.
The `span' element is by default an inline-level element. It has a
start tag (/<span[^>]*>/), inline content which may be empty and an
end tag (`</span>').
That means it can only appear _within_ a line and things which are
_not_ within lines cannot appear inside <span> tags.
That means it can only appear within a block-level element or another
element that allows it to be its child element (e.g. the `body' element
in HTML 3.2/4.01/XHTML 1.0 Transitional, but not in Strict [X]HTML).
2. The <table>,<th>,<tr> and <td> tags are all *block* tags.
The `table' element is a by default (and HTML 3.2+) a block-level element,
that means by default it is intended to create a new paragraph when
rendered. The `tr' element is (by CSS) a table-row element. The `th' and
`td' elements are table-cell elements.
That means they cannot appear _within_ a line - and so cannot appear
inside a <span> tag, for example.
That means they cannot appear outside of their intended scope: table-row
elements (here: `tr') may not appear outside of table elements (here:
`table') and table-cell elements (here: `th' and `td') may not appear
outside of table-row elements.
So, your table should look similar to:-
<table>
<th>Table Header</th>
<tr>
<td>First row data <span>Inline element</span> goes here</td>
</tr>
</table>
As neither start tag of the mentioned elements is optional, your table
(element) should look similar to:

<table>
<tr>
<th>Table Header</th>
...
</tr>

<tr>
<td>First row data <span>Inline element</span> goes here</td>
...
</tr>
</table>

(The dots are included intentionally: Don't use tables where there is no
tabular data, e.g. it does not make sense to have a table with one column
and one row just for having the contents within a box. Other block-level
elements like `div', `p', `ul' and `ol' are defined for that purpose, and
CSS is defined to be used for formatting these elements.)
But, having said that, IE is peculiar and may allow differences.
IE is simply borken.
My advice would be to do it "properly" and then see if it works with IE.
If it does, stick to the "proper" method. If not, complain to Microsoft.

ACK
PointedEars