dainghia’s blog

Replicating a Tree table

source: http://www.maxdesign.com.au/presentation/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

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