Unwanted spacing

Here I am trying to learn the wonderful ways of html emailing using inline styles. Does anyone know why there are spaces between the 3 header buttons ( visit our page / register / ask a question )?
They were originally all together but I changes the colours and now there is this spacing:

http://umcwales.com/wp-content/uploads/mini_muslims/mm_update2.html

[font=verdana]You’ve set the table to have a width of 100%, and you’ve then specified the width of each individual cell. What happens there is that, where the total widths of the cells added together come to a different width than the overall table, the cells are enlarged/shrunk proportionally … and that’s what’s happened here. The table containing the three header buttons takes a width of 605px, but the three cell widths together add up to 580px … so there’s an extra 25px to be spread between them, which is giving those gaps. The easiest way to fix it would be to give the third cell a width of 245 (the 220 you want plus the spare 25) … or to give the table a width of 580px instead of 100%

Why is the table taking a width of 605px? Because you’ve set it to 100%, which means it fills the available width. And the available width is defined by the cells beneath it, which are a 10px-wide spacer column and then a 595px-wide image.[/font]

Nicely explained, and sorted, many thanks - Glad css has replaced the use of tables!!!