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>&#160;Nein&#160;</span></td>
    <td colspan="2" width="5"><input type="radio" value="F" <span>&#160;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>&#160;Nein&#160;</span></td>
    <td colspan="2" width="5"><input type="radio" value="F" <span>&#160;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>&#160;Nein&#160;</span></td>
    <td colspan="2" width="5"><input type="radio" value="F" <span>&#160;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>&#160;Nein&#160;</span></td>
    <td colspan="2" width="5"><input type="radio" value="F" <span>&#160;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>&#160;Nein&#160;</span>
        </td>
        <td width="40px">
            <input type="radio" value="F"/>
            <span>&#160;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>&#160;Nein&#160;</span>
        </td>
        <td width="45px">
            <input type="radio" value="F"/>
            <span>&#160;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..