Four Evenly-Spaced Table Boxes - html

Question

I'm trying to create four evenly-spaced <table> cells but for some reason, I am having a little difficulty doing this (even though I have set certain widths for them).
An example can be seen below, where the second cell appears larger than the others:
<tr>
<td style="width: 100%; padding: 0px 20px 0px 20px;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
<table style="width: 600px; border-collapse: collapse; border: 1px solid orange;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
<tbody cellspacing="0" cellpadding="0" border="0" colspan="12" align="center" style="width: 100%;" width="100%">
<tr cellspacing="0" cellpadding="0" border="0" colspan="12" align="center" style="width: 100%;" width="100%">
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Bullhorn Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Dolorla ti <br />amet silio</p>
</td>
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Lab Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Adipiscing <br />consecteture</p>
</td>
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="Atom Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Facili elit <br />torem</p>
</td>
<td cellspacing="0" cellpadding="0" width="148" style="width: 148px; color: #1F1F1F; text-align: center; border: 1px solid orange; font-family: Helvetica, Arial, Verdana; font-size: 8px; letter-spacing: 1.5px; text-transform: uppercase;" >
<img src="http://dummyimage.com/50x50/000/fff.jpg&text=Icon" alt="File Icon" width="50" height="50" /><br />
<p style="font-family: Helvetica, Arial, Verdana; font-size: 10px; color: #1F1F1F; text-align: center;">Ipsum sit <br />sepida colt</p>
</td>
</tr>
</tbody>
</table>
</td>
</tr>
JSFiddle
How do I create four evenly-spaced table cells?

Answer 1

You need to use the table-layout propertie.
http://www.w3.org/TR/CSS21/tables.html#fixed-table-layout
In your case:
<table style="width: 600px; border-collapse: collapse; border: 1px solid orange;table-layout:fixed;" cellspacing="0" cellpadding="20" border="0" colspan="12" align="center">
DEMO

Answer 2

As you will notice, when you inspect the parsed content in some devoloper tools, like in Chrome, your <td>'s width: 148px is overruled, and replaced with a computed width like 103.8546546px and so on. Simply add
table {
table-layout: fixed;
}
to your CSS or as inline style., and you will get what you want.
forked fiddle -> http://jsfiddle.net/CaVpC/