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

Discussion in 'Javascript' started by developer, May 5, 2005.

  1. developer

    developer Guest

    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.
    developer, May 5, 2005
    #1
    1. Advertising

  2. "developer" <> 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 -
    DHTML Death Colors: <URL:http://www.infimum.dk/HTML/rasterTriangleDOM.html>
    'Faith without judgement merely degrades the spirit divine.'
    Lasse Reichstein Nielsen, May 5, 2005
    #2
    1. Advertising

  3. 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.
    Michael Winter, May 5, 2005
    #3
  4. developer

    Mark Preston Guest

    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.
    Mark Preston, May 9, 2005
    #4
  5. 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.
    Michael Winter, May 9, 2005
    #5
  6. developer

    developer Guest

    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.
    developer, May 10, 2005
    #6
  7. developer

    Mark Preston Guest

    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, May 10, 2005
    #7
  8. developer

    Mark Preston Guest

    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.
    Mark Preston, May 10, 2005
    #8
  9. 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.
    Richard Cornford, May 10, 2005
    #9
    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. Lloyd Dupont
    Replies:
    2
    Views:
    777
    Lloyd Dupont
    Jan 8, 2006
  2. shruds
    Replies:
    1
    Views:
    783
    John C. Bollinger
    Jan 27, 2006
  3. sherpaa
    Replies:
    2
    Views:
    4,112
    brucie
    Jun 1, 2004
  4. Dan Bishop

    DataGrid (body only) contained in <span>...</span> tags

    Dan Bishop, Jun 7, 2004, in forum: ASP .Net Datagrid Control
    Replies:
    2
    Views:
    277
    Kilic Beg
    Jun 7, 2004
  5. Wang, Jay
    Replies:
    5
    Views:
    471
    Wang, Jay
    May 25, 2004
Loading...

Share This Page