how to adjust all spaces between pictures to be exactly the same - html

Question

All my pictures must meet the following criteria:
1). Whenever using computer or cell phone to view, must appear 4 items on same line, without RWD function.
2) No matter what the height and width measurements all outer frame must be identical, I spent days to adjust like this, but I found distance from picture to picture (https://drive.google.com/file/d/1fsUN5ms1U4hfSoXl-oNcvEiwBwfVNpoZ/view?usp=sharing) are different, please advise how to adjust all spaces between pictures to be exactly the same.
Another question is how to control ever line's spacing? If I key in xxx, every line's space height will be too wide, need to shrink the height, I still cannot solve through setting, can anyone lend a helping hand? Appreciate it very much.[problem][1]
website URL
<table class="table table-borderless" style="margin:0px 0px;" cellpadding="3">
<tr>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/001.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container"><img style="border:1px #000 solid;padding:5px;text-align:center;" src="content/images/demo/002.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/003.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div id="container" style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/004.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/005.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/006.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/007.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/008.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
<tr>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/009.jpg"></div>
<p class="text-center">xxx</p>
</td>
<td>
<div style="border:1px #000 solid;padding:5px;text-align:center;"><img src="content/images/demo/010.jpg"></div>
<p class="text-center">xxx</p>
</td>
</tr>
</table>

Answer 1

You should not be using table.
You should be using the grid layout.
Here is a great guide.
EDIT:
Does this work for you?
.grid-container {
display: grid;
/* Use % instead of px for it to be proportionnal to the frame width */
grid-template-columns: 20% 20% 20% 20%;
grid-gap: 15px;
padding: 0px;
}
.grid-item {
background-color: lightgreen;
}
.grid-item>img{
/* make it so the image take up the whole grid-item width */
width: 100%;
}
<div class="grid-container">
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="">
IMAGE
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
<div class="grid-item">
<img src="https://via.placeholder.com/250" />
<span class="author-span">AUTHOR_name</span>
</div>
</div>