Replicating a Tree table
HTML code
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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>
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
![](https://images.cnblogs.com/OutliningIndicators/ExpandedBlockStart.gif)
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
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
哲学管理(学)人生, 文学艺术生活, 自动(计算机学)物理(学)工作, 生物(学)化学逆境, 历史(学)测绘(学)时间, 经济(学)数学金钱(理财), 心理(学)医学情绪, 诗词美容情感, 美学建筑(学)家园, 解构建构(分析)整合学习, 智商情商(IQ、EQ)运筹(学)生存.---Geovin Du(涂聚文)