Preciso desenvolver um documento HTML parecido com a imagem abaixo:
Estou com dificuldade em fazer as ligações, olha que está meu projeto.
Preciso que fique mais ou menos desse jeito
Meu html está assim:
<!DOCTYPE HTML>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="estilo.css">
<title></title>
</head>
<link href="C:\Users\JeanCarlos\OneDrive\Faculdade\TCC\TCC II\Diagrama de Rede\bootstrap.3.3.5\content\Content\bootstrap.css" rel="stylesheet" />
<link href="C:\Users\JeanCarlos\OneDrive\Faculdade\TCC\TCC II\Diagrama de Rede\bootstrap.3.3.5\content\Content\bootstrap-theme.css" rel="stylesheet" />
<style>
.div1{
position: absolute;
top: 200px;
left: 25px;
}
.div2{
position: absolute;
top: 50px;
left: 225px;
}
.div3{
position: absolute;
top: 400px;
left: 225px;
}
.div4{
position: absolute;
top: 200px;
left: 425px;
}
</style>
<body>
<div class="div1">
<table class="table table-striped table-responsive">
<tr>
<td>1</td>
<td>5</td>
<td>5</td>
</tr>
<tr>
<td></td>
<td>A</td>
<td></td>
</tr>
<tr>
<td>1</td>
<td>0</td>
<td>5</td>
</tr>
</table>
</div>
<div class="div2">
<table class="table table-striped table-responsive">
<tr>
<td>6</td>
<td>5</td>
<td>10</td>
</tr>
<tr>
<td></td>
<td>B</td>
<td></td>
</tr>
<tr>
<td>11</td>
<td>5</td>
<td>15</td>
</tr>
</table>
</div>
<div class="div3">
<table class="table table-striped table-responsive">
<tr>
<td>6</td>
<td>10</td>
<td>15</td>
</tr>
<tr>
<td></td>
<td>C</td>
<td></td>
</tr>
<tr>
<td>6</td>
<td>0</td>
<td>15</td>
</tr>
</table>
</div>
<div class="div4">
<table class="table table-striped table-responsive">
<tr>
<td>16</td>
<td>15</td>
<td>30</td>
</tr>
<tr>
<td></td>
<td>D</td>
<td></td>
</tr>
<tr>
<td>16</td>
<td>0</td>
<td>30</td>
</tr>
</table>
</div>
</body>
</html>