My HTML table is producing oddly spaced results

I am updating a site that has used nested tables to lay out out a bunch of logo images on a particular page. The page can be seen here: http://www.ecometrix.ca/ourclients.html

The first column of images in each group are separated from the rest 开发者_运维技巧and I cannot seem to locate where in my HTML or in my CSS the culprit that is causing the problem. I really need a fresh set of eyes.

It seems to render this way in Firefox 4.01, Safari 5.05, Chrome 12, and Opera 11.11. Which leads me to believe it is my code and not a particular browser. I have not tested in any version of Internet Explorer yet, as I am on a Mac.

Any assistance would be helpful.

The first column is being sized to fit "Energy Sector". Set a colspan="4" on the header cells to allow the headers to span the full table width.

The td for Energy Sector has no colspan set.

<td colspan="4"><p class="services">Energy Sector</p></td>

Your header (e.g. 'Energy Sector') is in the first column, but dosn't fit in. Therefore it expandes the first column.

Add a colspan="4" to expand the header over 4 columns