Tables should only be used to display tabular data. If you have questions about when to use a table, contact the UComm Web Team.
Tables are a great way to display structured data with rows and columns. The table shortcode is made up of several nested shortcodes that mirror standard HTML table structure.
Table Shortcode
mu_table Parameters
- Bordered (bordered): Set to
yesto add borders to all table cells. Default is no borders. - Striped (striped): Set to
yesto alternate row background colors for easier reading. Default is no striping. - Full Width (full): Set to
yesto make the table fill 100% of the available width. Default is auto width. - Services (services): Set to
yesto center-align all columns after the first. Useful for comparison or services tables.
Table Structure Shortcodes
Tables are built using nested shortcodes that mirror standard HTML table structure:
[mu_table]— The outer table wrapper[mu_table_head]— The table header section[mu_table_body]— The table body section[mu_table_row]— A table row (used inside head and body)[mu_table_th]— A header cell (used inside a head row)[mu_table_td]— A data cell (used inside a body row)
Dos
- Display complex tabular data similar to what may be in a spreadsheet
- Keep column headers brief
- Use
striped="yes"for tables with many rows
Don'ts
- Use tables to lay out page content — use columns instead
- Use a table to list basic items — use an HTML list instead
- Add anything other than text or links in table cells
Table Shortcode Examples
Basic Table
| Col 1 | Col 2 |
|---|---|
| Data 1 | Data 2 |
| Data 3 | Data 4 |
Shortcode
[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]
Striped and Bordered Full-Width Table
| Col 1 | Col 2 | Col 3 |
|---|---|---|
| Data 1 | Data 2 | Data 3 |
| Data 4 | Data 5 | Data 6 |
Shortcode
[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_th]Col 3[/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_td]Data 3[/mu_table_td]
[/mu_table_row]
[mu_table_row]
[mu_table_td]Data 4[/mu_table_td]
[mu_table_td]Data 5[/mu_table_td]
[mu_table_td]Data 6[/mu_table_td]
[/mu_table_row]
[/mu_table_body]
[/mu_table]
Services / Comparison Table
| Feature | Basic | Premium |
|---|---|---|
| Online Access | Yes | Yes |
| Priority Support | No | Yes |
Shortcode
[mu_table full="yes" services="yes"]
[mu_table_head]
[mu_table_row]
[mu_table_th]Feature[/mu_table_th]
[mu_table_th]Basic[/mu_table_th]
[mu_table_th]Premium[/mu_table_th]
[/mu_table_row]
[/mu_table_head]
[mu_table_body]
[mu_table_row]
[mu_table_td]Online Access[/mu_table_td]
[mu_table_td]Yes[/mu_table_td]
[mu_table_td]Yes[/mu_table_td]
[/mu_table_row]
[mu_table_row]
[mu_table_td]Priority Support[/mu_table_td]
[mu_table_td]No[/mu_table_td]
[mu_table_td]Yes[/mu_table_td]
[/mu_table_row]
[/mu_table_body]
[/mu_table]