[thelist] I've found a great use for <span>

[David.Cantrell at Gunter.AF.mil]

>    Within a given page, an id may occur only once. But you can use that
>same id on another page, even applied to a different type of element, but
>link the same style sheet to both pages. So, in page 1 I could have <td
>id="SaleItem1">, and in page 2 I could have <h1 id="SaleItem1">. In such a
>scenario, specifying the element name as part of the selector (e.g.,
>td#SaleItem1) could be critical.

While this may be the spec, I seem to recall IE 5.x (and probably 6)
allowing you to have multiple instances of the same ID in a single page. In
fact, the old MSDN site (couple years back maybe?) had a DHTML tabbed
interface on it's home page, and I believe this was achieved by using the
same ID for a series of TH tags that each represented a tab.

So as a very basic example you'd have something like this:

	<table id="tabnav">
		<tr>
			<th id="tab" onclick="switch(this)">Tab A</td>
			<th id="tab" onclick="switch(this)">Tab B</td>
			...
		</tr>
		<tr>
			<td id="content">   <!-- colspan set to number of
header cells -->
				...
			</td>
		</tr>
	</table>

And then the code for selection would look something like this:

	// my JS is really rusty now, but you get the idea
	function switch( t )
	{
		for( i = 0; i <= tabnav.tab.length(); i++ )
		{
			tabnav.tab[i].style.backgroundColor = defaultColor;
// set each tab to the default color
		}
		t.style.backgroundColor = highlightedColor;
// then set selected tab to highlighted color
		tabnav.content.innerHtml = "index" + (index of t) + ".html"
// set content area to "index0.html", "index1.html", etc
	}

Maybe I'm mistaken here, so don't quote me on it... :(

-dave