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>
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>
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>
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>
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>