Replicating a Tree table

Date: 1 October 2005
Author: Russ Weakley

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

sample graphic version of table tree

Screenshot of HTML example of a table tree

Screenshot of CSS/XHTML version

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;
}

Comments so far

  1. Herman Sotomayor says:
    March 30, 2010 at 8:11 am

    i need the arrows and dots please.

  2. Russ says:
    March 30, 2010 at 8:33 am

    Hi Herman, the three images are now links, so you can download the associated images if you need.

  3. Eddy says:
    April 3, 2010 at 6:09 am

    Very useful stuff, thanks.

  4. Leo says:
    April 11, 2010 at 4:22 am

    HTML Example is still an image, not HTML

  5. Russ says:
    April 11, 2010 at 5:55 am

    @Leo, correct. It is a screenshot to show people how it should look. I’ve changed the heading to be more clear. “Screenshot of HTML example of a table tree”

  6. bob says:
    June 23, 2010 at 11:27 pm

    Whatever you do, don’t post a working example for people to explore. Make us code it just to see if we want to…err…code it.

  7. JAMA says:
    July 15, 2010 at 2:16 am

    I need one example with this table tree but when i click a give and paint all depending with ajax

  8. JAMA says:
    July 15, 2010 at 2:17 am

    I need one example with this table tree but when i click a TR give and paint all TD’s depending on it with ajax