Spacing issue with image placed in table - HTML and CSS

Issue

I'm building a table for my website, and I'm trying to place a logo inside of a data cell. The issue is that whenever I add the picture, the margins go really weird and I can't figure out why spacing is added. I tried to remove the padding and margins on the image, and the cell itself, but nothing fixes it.

Before image:

After image:

HTML:

<table class="table">
            <thead class="tablehead">
                <tr>
                    <th>Language</th>
                    <th>Year Initiated</th>
                    <th>Projects</th>
                </tr>
            </thead>
            <tbody class="tablebody">
                <tr>
                    <td><img src = "images/Java_Logo.png" class="tableimage"></td>
                    <td>2015</td>
                    <td>ENTER LINK</td>
                </tr>
                <tr>
                    <td>C#</td>
                    <td>2016</td>
                    <td>ENTER LINK</td>
                </tr>
                <tr>
                    <td>Python</td>
                    <td>2018</td>
                    <td>ENTER LINK</td>
                </tr>
                <tr>
                    <td>HTML and CSS</td>
                    <td>2018</td>
                    <td>ENTER LINK</td>
                </tr>
            </tbody>
        </table>

CSS:

    .table{

    margin: auto;

}

.tablehead{

    font-family: permanent marker;
    font-size: 24px;

}

.tablebody{

    font-family: body;
    font-size: 20px;

}

.tableimage{

    width: 15%;
    padding:0px;
    margin: 0px;

}

th, td{

    border-bottom: 1px rgb(146, 40, 40) solid;
    padding: 10px;
    margin: 0;

}

I've also already tried multiple different images, so this does not seem to be the issue. I'd like all three columns to take up 1/3 of the space each.

Solution

You only need to specify a width for the table cells. Try adding this to your CSS:

th, td {
    width: 33%;
}

Answered By - David