HTML and CSS images not appearing in their right place

Question

I have a page in my site that has a table of employees. everything works fine except that the images don't appear in their right place. here is a screenshot that explains the problem. and my code is here:

              <table style="width:100%">
  <tr>
     <td><figure style="text-align:centre;">
  <img STYLE="position:relative;"src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>
       <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>      

  </tr>
  <tr>
      <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>
       <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>  

  </tr>
  <tr>
      <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>
      <td><figure>
  <img src="img/idimg.jpg" alt="idimage" width="110" height="110">
  <figcaption>Specialist's name<br/>ID<br/>Major <input name="Submit" type="submit" value="Delete" /></br></br></br></figcaption>
</figure></td>      

  </tr>
</table>

might the problem be because of my page's layout? or just changing any of the image's properties would work?

this is my css:

tr{
    font-family: "Helvetica Neue", Helvetica, sans-serif;
    font-size: 12px;
    outline: none;
    color:grey;

}




table {
  border-collapse: collapse;

}
table td, table th {
  border: 1px solid grey;
    border-top: 0;
}
table tr:first-child th {
  border-top: 0;
}
table tr:last-child td {
  border-bottom: 0;
}
table tr td:first-child,
table tr th:first-child {
  border-left: 0;
}
table tr td:last-child,
table tr th:last-child {
  border-right: 0;
}



.colwhite{border: 1px solid white;}

Answer 1

The quick fix is to text-align: left your figure. You had a few typos that I cleaned up for you in the snippet below, as well as a few other adjustments (padding-bottom instead of several line breaks, etc.).

Also, it might help for you to review CSS selectors (this is a good resource) rather than using style attributes - it makes it much easier to manage.

tr {
  font-family: "Helvetica Neue", Helvetica, sans-serif;
  font-size: 12px;
  outline: none;
  color: grey;
}
table {
  border-collapse: collapse;
}
td,
th {
  border: 1px solid grey;
  border-top: 0;
}
tr:first-child th {
  border-top: 0;
}
tr:last-child td {
  border-bottom: 0;
}
tr td:first-child,
tr th:first-child {
  border-left: 0;
}
tr td:last-child,
tr th:last-child {
  border-right: 0;
}
td {
  padding-bottom: 20px;
}
img.specialist {
  border: thin solid grey;
  height: 110px;
  width: 110px;
}
figure {
  text-align: left;
}
input {
  float: right;
  border-radius: 12px;
  border: 2px solid red;
  color: white;
  font-weight: bold;
  background-color: rgba(255, 0, 0, 0.6);
}

<table style="width:100%">
  <tr>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>

  </tr>
  <tr>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>

  </tr>
  <tr>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>
    <td>
      <figure>
        <img class="specialist" src="http://st.depositphotos.com/1742172/1357/v/110/depositphotos_13572136-excited-person-cartoon.jpg" alt="idimage">
        <figcaption>Specialist's name
          <br/>ID
          <br/>Major
          <input name="Submit" type="submit" value="Delete" />
        </figcaption>
      </figure>
    </td>
  </tr>
</table>