Why am I getting odd html table results with this standard syntax?

Question

I'm using this code on my wordpress site but I'm getting odd results. I want to divide the table row into two columns, but I've ended up just gluing an extra bit on the side. what am I doing wrong?

<table>
 <tr>
  <td style="padding:0px;">
deleted the content to make this less to read
  </td>
 </tr>

 <tr>
  <td style="padding:0px;">
this is a test
  </td>
  <td style="padding:0px;">
as is this
  </td>
 </tr>

 <tr>
  <td style="padding:0px;">
deleted the content to make this less to read
  </td>
 </tr>

 <tr>
  <td style="padding:0px;">
deleted the content to make this less to read
  </td>
 </tr>

 <tr>
  <td style="padding:0px;">
deleted the content to make this less to read
  </td>
</tr>
</table>

and I get this weird little bit off the edge rather than the split I want:

Is it something to do with the aligned right image content in the table below possibly?

Answer 1

The number of columns in a table must be constant.

Add colspan="2" to your single cells.

Answer 2

A table has as many columns as the row with the most columns in it. If cells are missing from other rows, then they are left out from the rendering and cells are not stretched to fit.

Use colspan to make a cell take up multiple columns.

In your case, you don't appear to have tabular data at all, so don't use a table in the first place.

Answer 3

Your second row is two columns wide, but the remaining rows are still just one column in width. Either add a second column to each of the other rows, or extend the cells in the other columns so that they cover two columns, like this:

 <tr>
  <td style="padding:0px;" colspan=2>
deleted the content to make this less to read
  </td>
 </tr>

You'll need to do that for all the rows with just one column.