Setting fixed-width tables, varying text length on HTML page - html

Question

i am trying to make it such that the code will produce the below image, but it seems something is off with my table widths...any fixes? I'm still a n00b at HTML, thanks a million!! will upvote and accept the solution that fix my problem 100%
Code For table:
<table style="table-layout: fixed width="100%" cellspacing="0" cellpadding="2"><tr>
<td colspan="1" width="250"></td>
<td colspan="2" width="10"><span>Postanschrift</span></td>
<td colspan="3" width="5"><input type="radio" value="F" <span> Nein </span></td>
<td colspan="2" width="5"><input type="radio" value="F" <span> Ja</span></td>
<td colspan="1" width="15"></td>
<td colspan="2" width="10"><span>SMS / MMS</span></td>
<td colspan="3" width="5"><input type="radio" value="F" <span> Nein </span></td>
<td colspan="2" width="5"><input type="radio" value="F" <span> Ja</span></td>
</table>
<table style="table-layout: fixed width="100%" cellspacing="0" cellpadding="2"><tr>
<td colspan="1" width="250"></td>
<td colspan="2" width="10"><span>Telefon</span></td>
<td colspan="3" width="5"><input type="radio" value="F" <span> Nein </span></td>
<td colspan="2" width="5"><input type="radio" value="F" <span> Ja</span></td>
<td colspan="1" width="15"></td>
<td colspan="2" width="10"><span>E-Mail</span></td>
<td colspan="3" width="5"><input type="radio" value="F" <span> Nein </span></td>
<td colspan="2" width="5"><input type="radio" value="F" <span> Ja</span></td>
</table>
This is the image of the result of the expected code...pretty messed up :S
As you can see, the indentation before Postanschrift and Telefon works just fine ...however the later column widths are no longer fixed like in the image of the 'expected result'
EDIT 1: Using WebDevNewbie's code snippet, here's the result:

Answer 1

Style tag in <table> was not complete, and making your table fixed with your widths is what is crushing it all together. Removing the table-layout: fixed solved it for the most part, and I also had to widen the SMS / MMS <td> due to the spaces, it would push them to different lines.
Changing the widths on all of them would be a good bet.
<table style="width:100%; table-layout: fixed;" cellspacing="0" cellpadding="2">
<tr>
<td width="100%" style="background-color: #EEEEEE;"></td>
<td width="100px">
<span>Postanschrift</span>
</td>
<td width="60px" style="background-color: #EEEEEE;">
<input type="radio" value="F"/>
<span> Nein </span>
</td>
<td width="40px">
<input type="radio" value="F"/>
<span> Ja</span>
</td>
<td width="30px" style="background-color: #EEEEEE;"></td>
<td width="100px">
<span>SMS / MMS</span>
</td>
<td width="60px" style="background-color: #EEEEEE;">
<input type="radio" value="F"/>
<span> Nein </span>
</td>
<td width="45px">
<input type="radio" value="F"/>
<span> Ja</span>
</td>
</tr>
</table>
EDIT: Also, all the colspans weren't needed in this case. Those are if you want a <td> to span more than one column, which isn't needed here. There is also an empty cell that doesn't need to be there...
EDIT: I see why you are using that blank cell, a spacer. I have update the table, the first cell has a width of 100% now, this will allow for expanding, and I have increased the other widths..
EDIT: Closed the <input> tags, and formatted for readability..