html - Four Evenly-Spaced Table Boxes -

html - Four Evenly-Spaced Table Boxes -

i'm trying create 4 evenly-spaced <table> cells reason, having little difficulty doing (even though have set widths them).

an illustration can seen below, sec cell appears larger 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 down <br />sepida colt</p> </td> </tr> </tbody> </table> </td> </tr>

jsfiddle

how create 4 evenly-spaced table cells?

you need utilize table-layout propertie.

http://www.w3.org/tr/css21/tables.html#fixed-table-layout

in 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

html css html5 css3