Table formatting - how to get consistent/equivalent sizes?

问题

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">(682) 411-5607 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.

来源：https://stackoverflow.com/questions/48513249/table-formatting-how-to-get-consistent-equivalent-sizes