center table within div

Question

I have a table within a div using the span12 class from twitter bootstrap which is contained within a row class div all surrounded by a footer tag as follows:

<footer class="footer">
        <div class="row">
          <div class="span12">
            <table>
              <tr>
                <td> <!-- Contact Us -->
                  <table>
                    <tr>
                      <td><b>Contact Us</b></td>
                    </tr>
                     <tr>
                      <td>Tel: 01234 567897</td>
                    </tr>
                     <tr>
                      <td>E-mail: info@email.com</td>
                    </tr>
                   </table>
                </td>

                <td> <!-- Useful Links -->
                  <table>
                    <tr>
                      <td><b>Useful Links</b></td>
                    </tr>
                    <tr>
                      <td><a href="#">Contact Us</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">About Us</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Copyright Information</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Terms & Conditions</a></td>
                    </tr>
                   </table>
                </td>

                <td> <!-- Social -->
                  <table>
                    <tr>
                      <td><b>Connect With Us</b></td>
                    </tr>
                    <tr>
                      <td><a href="#">Facebook</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Twitter</a></td>
                    </tr>
                    <tr>
                      <td><a href="#">Google Plus</a></td>
                    </tr>
                   </table>
                </td>
              </tr>
            </table>
         </div>
        </div>
      </footer>

I have the following CSS applied:

/* Table Style */

    .footer table {
        table-layout:fixed;
        margin-right: auto;
        margin-left: auto;
        width: 100%
    }

    .footer td b {
        vertical-align:top;
        color: #ccc2a0;
    }

    .footer td {
        vertical-align:top;
        color: #a8a8a8;
    }

I have tried to get the space between the left side of the footer and the first table data to be the same as the space between the right side of the footer and the last table data however it always has a bigger gap on the right side.

Can anyone see a problem with the CSS I am using?

Thanks

EDIT: Here is the code for trying to achieve this using divs:

<footer class="footer">
    <div class="row" style="background-color:red;">
      <div class="span12" style="background-color:orange;">
        <div class="span4" id="leftFooter">

        </div>
        <div class="span4" id="middleFooter">

        </div>
        <div class="span4" id="rightFooter">

        </div>
      </div>
    </div>
  </footer>

The CSS simply colours the boxes so I can see what is going on and adds some height to the divs.

The grey box is the footer div, the red box is the row and the orange box is the span12. The rest are the 3 content divs of span4. Not sure why they don't stay on the same row.

Answer 1

CSS:

.span12 {
  text-align: center;
}

This solution works if we don't mind the text alignment.

Result [CodePen] : http://codepen.io/loxaxs/pen/kilLG

---

A different solution:

CSS:

.span12 {
  padding-left: 15%;
}

Result [CodePen] : http://codepen.io/loxaxs/pen/izIHq

Answer 2

I changed some of it and stripped all styling out (sorry), but your spacing should be fixed horizontally. You can apply whatever else you want styling wise. Also, I got rid of all the embedded tables because it was so cumbersome...I can adjust the vertical spacing if you want, but I just threw this together to give you an idea for horizontal spacing.

http://jsfiddle.net/YYZwY/1/

HTML:

<footer class="footer">
  <table>
    <td>
                <div id="ContactUS" class="information">Contact Us</div>
                <div id="Telephone" class="information">Tel: 01234 567897 </div>
                <div id="email" class="information">Email: info@email.com</div>
    </td>
    <td>
                 <div class="links">Useful Links</div>
                 <div class="links"><a href="#">Contact Us</a></div>
                 <div class="links"><a href="#">About Us</a></div>
                 <div class="links"><a href="#">Copyright Information</a></div>
                 <div class="links"><a href="#">Terms & Conditions</a></div>
    </td>
    <td>
                 <div class="connect"><b>Connect With Us</b></div>
                 <div class="connect"><a href="#">Facebook</a></div>
                 <div class="connect"><a href="#">Twitter</a></div>
                 <div class="connect"><a href="#">Google Plus</a></div>
    </td>
</footer>

CSS:

.links {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.connect {
    padding-left: 10px;
    padding-right: 10px;
    position: relative;
}

.information {
    padding-right: 10px;
}