html table for a newsletter - html

Question

I'm trying to reproduce this for a Newsletter, with the text and images centred.
This is what I have so far
I was trying to add the border-collapse: collapse; property and also to add border left and right but I'm stacked. If you have any suggestions how to create the vertical lines and cantered the text and images I would deeply appreciate any help.
<table class="outer-table-2">
<tr>
<td class="three-column">
<div class="section">
<table width="100%">
<tr>
<td class="inner-td">
<table class="content">
<tr>
<td class="text">
<p>01628531300</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="section">
<table width="100%">
<tr>
<td class="inner-td">
<table class="content">
<tr>
<td>
<div id="callout">
<ul class="social">
<li><img src="facebook.png"></li>
<li><img src="twitter.png"></li>
<li><img src="linkedin.png"></li>
</ul>
</div>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
<div class="section">
<table width="100%">
<tr>
<td class="inner-td">
<table class="content">
<tr>
<td class="text">
<p>www.cdvi.co.uk<p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
</tr>
</table>
<style>
.outer-table-2 {
width: 100%;
max-width: 670px;
margin: 12px auto;
border: 3px solid #00467f;
}
.three-column {
}
.three-column .section {
width: 100%;
max-width: 200px;
display: inline-block;
vertical-align: top;
background-color: #FFFFf;
}
.three-column .social {
width: 100%;
height: 10px;
margin: 0 0 5px 0;
}
.outer-table-2 p {
margin:10px 10px 10px 40px;
color: #00467f;
font-size: 12px;
font-weight: 1000 !important;
line-height: 10px;
}
.middle-table {
margin: auto;
padding-top: 10px;
}
.middle-table img{
width: 120px;
height: 80px;
}
</style>

Answer 1

I think you are massively over-complicating this. You only need one table to recreate a layout similar to your image.
table {
width: 100%;
border-collapse: collapse;
}
tr {
height: 60px;
}
td {
text-align: center;
}
.b-t {
border-top: 5px solid darkblue;
}
.b-l {
border-left: 5px solid darkblue;
}
.b-r {
border-right: 5px solid darkblue;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
}
<table>
<tr>
<td class="b-t b-r">01628531300</td>
<td class="b-t">
<ul class="social">
<li><img src="facebook.png"></li>
<li><img src="twitter.png"></li>
<li><img src="linkedin.png"></li>
</ul>
</td>
<td class="b-t b-l">
www.cdvi.co.uk
</td>
</tr>
</table>