HTML & CSS: Can't center my tables - html

Question

I'm struggling to get my 3 tables to be centered in the page.
Here's a picture of what it looks like currently:
Basically (from look at the image), I want the second/middle table ("Work" table) to be the only table in center, and the other 2 tables ("About" and "Collaborate" tables; left and right from the middle, respectively) to have spread out a bit (using margin, I would assume).
Here's my HTML:
.fixedWidth2 {
margin: 0 auto;
width: 1000px;
height: 350px;
background-color: green;
border: 2px solid yellow;
}
.tableProp1 {
width: 200px;
float: left;
margin-left: ;
}
.tableProp1 tr td {
height: 200px;
color: red;
}
.tableProp2 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp2 tr td {
height: 200px;
color: pink;
}
.tableProp3 {
margin-left: 40px;
width: 200px;
float: left;
}
.tableProp3 tr td {
height: 200px;
color: blue;
}
<div id="mainContent">
<div class="fixedWidth2">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
<!-- Fixed Width 2 DIV for Main Content DIV -->
</div>
<!-- mainContent DIV -->

Answer 1

Since you are using fixed widths for your tables and you're floating them, I would wrap them in a container, set the width on that to match all three tables+margin and set margin: auto on the container
.table-wrapper{
width: 680px;
margin: auto;
}
JSFIDDLE
Alternatively you can just use display: inline-block instead of float:left and add text-align: center to .fixedWidth2
ALT FIDDLE

Answer 2

I would not use <table> at all... table are good for tabular content, not for templating....
I would use DIV or even HTML5's <article> and <section>.
Think also about SEO, <h2> is a better mirror to your website semantic toward search engines than table's TH ...
To center three elements you can simply set them display: inline-block; with some vertical-align, than just setting the <div class="centered"> to text-align: center; will center-align your inner elements. You can also use float:left; but I've not covered that example.
http://jsbin.com/roruqo/1/
<div id="container">
<div id="slider"></div>
<div id="mainContent">
<div class="centered">
<div class="fixedWidth2">
<h2>About</h2>
<p>Learn more about me and my accomplishm...</p>
</div>
<div class="fixedWidth2">
<h2>Work</h2>
<p>I tend to get involved with a lot of d...</p>
</div>
<div class="fixedWidth2">
<h2>Collaborate</h2>
<p>Have a brand new or idea of a project?...</p>
</div>
</div>
</div><!-- mainContent DIV -->
</div>
h2, p{
padding:15px;
margin:0;
}
#container{
width:960px;
margin:0 auto;
background:#eee;
}
#slider{
background:blue;
height:400px;
}
.centered{
text-align:center;
}
.centered > div{
text-align:left;
}
.fixedWidth2{
min-height:170px;
background:#ddd;
display:inline-block;
vertical-align:top;
width: 250px;
margin: 15px;
}
.fixedWidth2 h2{
text-align:center;
background:#aaa;
}

Answer 3

<div id="mainContent">
<div class="fixedWidth2">
<div class="row">
<table class="tableProp1" border="1">
<tr>
<th>About</th>
</tr>
<tr>
<td>Learn more about me and my accomplishments.</td>
</table>
<table class="tableProp2" border="1">
<tr>
<th>Work</th>
</tr>
<tr>
<td>I tend to get involved with a lot of different projects. Ranging from a simple photoshop gig to having a small role in a television/pilot</td>
</tr>
</table>
<table class="tableProp3" border="1">
<tr>
<th>Collaborate</th>
</tr>
<tr>
<td>Have a brand new or idea of a project? Whatever help you may need, I may be of some assistance to</td>
</tr>
</table>
</div>
</div>
</div>
add this style in style sheet
.row {
margin: 0 auto;
width: 680px;
}
add "row " division and apply this style then check it's working properly.