Putting a Table inside a Span Tag

Is there a way to do this and still validate?

[zanthalon]

I have used a <span> tag to enclose a rollover comment (a la meyerweb) on a website I have been working on. Within the comment is a small table. Whilst the result works fine in every browser I have tried, it will not validate, as I have placed a block level element, <table> inside of an inline element, <span>.

Does anybody know of a solution to this problem that will validate?

[tedster]

Can't you use a <div> instead of a <span>? That should do it.

[DrDoc]

Or, just use the table itself... No need to put it in a span.

[zanthalon]

I tried to replace <span> with <div>, but I got the same validation error.

I cannot simply put it in a table because the table is just one part of the comment. Here is the html snippet:

---------

<td>Use <a class="definition" href="#"><span>Any given word that can be matched to a list of valid words in a search. However, this can also include special characters (symbols) that can be used as &quot;wildcards&quot;. For example, consider the following mailbox:

<table class="full small" style="padding: 3px; margin: 3px; background: #F0F8FF; border: 1px solid #9EF;">
 <tr class="hdrow bold"><td>Subject</td></tr>
 <tr class="dkrow"><td>Surfing the waves</td></tr>
 <tr class="ltrow"><td>Computer stuff</td></tr>
 <tr class="dkrow"><td>Surface tension</td></tr>
</table>

If you entered a search query as <b>sur*</b>, it would return the 1st and the 3rd message. The asterisk ( * ) acts as a wildcard, meaning it can represent any letter or character.</span>Regular Expressions</a> for the Search and the FilterRule</td>

---------

I have also tried to replace the entire <span> tag with a table, nesting the small table within the larger one. This still returns the same error, as the <table> element is not allowed within an <a> tag.

Any other ideas?

Z--

[createErrorMsg]

What about nesting divs in your containing div, then styling them to the width and appearance you want with your table? I don't know if nested divs validate or not, but since your table has only one column but multiple rows, couldn't you get the same effect with something like this?

css:
.smallTable {
padding: 3px;
margin: 3px;
background: #F0F8FF;
border: 1px solid #9EF;
width: 50%;
}

html:
<div class="container">
<p>Your first paragraph of text.</p>
<div class="smallTable">Subject</div>
<div class="smallTable">Surfing the waves</div>
<div class="smallTable">Computer stuff</div>
<div class="smallTable"><Surface tension</div>
<p>Your last paragraph of text.</p>
</div>

[zanthalon]

This still does not solve the problem as the <div> is stil inside a <span> tag. This will not validate for the same reason the table does not validate.

[MrMcTerse]

Might this be a good place for a definition list, which would eliminate both the span and inner table?

[vkaryl]

AFAIK inline element tags (span, etc.) cannot be used to enclose block element tags (div, paragraph et al). So you may need to rethink your whole premise/design situation for that particular area of the site and its design.

IS a table absolutely necessary? Or might you reframe that single bit of code in some other way?