Test Page

Alright, so there are two ways to go about this. Either you can use nested tables, or you can use div and span elements to create the layout you want. The nested tables approach is simpler in general – it requires less manual layout work. The other approach is more flexible, but for basic tables stuff like we’ve been discussing, that’s not really needed.

This table can be created with either technique:

Character Lines
The Dude
Nice Marmot… The Dude abides. Thank you Donny.

Here’s what the code looks like for the nested tables approach:

<table style="width:502px;border-collapse:collapse;">
    <tr>
        <td style="width:75px;border-color:#000000;text-align:center;margin:0;padding:0;">Character</td>
        <td style="border-color:#000000;text-align:center;margin:0;padding:0;">Lines</td>
    </tr>
    <tr>
        <td style="width:75px;border-color:#000000;text-align:center;margin:0;padding:0;">The Dude</td>
        <td style="border-color:#000000;text-align:center;margin:0;padding:0;">
            <table style="margin:0;padding:0;border-style:none;">
                <tr>
                    <td style="width:150px;padding:0;border-style:none;border-right-style:solid;border-color:#000000;text-align:center;">Nice Marmot...</td>
                    <td style="width:150px;padding:0;border-style:none;border-right-style:solid;border-color:#000000;text-align:center;">The Dude abides.</td>
                    <td style="width:150px;padding:0;border-style:none;text-align:center;">Thank you Donny.</td>
                </tr>
            </table>
        </td>
    </tr>
</table>

And here’s what the divs and spans code looks like:

<div style="">
    <div>
        <span style="display:inline-block;text-align:center;width:75px;border-width:1px;border-style:solid;">Character</span><span style="display:inline-block;text-align:center;width:422px;border-width:1px;border-style:solid;border-left-style:none;">Lines</span>
    </div>
    <div>
        <span style="display:inline-block;text-align:center;width:75px;border-width:1px;border-style:solid;border-top-style:none;">The Dude</span><span style="display:inline-block;text-align:center;width:140px;border-width:1px;border-style:solid;border-top-style:none;border-left-style:none;">Nice marmot...</span><span style="display:inline-block;text-align:center;width:140px;border-width:1px;border-style:solid;border-top-style:none;border-left-style:none;">The Dude abides.</span><span style="display:inline-block;text-align:center;width:140px;border-width:1px;border-style:solid;border-top-style:none;border-left-style:none;">Thank you Donny.</span>
    </div>
</div>

Notice that there it takes a lot more style information to make it look the way you want with divs and spans. If you start working with it, you’ll also notice that you have to manually align the columns, which can be a pain. Since you’re making a table, it should come as no surprise that the HTML table element is simpler way to solve the problem.

Code Fixes

<table style=";border-collapse:collapse;">
    <tr>
        <td style="width:16%;border-color:#000000;text-align:center;margin:0;padding:0;">Location (Die Roll)</td>
        <td style="width:16%;border-color:#000000;text-align:center;margin:0;padding:0;">Base</td>
        <td style="width:8%;border-color:#000000;text-align:center;margin:0;padding:0;">DR</td>
        <td style="border-color:#000000;text-align:center;margin:0;padding:0;">Wound Level</td>
    </tr>
    <tr>
        <td style="width:16%x;border-color:#000000;text-align:center;margin:0;padding:0;">Head (1)</td>
        <td style="width:16%x;border-color:#000000;text-align:center;margin:0;padding:0;">Brain =X</td>
        <td style="width:8%x;border-color:#000000;text-align:center;margin:0;padding:0;">4</td>
        <td style="border-color:#000000;text-align:center;margin:0;padding:0;">

            <table style="margin:0;padding:0;border-style:none;">
                <tr>
                    <td style="width:10%;padding:0;border-style:none;border-right-style:solid;border-color:#000000;text-align:center;">BR=X</td>
                    <td style="width:10%;padding:0;border-style:none;border-right-style:solid;border-color:#000000;text-align:center;">BR=X</td>
                    <td style="width:40%;padding:0;border-style:none;text-align:center;">Unconscious</td>
                </tr>
            </table>

        </td>
    </tr>
    <tr>
        <td style="width:16%x;border-color:#000000;text-align:center;margin:0;padding:0;">Torso (2-4)</td>
        <td style="width:16%x;border-color:#000000;text-align:center;margin:0;padding:0;">Brawn =X</td>
        <td style="width:8%x;border-color:#000000;text-align:center;margin:0;padding:0;">4</td>
        <td style="border-color:#000000;text-align:center;margin:0;padding:0;">

            <table style="margin:0;padding:0;border-style:none;">
                <tr>
                    <td style="width:10%;padding:0;border-style:none;border-right-style:solid;border-color:#000000;text-align:center;">BW=X</td>
                    <td style="width:10%;padding:0;border-style:none;border-right-style:solid;border-color:#000000;text-align:center;">BW=X</td>
                    <td style="width:10%;padding:0;border-style:none;border-right-style:solid;border-color:#000000;text-align:center;">BW=X</td>
                    <td style="width:30%;padding:0;border-style:none;text-align:center;">Unconscious</td>
                </tr>
            </table>

        </td>
    </tr>
</table> 
Location (Die Roll) Base DR Wound Level
Head (1) Brain =X 4
BR=X BR=X Unconscious
Torso (2-4) Brawn =X 4
BW=X BW=X BW=X Unconscious

Test Page

Sanction of the Athar ChainsawXIV