CSS Horizontal space div table - html

Question

I'm working on a div table in CSS. What I'm trying to do is to set the same space between margins and table cells and between table cells.
This is what I want to achieve:
But this is what it currently looks like:
I'm using this code for the class:
.tfoto{width:600px;
display:table;
margin-left:200px;
border-top-style:dotted;
border-bottom-style:dotted;
border-left-style:dotted;
border-right-style:dotted;
text-align:center;
background-color:transparent;
border-spacing:1px;
collapse:separate;}
.tcaption {display:table-caption;
font:"Traditional Arabic";}
.trow {display:table-row;
width:200px;
cell-spacing:5px;
padding:5px;}
.tdcell {display:table-cell;
width:200px;
padding:5px;}

Answer 1

Set Class
.imgs{
width:100%;
height:200px;
}
Checkout This :
.tfoto{width:600px;
display:table;
margin-left:200px;
border-top-style:dotted;
border-bottom-style:dotted;
border-left-style:dotted;
border-right-style:dotted;
text-align:center;
background-color:transparent;
border-spacing:1px;
collapse:separate;}
.tcaption {display:table-caption;
font:"Traditional Arabic";}
.trow {display:table-row;
width:200px;
cell-spacing:5px;
padding:5px;}
.tdcell {display:table-cell;
width:200px;
padding:5px;}
.imgs {width:100%;
height:200px;}
<div class="tfoto">
<div class="tcaption">
<p><em>Sample text.</em></p>
</div>
<div class="trow">
<div class="tdcell">
<img class="imgs" src="foto1.jpg">
</div>
<div class="tdcell">
<img class="imgs" src="foto2.jpg">
</div>
</div>
<div class="trow">
<div class="tdcell">
<img class="imgs" src="foto3.jpg">
</div>
<div class="tdcell">
<img class="imgs" src="foto4.jpg">
</div>
</div>
</div>

Answer 2

UPDATE
It looks like you were very close, but you had 2 crucial syntax errors, see Snippet 2:
collapse:separate;
AND
cell-spacing:5px;
Should be:
border-collapse:separate;
AND
border-spacing:5px
Now it looks exactly as you wanted it.
Use border-spacing
SNIPPET 1
table {
table-layout: fixed;
border-spacing: 5px;
outline: 5px solid #fff;
width: 200px;
height: 200px;
margin: 20px auto;
}
td {
outline: 5px solid #fff;
background: #000;
}
<table>
<tbody>
<tr>
<td> </td>
<td> </td>
</tr>
<tr>
<td> </td>
<td> </td>
</tr>
</tbody>
</table>
SNIPPET 2
.tfoto {
width: 600px;
display: table;
margin-left: 200px;
border-top-style: dotted;
border-bottom-style: dotted;
border-left-style: dotted;
border-right-style: dotted;
text-align: center;
background-color: transparent;
border-spacing: 1px;
border-collapse: separate;
}
.tcaption {
display: table-caption;
font: "Traditional Arabic";
}
.trow {
display: table-row;
width: 200px;
border-spacing: 5px;
padding: 5px;
}
.tdcell {
display: table-cell;
width: 200px;
padding: 5px;
}
.imgs {
width: 100%;
height: 200px;
}
<div class="tfoto">
<div class="tcaption">
<p><em>Sample text.</em>
</p>
</div>
<div class="trow">
<div class="tdcell">
<img class="imgs" src="foto1.jpg">
</div>
<div class="tdcell">
<img class="imgs" src="foto2.jpg">
</div>
</div>
<div class="trow">
<div class="tdcell">
<img class="imgs" src="foto3.jpg">
</div>
<div class="tdcell">
<img class="imgs" src="foto4.jpg">
</div>
</div>
</div>