How do I center a table in HTML?

Question

I want my table to be deadsmack in the middle of the page but it keeps sticking to the side. Firstly I tried using floats but it wouldnt work. Now I'm trying to center my table with images using margins but I can't seem to get it to work. Here is my code:

<div class="table_images">
          <table>
              <tr>
                  <td><img src="image/copyright.png" alt="copyright" width="70" height="70" align="left"></td>
                  <td><img src="image/copyright.png" alt="copyright" width="70" height="70" align="left"></td>
              </tr>
              <tr>
                  <td><img src="image/copyright.png" alt="copyright" width="70" height="70" align="left"></td>
                  <td><img src="image/copyright.png" alt="copyright" width="70" height="70" align="left"></td>
              </tr>
              <tr>
                  <td><img src="image/copyright.png" alt="copyright" width="70" height="70" align="left"></td>
                  <td><img src="image/copyright.png" alt="copyright" width="70" height="70" align="left"></td>
              </tr>

          </table>

      </div>

and my CSS code

.table_images{
      margin-right: auto;
      margin-left: auto;
  }

any help would be appreciated.

Answer 1

Apply the margins to the table instead, like so:

.table_images table {
      margin-right: auto;
      margin-left: auto;
}

That said, using tables for this scenario is probably not the way to go, semantically speaking.