Site sections

Replicating a Tree table

Russ Weakley
1-Oct-05

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

HTML example of a table tree

Name Location Color
House
Carrion Fly Worldwide gray
Office Fly California, Bay Area white
Common House Fly brown
Horse
Horn Fly Kansas red
Face Fly green
Stable Fly black

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(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(dots.gif) 18px 54% no-repeat;
padding-left: 26px;
}
 
tbody th.end
{
background: url(dots2.gif) 18px 54% no-repeat;
padding-left: 26px;
}