Table header not aligning correctly

Question

So I have the following code...

<table width='100%' id='table'>
   <tbody>
      <tr>
         <th colspan="3" id="title">
            <p>aaaaaaaaaaaaaaaaaaaaaaaaaaa</p>
         </th>
      </tr>
      <tr>
         <td style="width:120px;">
             <img src="http://tippvet.com/wp-content/uploads/2013/05/cat-vet.jpg" width="120px" height="120px" />
         </td>
         <td id="info">
             <a href="/" id="name">aaaaaaa</a><br><a href="#">eeeeee</a><br><a href="#">aaaaa</a>
        </td>
         <td id="count">bbbbbb<br>
            cccccc
         </td>
      </tr>
      <tr>
         <td colspan="3">ddddddd</td>
      </tr>
   </tbody>
</table>

and I want #title centered over the three cells below. For some reason, it's not aligning correctly. I've gotten it to align by doing this: http://jsfiddle.net/zx82D/2/ but the text is different from how I want it. Here is my original code that isn't aligning correctly, but has the right styling for p: http://jsfiddle.net/zx82D/3/

Answer 1

kill the width from your p

JSFIDDLE

Answer 2

Remove width: 85%; from #title p