Table Code Snippets

  • The Content app has a table editor ONCE you get a table onto it. So let's say you want something like this:

    Header 1 Header 2
    Row Info 1 Row Info 2

    When the table is in the document, you click on it to add rows above or below, and add columns before and after... but how do you add it?

    My workaround is to use the source code editor (look on the editing bar above for <> and that's the source code editor). Then paste this code.

    <table style="width: 100%; height: 28px;">
    <tbody>
    <tr style="background-color: #444444; color: #ffffff;">
    <th style="text-align: left; height: 18px; vertical-align: text-top; width: 10.6937%;"><strong>Header 1</strong></th>
    <th style="text-align: left; height: 18px; vertical-align: text-top; width: 52.7938%;">Header 2</th>
    </tr>
    <tr style="height: 54px;">
    <td style="background-color: #dddddd; height: 10px; vertical-align: text-top; width: 10.6937%;"><strong>Row Info 1</strong></td>
    <td style="height: 10px; vertical-align: text-top; width: 52.7938%;">Row Info 2</td>
    </tr>
    </tbody>
    </table>

     

    Or perhaps you want something simple, like this:

    Thank You, Adopters! Adopters, Thank You!
    Your logo could be here. Wouldn't your logo look good here?

    <table style="width: 100%; height: 28px;">
    <tbody>
    <tr>
    <th style="text-align: left; height: 18px; vertical-align: text-top; width: 50%;">Thank You, Adopters!</th>
    <th style="text-align: left; height: 18px; vertical-align: text-top; width: 50%;">Adopters, Thank You!</th>
    </tr>
    <tr style="height: 54px;">
    <td style="height: 10px; vertical-align: text-top; width: 50%;">Your logo could be here.</td>
    <td style="height: 10px; vertical-align: text-top; width: 50%;">Wouldn't your logo look good here?</td>
    </tr>
    </tbody>
    </table>

    A table with borders

    MONDAY TUESDAY
    Morning FITNESS 7 AM
    GYM    		 Morning FITNESS 7 AM
    GYM

    <table style="width: 100%; border: 1px solid;">
    <tbody>
    <tr style="background-color: #444444; color: #ffffff; border: 1px solid;">
    <th style="text-align: left; vertical-align: text-top; width: 20%; border: 1px solid;">MONDAY</th>
    <th style="text-align: left; vertical-align: text-top; width: 20%; border: 1px solid;">TUESDAY</th>
    </tr>
    <tr style="border: 1px solid;">
    <td style="vertical-align: text-top; width: 20%; border: 1px solid;">Morning FITNESS 7 AM <br />GYM</td>
    <td style="vertical-align: text-top; width: 20%; border: 1px solid;">Morning FITNESS 7 AM <br />GYM</td>
    </tr>
    </tbody>
    </table>