Tables

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 yes to add borders to all table cells. Default is no borders.
  • Striped (striped): Set to yes to alternate row background colors for easier reading. Default is no striping.
  • Full Width (full): Set to yes to make the table fill 100% of the available width. Default is auto width.
  • Services (services): Set to yes to 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]