title: Spacing issue with image placed in table - HTML and CSS
body: <p>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.</p>
  
  <p>Before image:</p>
  
  <p><a href="https://i.stack.imgur.com/txudQ.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/txudQ.png" alt="enter image description here"></a></p>
  
  <p>After image:</p>
  
  <p><a href="https://i.stack.imgur.com/Gm6J3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Gm6J3.png" alt="enter image description here"></a></p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;table class="table"&gt;
              &lt;thead class="tablehead"&gt;
                  &lt;tr&gt;
                      &lt;th&gt;Language&lt;/th&gt;
                      &lt;th&gt;Year Initiated&lt;/th&gt;
                      &lt;th&gt;Projects&lt;/th&gt;
                  &lt;/tr&gt;
              &lt;/thead&gt;
              &lt;tbody class="tablebody"&gt;
                  &lt;tr&gt;
                      &lt;td&gt;&lt;img src = "images/Java_Logo.png" class="tableimage"&gt;&lt;/td&gt;
                      &lt;td&gt;2015&lt;/td&gt;
                      &lt;td&gt;ENTER LINK&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;C#&lt;/td&gt;
                      &lt;td&gt;2016&lt;/td&gt;
                      &lt;td&gt;ENTER LINK&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;Python&lt;/td&gt;
                      &lt;td&gt;2018&lt;/td&gt;
                      &lt;td&gt;ENTER LINK&lt;/td&gt;
                  &lt;/tr&gt;
                  &lt;tr&gt;
                      &lt;td&gt;HTML and CSS&lt;/td&gt;
                      &lt;td&gt;2018&lt;/td&gt;
                      &lt;td&gt;ENTER LINK&lt;/td&gt;
                  &lt;/tr&gt;
              &lt;/tbody&gt;
          &lt;/table&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>    .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;
  
  }
  </code></pre>
  
  <p>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.</p>
  
  <p><a href="https://i.stack.imgur.com/WC4ik.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/WC4ik.jpg" alt="enter image description here"></a></p>
  
  <p><a href="https://i.stack.imgur.com/on4mp.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/on4mp.jpg" alt="enter image description here"></a></p>