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