Html drawing horizontal and vertical lines connecting circle nodes - html

Question

I would like to draw the following in my web page:
where the three buttons are submit buttons.
I managed to do most but having a problem drawing the vertical lines.
here is my code:
th,
td {
padding: 10px;
}
table.center {
margin-left: auto;
margin-right: auto;
border-collapse: separate;
border-spacing: 50px 0;
}
span {
border-bottom: 2px solid gray;
border-right: 2px solid gray;
padding: 2px;
display: inline-block;
width: 100%;
}
.button {
width: 100%;
padding: 10px;
font: bold;
font-size: 20px;
border: none;
}
.button_blue {
background-color: LightSkyBlue;
}
.button_red {
background-color: OrangeRed;
}
.button_yellow {
background-color: yellow;
}
.boxed {
width: 600px;
border: 3px solid green;
padding: 5px;
margin: 5px;
margin-left: auto;
margin-right: auto;
}
.circle {
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
border: none;
font-size: 30px;
font: bold;
text-align: center;
display: inline-block;
;
}
<div style="text-align:center">
<u style="color:Red;">
<h1 style="color:DodgerBlue;font-size:3em;">
Hashi
</h1>
</u>
<form action="" method="post" novalidate>
{{ form.hidden_tag() }}
<p></p>
<div style="text-align:center">
<p></p>
<table class="center">
<tr>
<td></td>
<td style="border-bottom:4px solid black"></td>
</tr>
<tr>
<td style="text-align:center"><text style="color:DodgerBlue;font-size: 2em;"> Build bridges </text></td>
<td>
<span> {{ form.create(class_="button button_blue") }} </span>
</td>
</tr>
<tr>
<td style="text-decoration: line-through; text-decoration-thickness:5px;">
<div class="circle" style="background-color:yellow;">
3
</div>
<div class="circle" style="background-color:OrangeRed;">
2
</div>
<div class="circle" style="background-color:lightgreen;">
5
</div>
</td>
<td>
<span>{{ form.load(class_="button button_red") }}</span>
</td>
</tr>
<tr>
<td>
<div class="circle" style="background-color:blue;color:yellow;">
4
</div>
</td>
<td>
<span>{{ form.solve(class_="button button_yellow") }}</span>
</td>
</tr>
</table>
</div>
</form>
</div>

Answer 1

You shouldn't use tables to do design, but if that's what you want, then I will come up with a solution for it.
Don't use inline styles. Refactor them to classes, so the HTML is readable.
Set position: relative on all TDs.
Place each element in a TD of its own.
Make the circular buttons absolute to position them on top of bottom right corner.
Use colspan to place the elements relative to each other.
Use border to draw the lines.
/** UNCOMMENT TO REVEAL THE ENTIRE STRUCTURE OF THE TABLE **/
/*td {
border: 2px solid rgba(0, 0, 0, 0.3) !important;
}*/
body {
font-family: Helvetica;
}
h1 {
color: DodgerBlue;
font-size: 4em;
text-decoration: underline;
text-decoration-color: red;
text-decoration-thickness: 1px;
margin: 2rem auto 1rem;
}
table {
border-collapse: collapse;
margin-left: auto;
margin-right: 1rem;
}
td.subtitle {
color: DodgerBlue;
font-size: 3em;
padding: 1rem;
}
td {
position: relative;
text-align: center;
border: 4px none black;
}
td.right-line {
border-right-style: solid;
}
td.bottom-line {
border-bottom-style: solid;
}
td.double-stroke {
border-width: 4px;
border-style: solid;
}
button {
display: flex;
justify-content: center;
align-items: center;
}
button.big {
margin: 1rem;
padding: 1rem 2rem;
font-size: 1.3rem;
width: calc(100% - 2rem);
box-sizing: border-box;
}
button.circle {
position: absolute;
right: 0px;
bottom: 0px;
transform: translate(50%, 50%);
width: 40px;
height: 40px;
line-height: 40px;
border-radius: 50%;
border: none;
font-size: 1.1rem;
font-weight: bold;
}
.blue.big {
background-color: LightSkyBlue;
}
.red {
background-color: OrangeRed;
}
.yellow {
background-color: yellow;
}
.lightgreen.circle {
background-color: lightgreen;
}
.blue.circle {
background-color: blue;
color:yellow;
}
<form action="" method="post" novalidate>
<table>
<tr>
<td colspan="4"></td>
<td class="bottom-line"><h1>Hashi</h1></td>
</tr>
<tr>
<td> </td>
<td colspan="3" class="subtitle right-line">Build bridges</td>
<td><button class="blue big">Create a Puzzle</button></td>
</tr>
<tr>
<td><button class="yellow circle">3</button></td>
<td class="bottom-line"><button class="red circle">2</button></td>
<td class="bottom-line right-line" colspan="2"><button class="lightgreen circle">5</button></td>
<td><button class="red big">Upload External</button></td>
</tr>
<tr>
<td class="right-line double-stroke"><button class="blue circle">4</button></td>
<td colspan="3"> </td>
<td><button class="yellow big">Run Internal</button></td>
</tr>
</table>
</form>