Replicating a Tree table

HTML code

 1 <table summary="folder contents for fly types">
 2 <thead>
 3 <tr>
 4 <th class="name">Name</th>
 5 <th class="location">Location</th>
 6 <th class="color">Color</th>
 7 </tr>
 8 </thead>
 9 <tbody>
10 <tr>
11 <th colspan="3">House</th>
12 </tr>
13 <tr>
14 <th class="start">Carrion Fly</th>
15 <td>Worldwide</td>
16 <td>gray</td>
17 </tr>
18 <tr>
19 <th class="start">Office Fly</th>
20 <td>California, Bay Area</td>
21 <td>white</td>
22 </tr>
23 <tr>
24 <th class="end">Common House Fly</th>
25 <td></td>
26 <td>brown</td>
27 </tr>
28 <tr>
29 <th colspan="3">Horse</th>
30 </tr>
31 <tr>
32 <th class="start">Horn Fly</th>
33 <td>Kansas</td>
34 <td>red</td>
35 </tr>
36 <tr>
37 <th class="start">Face Fly</th>
38 <td></td>
39 <td>green</td>
40 </tr>
41 <tr class="end">
42 <th class="end">Stable Fly</th>
43 <td></td>
44 <td>black</td>
45 </tr>
46 </tbody>
47 </table>

CSS code

 1  body
 2 {
 3 font-family: arial, helvetica, sans-serif;
 4 }
 5 
 6 table
 7 {
 8 border-collapse: collapse;
 9 margin-bottom: 3em;
10 font-size: 70%;
11 line-height: 1.1;
12 }
13  
14 tr:hover, td.start:hover, td.end:hover
15 {
16 background: #FF9;
17 }
18 
19 th, td
20 {
21 padding: .3em .5em;
22 }
23 
24 th
25 {
26 font-weight: normal;
27 text-align: left;
28 background: url(http://www.maxdesign.com.au/presentation/tree-table/arrow.gif) no-repeat 2px 50%;
29 padding-left: 15px;
30 }
31  
32 th.name { width: 12em; }
33 th.location { width: 12em; }
34 th.color { width: 10em; }
35  
36 thead th
37 {
38 background: #c6ceda;
39 border-color: #fff #fff #888 #fff;
40 border-style: solid;
41 border-width: 1px 1px 2px 1px;
42 padding-left: .5em;
43 }
44  
45 tbody th.start
46 {
47 background: url(http://www.maxdesign.com.au/presentation/tree-table/dots.gif) 18px 54% no-repeat;
48 padding-left: 26px;
49 }
50  
51 tbody th.end
52 {
53 background: url(http://www.maxdesign.com.au/presentation/tree-table/dots2.gif) 18px 54% no-repeat;
54 padding-left: 26px;
55 }
56