Skip to content

Instantly share code, notes, and snippets.

@cwebber314

cwebber314/tree_table

Last active December 29, 2015 11:59
Show Gist options
  • Save cwebber314/7667628 to your computer and use it in GitHub Desktop.
Save cwebber314/7667628 to your computer and use it in GitHub Desktop.
Download ZIP
quick and dirty static tree using a table in html. It's not a real tree, but I want a grid that hints at hierarchy.
Raw
tree_table
<!DOCTYPE html>
<html>
<script>
var folder="https://lh3.googleusercontent.com/-oV4dZvrGpyA/UpYSO1u-fjI/AAAAAAAAJRI/PO6Bq3aYtS0/s16-no/page.png"
var page="https://lh3.googleusercontent.com/-oV4dZvrGpyA/UpYSO1u-fjI/AAAAAAAAJRI/PO6Bq3aYtS0/s16-no/page.png"
</script>
<head>
<style>
table {
border-collapse:collapse;
border: 2px solid black;
}
th{
border: 2px solid black;
border-left-style: none;
border-right-style: none;
text-align:center;
}
td{
border: 1px solid black;
}
td {
border-top-style: none;
border-bottom-style: none;
}
tr.solution {
border: 1px solid black;
border-bottom-style: solid;
border-top-style: none;
}
td.money{
text-align: right;
font-family: "Courier New", Courier, monospace;
}
td.area
{ text-indent:0px;
}
td.package
{ text-indent:10px;
}
td.solution
{ text-indent:20px;
}
td.component
{ text-indent:30px;
}
</style>
</head>
<body>
<table>
<tr><th>Item Name</th><th>WBS Code</th>
<th>e$</th>
<th>p$</th>
<th>c$</th>
<th>prop$</th>
</tr>
<tr><td class=area><img src='folder.png'>Area 1</td><td></td></tr>
<tr><td class=package><img src='folder.png'>Packge 1</td><td>P1</td></tr>
<tr class=solution><td class=solution><img src='folder.png'>solution 1</td><td>S1</td></tr>
<tr><td class=component><img src='page.png'>component 1</td><td>C1</td>
<td class=money>1,000,000</td>
<td class=money>4,000,000</td>
<td class=money>3,000,000</td>
<td class=money>1,000,000</td>
</tr>
<tr><td class=component><img src='page.png'>component 2</td><td>C2</td>
<td class=money>500,000</td>
<td class=money>1,000,000</td>
<td class=money>2,000,000</td>
<td class=money>0</td>
</tr>
<tr><td class=component><img src='page.png'>component 3</td><td>C3</td>
<td class=money>1,500,000</td>
<td class=money>8,000,000</td>
<td class=money>8,000,000</td>
<td class=money>1,400,000</td>
</tr>
</table>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment