Replicating a Tree table

Aim

The aim is to replicate a graphic table tree using HTML. This was based on a request from a Web Standards Group member. Posted here in case it is of use to someone else.

Graphic example of a table tree

Screenshot of HTML example of a table tree

HTML code

<table summary="folder contents for fly types">
	<thead>
		<tr>
			<th class="name">Name</th>
			<th class="location">Location</th>
			<th class="color">Color</th>
		</tr>
	</thead>
	<tbody>
		<tr>
			<th colspan="3">House</th>
		</tr>
		<tr>
			<th class="start">Carrion Fly</th>
			<td>Worldwide</td>
			<td>gray</td>
		</tr>
		<tr>
			<th class="start">Office Fly</th>
			<td>California, Bay Area</td>
			<td>white</td>
		</tr>
		<tr>
			<th class="end">Common House Fly</th>
			<td></td>
			<td>brown</td>
		</tr>
		<tr>
			<th colspan="3">Horse</th>
		</tr>
		<tr>
			<th class="start">Horn Fly</th>
			<td>Kansas</td>
			<td>red</td>
		</tr>
		<tr>
			<th class="start">Face Fly</th>
			<td></td>
			<td>green</td>
		</tr>
		<tr class="end">
			<th class="end">Stable Fly</th>
			<td></td>
			<td>black</td>
		</tr>
	</tbody>
</table>

CSS code

body
{
	font-family: arial, helvetica, sans-serif;
}

table
{
	border-collapse: collapse;
	margin-bottom: 3em;
	font-size: 70%;
	line-height: 1.1;
}

tr:hover, td.start:hover, td.end:hover
{
	background: #FF9;
}

th, td
{
	padding: .3em .5em;
}

th
{
	font-weight: normal;
	text-align: left;
	background: url(tabletree-arrow.gif) no-repeat 2px 50%;
	padding-left: 15px;
}

th.name { width: 12em; }
th.location { width: 12em; }
th.color { width: 10em; }

thead th
{
	background: #c6ceda;
	border-color: #fff #fff #888 #fff;
	border-style: solid;
	border-width: 1px 1px 2px 1px;
	padding-left: .5em;
}

tbody th.start
{
	background: url(tabletree-dots.gif) 18px 54% no-repeat;
	padding-left: 26px;
}

tbody th.end
{
	background: url(tabletree-dots2.gif) 18px 54% no-repeat;
	padding-left: 26px;
}