This HTML & CSS code snippet helps you to create a hierarchical tree structure. It comes with different layouts including vertical and horizontal trees with various cascading styles. It helps display data in a clear and organized manner.
You can use this code to showcase hierarchical data structures like organization charts or family trees. It offers flexibility with different layout options to simplify the implementation of complex tree structures.
How to Create Hierarchical Tree Structure in HTML CSS
1. Begin by creating the HTML structure for your tree. Use <div> and <ul> elements to represent nodes and branches. Each <ul> element contains <li> elements for each node, and nested <ul> elements for child nodes.
Inside each <div> element representing a node, add the content you want to display. This could be text, images, or any other HTML elements that represent your data.
Select the desired layout for your tree, such as vertical, horizontal, or cascading. Each layout offers different visual presentations and can be tailored to your specific requirements.
<div>
<h3>Vertical tree with root</h3>
<ul class="tree vertical">
<li>
<div>root</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div>
<h3>Vertical tree without root</h3>
<ul class="tree vertical">
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
</ul>
</div>
<div>
<h3>Vertical tree with cascade one middle branch</h3>
<ul class="tree vertical">
<li class="">
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li class="cascade">
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
<li class="">
<div>node</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
</li>
</ul>
</li>
<li class="">
<div>node</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
</ul>
</div>
<div>
<h3>Vertical tree with cascade all 2-level branches</h3>
<ul class="tree vertical cascade-2">
<li>
<div>root</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div>
<h3>Horizontal tree without root</h3>
<ul class="tree horizontal">
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
</ul>
</div>
<div>
<h3>Horozontal tree with root</h3>
<ul class="tree horizontal">
<li>
<div>root</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<div>
<h3>Cascade tree without root</h3>
<ul class="tree cascade">
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
</ul>
</div>
<div>
<h3>Cascade tree with root</h3>
<ul class="tree cascade">
<li>
<div>root</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
<ul>
<li>
<div>node</div>
</li>
</ul>
</li>
<li>
<div>node</div>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
2. Apply CSS styles to customize the appearance of your tree. You can adjust margins, padding, colors, and borders to match your design preferences. Use CSS flexbox property or absolute positioning for layout control.
body {
display: flex;
flex-wrap: wrap;
font-family: Arial;
justify-content: center;
}
h3 {
text-align: center;
padding: 0 10px;
}
.tree {
margin: 18px;
padding: 0;
}
.tree:not(:empty):before, .tree:not(:empty):after,
.tree ul:not(:empty):before, .tree ul:not(:empty):after,
.tree li:not(:empty):before, .tree li:not(:empty):after {
display: block;
position: absolute;
content: "";
}
.tree ul, .tree li {
position: relative;
margin: 0;
padding: 0;
}
.tree li {
list-style: none;
}
.tree li > div {
background-color: #eee;
color: #222;
padding: 5px;
display: inline-block;
}
.tree.cascade li {
margin-left: 24px;
}
.tree.cascade li div {
margin-top: 12px;
}
.tree.cascade li:before {
border-left: 1px solid #ddd;
height: 100%;
width: 0;
top: 0;
left: -12px;
}
.tree.cascade li:after {
border-top: 1px solid #ddd;
width: 12px;
left: -12px;
top: 24px;
}
.tree.cascade li:last-child:before {
height: 24px;
top: 0;
}
.tree.cascade > li:first-child:before {
top: 24px;
}
.tree.cascade > li:only-child {
margin-left: 0;
}
.tree.cascade > li:only-child:before, .tree.cascade > li:only-child:after {
content: none;
}
.tree.horizontal li {
display: flex;
align-items: center;
margin-left: 24px;
}
.tree.horizontal li div {
margin: 6px 0;
}
.tree.horizontal li:before {
border-left: 1px solid #ddd;
height: 100%;
width: 0;
top: 0;
left: -12px;
}
.tree.horizontal li:first-child:before {
height: 50%;
top: 50%;
}
.tree.horizontal li:last-child:before {
height: 50%;
bottom: 50%;
top: auto;
}
.tree.horizontal li:after, .tree.horizontal li ul:after {
border-top: 1px solid #ddd;
height: 0;
width: 12px;
top: 50%;
left: -12px;
}
.tree.horizontal li:only-child:before {
content: none;
}
.tree.horizontal li ul:after {
left: 0;
}
.tree.horizontal > li:only-child {
margin-left: 0;
}
.tree.horizontal > li:only-child:before, .tree.horizontal > li:only-child:after {
content: none;
}
.tree.vertical {
display: flex;
}
.tree.vertical ul {
display: flex;
justify-content: center;
}
.tree.vertical li {
display: flex;
flex-direction: column;
align-items: center;
}
.tree.vertical li div {
margin: 12px 6px;
}
.tree.vertical li:before {
border-left: 1px solid #ddd;
height: 12px;
width: 0;
top: 0;
}
.tree.vertical li:after {
border-top: 1px solid #ddd;
height: 0;
width: 100%;
}
.tree.vertical li:first-child:after {
border-top: 1px solid #ddd;
height: 0;
width: 50%;
left: 50%;
}
.tree.vertical li:last-child:after {
border-top: 1px solid #ddd;
height: 0;
width: 50%;
right: 50%;
}
.tree.vertical li:only-child:after {
content: none;
}
.tree.vertical li ul:before {
border-left: 1px solid #ddd;
height: 12px;
width: 0;
top: -12px;
}
.tree.vertical > li:only-child:before, .tree.vertical > li:only-child:after {
content: none;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li, .tree.vertical.cascade-3 > li > ul > li > ul > li, .tree.vertical.cascade-2 > li > ul > li, .tree.vertical.cascade-1 > li, .tree.vertical .cascade {
flex-direction: column;
align-items: start;
padding: 0 12px;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:before, .tree.vertical.cascade-3 > li > ul > li > ul > li:before, .tree.vertical.cascade-2 > li > ul > li:before, .tree.vertical.cascade-1 > li:before, .tree.vertical .cascade:before {
left: 24px;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:after, .tree.vertical.cascade-3 > li > ul > li > ul > li:after, .tree.vertical.cascade-2 > li > ul > li:after, .tree.vertical.cascade-1 > li:after, .tree.vertical .cascade:after {
left: 0;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:first-child:after, .tree.vertical.cascade-3 > li > ul > li > ul > li:first-child:after, .tree.vertical.cascade-2 > li > ul > li:first-child:after, .tree.vertical.cascade-1 > li:first-child:after, .tree.vertical .cascade:first-child:after {
left: 24px;
width: 100%;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li:last-child:after, .tree.vertical.cascade-3 > li > ul > li > ul > li:last-child:after, .tree.vertical.cascade-2 > li > ul > li:last-child:after, .tree.vertical.cascade-1 > li:last-child:after, .tree.vertical .cascade:last-child:after {
left: 0;
width: 24px;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul, .tree.vertical.cascade-3 > li > ul > li > ul > li ul, .tree.vertical.cascade-2 > li > ul > li ul, .tree.vertical.cascade-1 > li ul, .tree.vertical .cascade ul, .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li, .tree.vertical.cascade-3 > li > ul > li > ul > li li, .tree.vertical.cascade-2 > li > ul > li li, .tree.vertical.cascade-1 > li li, .tree.vertical .cascade li {
display: block;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:before, .tree.vertical.cascade-3 > li > ul > li > ul > li ul:before, .tree.vertical.cascade-2 > li > ul > li ul:before, .tree.vertical.cascade-1 > li ul:before, .tree.vertical .cascade ul:before, .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li ul:after, .tree.vertical.cascade-3 > li > ul > li > ul > li ul:after, .tree.vertical.cascade-2 > li > ul > li ul:after, .tree.vertical.cascade-1 > li ul:after, .tree.vertical .cascade ul:after,
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before,
.tree.vertical.cascade-3 > li > ul > li > ul > li li:before,
.tree.vertical.cascade-2 > li > ul > li li:before,
.tree.vertical.cascade-1 > li li:before,
.tree.vertical .cascade li:before, .tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after, .tree.vertical.cascade-3 > li > ul > li > ul > li li:after, .tree.vertical.cascade-2 > li > ul > li li:after, .tree.vertical.cascade-1 > li li:after, .tree.vertical .cascade li:after {
border: none;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li div, .tree.vertical.cascade-3 > li > ul > li > ul > li div, .tree.vertical.cascade-2 > li > ul > li div, .tree.vertical.cascade-1 > li div, .tree.vertical .cascade div {
margin: 0;
margin-top: 12px;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li, .tree.vertical.cascade-3 > li > ul > li > ul > li li, .tree.vertical.cascade-2 > li > ul > li li, .tree.vertical.cascade-1 > li li, .tree.vertical .cascade li {
margin-left: 24px;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:before, .tree.vertical.cascade-3 > li > ul > li > ul > li li:before, .tree.vertical.cascade-2 > li > ul > li li:before, .tree.vertical.cascade-1 > li li:before, .tree.vertical .cascade li:before {
border-left: 1px solid #ddd;
height: 100%;
width: 0;
top: 0;
left: -12px;
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:after, .tree.vertical.cascade-3 > li > ul > li > ul > li li:after, .tree.vertical.cascade-2 > li > ul > li li:after, .tree.vertical.cascade-1 > li li:after, .tree.vertical .cascade li:after {
border-top: 1px solid #ddd;
width: 12px;
height: 0;
left: -12px;
top: 24px;
content: "";
}
.tree.vertical.cascade-4 > li > ul > li > ul > li > ul > li li:last-child:before, .tree.vertical.cascade-3 > li > ul > li > ul > li li:last-child:before, .tree.vertical.cascade-2 > li > ul > li li:last-child:before, .tree.vertical.cascade-1 > li li:last-child:before, .tree.vertical .cascade li:last-child:before {
height: 24px;
top: 0;
}
That’s all! hopefully, you have successfully created a Hierarchical Tree Structure on your website. If you have any questions or suggestions, feel free to comment below.
