Table formatting - how to get consistent/equivalent sizes? - html

Question

I have a table, always three columns of relatively the same info.
I'm trying to get it to look like this:
So, each "cell" (in the x area) is currently two td's, one for the text and other for the image.
I'm trying to figure out how to evenly space them all across the page and put a small margin in between each one.
Currently, it looks like this
HTML:
<div>
<table>
<colgroup>
<col style="width:33%">
<col style="width:33%">
<col style="width:33%">
</colgroup>
<tbody>
<tr>
<td class="cellData">
<h2><u>Brennon Huels</u></h2>
<p id="email">Meghan35#hotmail.com</p>
<p id="phoneNumber">279-027-8862 x78041</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Xzavier Schinner</u></h2>
<p id="email">Ayla_Fritsch#hotmail.com</p>
<p id="phoneNumber">078-723-5610 x715</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Leone Mayert</u></h2>
<p id="email">Nicolette.Nicolas#yahoo.com</p>
<p id="phoneNumber">003-101-8397</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
</tr>
<tr>
<td class="cellData">
<h2><u>Moriah Howe</u></h2>
<p id="email">Carli_Friesen7#hotmail.com</p>
<p id="phoneNumber">1-837-151-2364 x2091</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Jayce Koch</u></h2>
<p id="email">Joaquin.Barrows#hotmail.com</p>
<p id="phoneNumber">1-227-294-3980 x9561</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
<td class="cellData">
<h2><u>Mekhi Haag</u></h2>
<p id="email">Neva3#hotmail.com</p>
<p id="phoneNumber">[phone] x6897</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
</tr>
<tr>
<td class="cellData">
<h2><u>Merl Kshlerin</u></h2>
<p id="email">Harold_Deckow#yahoo.com</p>
<p id="phoneNumber">627-951-5298 x726</p>
</td>
<td class="cellImage">
<img src=https://i.imgur.com/9ZC02Oss.jpg >
</td>
</tr>
</tbody>
</table>
</div>
CSS:
table{
border-collapse: collapse;
table-layout: fixed;
width: 100%;
}
tr{
display: block;
padding: 5px;
margin-bottom: 10px;
}
table td{
border:3px solid red;
width:33%;
padding-right: 10px;
}
tr td{
margin: 10px;
width: 33%;
}
td img{
/*display: block;*/
vertical-align: middle;
padding: 4px;
}
tr p{
margin: 0px;
padding-left: 10px;
}
I've tried playing with the classes to no avail, and tried applying this answer but also didn't work, so I'm stuck.
Any ideas or help would be greatly appreciated!
Edit: if a table is the wrong way to go, I'm open to alternatives...I'm still learning html so just did a table because since I wanted something that looks like it, but no other reason.