Marsha Docs

Note on Tables

Tables should only be used to display tabular data. If the University web team notices misuse of tables on your webpages we will reach out and work with you to correct the content. If you have questions about when to use, or not use, a table you can contact the UComm Web Team and we will be happy to assist you.

Tables are a great way to display certain kinds of information.

Table Shortcode Parameters

The parameters for the tables shortcode:

Bordered (bordered): If this parameter is set to "yes" then all the table cells will have borders. The default is table without any borders.
Striped (striped): If this parameter is set to "yes" then all the non-heading table rows will alternate between a white background and a light gray background. The default is a non-striped table.
Full-Width (full): If this parameter is set to "yes" then the table will automatically fill to 100% of the available space. The default is a table that only takes up the width it needs.

Table Shortcode Examples

Basic Table

Shortcode

HTML

Heading 1	Heading 2
Data 1	Data 2
Data 3	Data 4

[mu_table]
[mu_table_head]
[mu_table_row]
[mu_table_th]Col 1[/mu_table_th]
[mu_table_th]Col 2[/mu_table_th]
[/mu_table_row]
[/mu_table_head]
[mu_table_body]
[mu_table_row]
[mu_table_td]Data 1[/mu_table_td]
[mu_table_td]Data 2[/mu_table_td]
[/mu_table_row]
[mu_table_row]
[mu_table_td]Data 3[/mu_table_td]
[mu_table_td]Data 4[/mu_table_td]
[/mu_table_row]
[/mu_table_body]
[/mu_table]

<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div class="large-table">
    <table class="table">
        <thead>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </tbody>
    </table>
</div>

Copy Code to Clipboard

Bordered Table

Shortcode

HTML

Heading 1	Heading 2
Data 1	Data 2
Data 3	Data 4

[mu_table bordered="yes"]
[mu_table_head]
[mu_table_row]
[mu_table_th]Col 1[/mu_table_th]
[mu_table_th]Col 2[/mu_table_th]
[/mu_table_row]
[/mu_table_head]
[mu_table_body]
[mu_table_row]
[mu_table_td]Data 1[/mu_table_td]
[mu_table_td]Data 2[/mu_table_td]
[/mu_table_row]
[mu_table_row]
[mu_table_td]Data 3[/mu_table_td]
[mu_table_td]Data 4[/mu_table_td]
[/mu_table_row]
[/mu_table_body]
[/mu_table]

<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div class="large-table">
    <table class="table table-bordered">
        <thead>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </tbody>
    </table>
</div>

Copy Code to Clipboard

Striped Table

Shortcode

HTML

Heading 1	Heading 2
Data 1	Data 2
Data 3	Data 4

[mu_table striped="yes"]
[mu_table_head]
[mu_table_row]
[mu_table_th]Col 1[/mu_table_th]
[mu_table_th]Col 2[/mu_table_th]
[/mu_table_row]
[/mu_table_head]
[mu_table_body]
[mu_table_row]
[mu_table_td]Data 1[/mu_table_td]
[mu_table_td]Data 2[/mu_table_td]
[/mu_table_row]
[mu_table_row]
[mu_table_td]Data 3[/mu_table_td]
[mu_table_td]Data 4[/mu_table_td]
[/mu_table_row]
[/mu_table_body]
[/mu_table]

<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div class="large-table">
    <table class="table table-striped">
        <thead>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </tbody>
    </table>
</div>

Copy Code to Clipboard

Full-Width Table

Shortcode

HTML

Heading 1	Heading 2
Data 1	Data 2
Data 3	Data 4

[mu_table full="yes"]
[mu_table_head]
[mu_table_row]
[mu_table_th]Col 1[/mu_table_th]
[mu_table_th]Col 2[/mu_table_th]
[/mu_table_row]
[/mu_table_head]
[mu_table_body]
[mu_table_row]
[mu_table_td]Data 1[/mu_table_td]
[mu_table_td]Data 2[/mu_table_td]
[/mu_table_row]
[mu_table_row]
[mu_table_td]Data 3[/mu_table_td]
[mu_table_td]Data 4[/mu_table_td]
[/mu_table_row]
[/mu_table_body]
[/mu_table]

<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div class="large-table">
    <table class="table w-full">
        <thead>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </tbody>
    </table>
</div>

Copy Code to Clipboard

Combination Table

Shortcode

HTML

Heading 1	Heading 2
Data 1	Data 2
Data 3	Data 4

[mu_table striped="yes" bordered="yes" full="yes"]
[mu_table_head]
[mu_table_row]
[mu_table_th]Col 1[/mu_table_th]
[mu_table_th]Col 2[/mu_table_th]
[/mu_table_row]
[/mu_table_head]
[mu_table_body]
[mu_table_row]
[mu_table_td]Data 1[/mu_table_td]
[mu_table_td]Data 2[/mu_table_td]
[/mu_table_row]
[mu_table_row]
[mu_table_td]Data 3[/mu_table_td]
[mu_table_td]Data 4[/mu_table_td]
[/mu_table_row]
[/mu_table_body]
[/mu_table]

<!-- THIS CODE SHOULD ONLY BE USED OUTSIDE OF WORDPRESS -->
<div class="large-table">
    <table class="table w-full table-bordered table-striped">
        <thead>
            <tr>
                <th>Heading 1</th>
                <th>Heading 2</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Data 1</td>
                <td>Data 2</td>
            </tr>
            <tr>
                <td>Data 3</td>
                <td>Data 4</td>
            </tr>
        </tbody>
    </table>
</div>

Copy Code to Clipboard