I wrote this code snippet to display a table:
<div class="topologyBalloon" id="bl_c2f03b99-6d62-43c4-9a35-4b4cbf22a7db">
<a href="#close" class="closeTopologyBalloon">×</a>
<div class="contentBody">
<table class="detailInfoTable">
<caption>private</caption>
<tbody>
<tr>
<th class="device">ID</th>
<td>c2f03b99-6d62-43c4-9a35-4b4cbf22a7db</td>
</tr>
<tr>
<th class="device">status</th>
<td>
<span class="active">ACTIVE</span>
</td>
</tr>
</tbody>
</table>
<table class="detailInfoTable">
<caption>subnets</caption>
<tbody>
<tr>
<th>
<span title="cc59732b-4ce8-4aae-bab5-fac80c135440">
<a href="/dashboard/project/networks/subnets/cc59732b-4ce8-4aae-bab5-fac80c135440/detail">cc59732b-4ce8-4aae-bab5-fac80c135440</a>
</span>
</th>
<td>10.10.10.0/24</td>
</tr>
<tr>
<th>
<span title="4394b976-f98c-4696-8348-5f6c78a8987e">
<a href="/dashboard/project/networks/subnets/4394b976-f98c-4696-8348-5f6c78a8987e/detail">4394b976-f98c-4696-8348-5f6c78a8987e</a>
</span>
</th>
<td>10.10.11.0/24</td>
</tr>
</tbody>
</table>
</div>
<div class="footer">
<div class="footerInner">
<div class="cell link">
<a href="/dashboard/project/networks/c2f03b99-6d62-43c4-9a35-4b4cbf22a7db/detail">» check detail information</a>
</div>
</div>
</div>
</div>
Here is the CSS that goes with it:
table, th, td{
border: 0px solid blue;
}
caption {
font-weight: bold;
}
th {
color: #D0D0D0;
}
.active {
display:block;
margin-right:5px;
border-radius:10px;
width:9px;
height:9px;
background-color:#ff6f0b
}
You can see how it looks here.
If you want to indent the tables and add a line to separate them like in the images below, you can follow these instructions: