Don’t Use TABLE – use GRID

An amazingly common mistake new sheet authors make is to organise their sheets using the HTML element TABLE. There are important design considerations why you should never, ever do this, but the most important is this: roll20 always rejects any sheets that use TABLE for layout.

There is no negotiation about this. It doesn’t matter how good the rest of your sheet is – if you have used TABLE, your sheet will be rejected and you’ll never be able to share it with the community.

But there’s an even more important concern: it creates more work for you than the main alternative.

Here’s what the code for 6 attributes might look like using TABLE:

<table>
    <tr>
        <td>Name</td>
        <td>Score</td>
        <td>Modifier</td>
        <td>Roll</td>
    </tr>
    <tr>
        <td>Strength</td>
        <td>
            <input type="text" name="attr_strength" value="10">
        </td>
        <td>
            <input type="text" name="attr_strength_mod" value="(floor(@{strength}/2-5))" disabled>
        </td>
        <td>
            <button type="roll" name="roll_strength" value="/roll 1d20+@{strength_mod}"></button>
        </td>
    </tr>
    <tr>
        <td>Dexterity</td>
        <td>
            <input type="text" name="attr_dexterity" value="10">
        </td>
        <td>
            <input type="text" name="attr_dexterity_mod" value="(floor(@{dexterity}/2-5))" disabled>
        </td>
        <td>
            <button type="roll" name="roll_dexterity" value="/roll 1d20+@{dexterity_mod}"></button>
        </td>
    </tr>
    <tr>
        <td>Constitution</td>
        <td>
            <input type="text" name="attr_constitution" value="10">
        </td>
        <td>
            <input type="text" name="attr_constitution_mod" value="(floor(@{constitution}/2-5))" disabled>
        </td>
        <td>
            <button type="roll" name="roll_constitution" value="/roll 1d20+@{constitution_mod}"></button>
        </td>
    </tr>
    <tr>
        <td>Intelligence</td>
        <td>
            <input type="text" name="attr_intelligence" value="10">
        </td>
        <td>
            <input type="text" name="attr_intelligence_mod" value="(floor(@{intelligence}/2-5))" disabled>
        </td>
        <td>
            <button type="roll" name="roll_intelligence" value="/roll 1d20+@{intelligence_mod}"></button>
        </td>
    </tr>
    <tr>
        <td>Wisdom</td>
        <td>
            <input type="text" name="attr_wisdom" value="10">
        </td>
        <td>
            <input type="text" name="attr_wisdom_mod" value="(floor(@{wisdom}/2-5))" disabled>
        </td>
        <td>
            <button type="roll" name="roll_wisdom" value="/roll 1d20+@{wisdom_mod}"></button>
        </td>
    </tr>
    <tr>
        <td>Charisma</td>
        <td>
            <input type="text" name="attr_charisma" value="10">
        </td>
        <td>
            <input type="text" name="attr_charisma_mod" value="(floor(@{charisma}/2-5))" disabled>
        </td>
        <td>
            <button type="roll" name="roll_charisma" value="/roll 1d20+@{charisma_mod}"></button>
        </td>
    </tr>
</table>Code language: HTML, XML (xml)

Look at how much code that is, to produce this:

On the next page, we’ll show how to do it with CSS Grid.