Skip to content

Creating Tables

We’re using a plugin called wpDataTables. There’s a 2-part process in inserting a table.

Accessible Accordion

  1. In the left nav, go to Tables > Add New
  2. Click “Create a simple table from scratch.”
    1. Enter the “Table name”.
    2. Enter the optional “Table description”.
    3. Choose the initial number of columns and rows.
    4. Click “Generate Table”
  3. In the Edit Data tab:
    1. If there are column headings, add them in the first row.
    2. If there are row titles, enter them in the first column.
    3. Enter the main cell data. You don’t need to adjust styling since that’s coded into the stylesheet.
    4. You can right click to add columns, rows, etc.
    5. You can adjust column width by dragging the edges.
  4. In the Display tab:
    1. Check If you want to show the table title on the page (optional).
    2. Check If you want to show the table description on the page (optional).
    3. Check if you want to use the first row as the table header (optional but recommended).
    4. Check “set odds and even classes in table” if you want alternating rows to be striped. The design comp features this, so I recommend checking.
    5. Leave cell padding untouched (since this is coded into the UW stylesheet)
  5. In the Responsive tab:
    1. Check “Enable responsive mode”. The plugin doesn’t support the exact mobile style from the design comp, but it does work on mobile.
    2. For a really long table, check “Show a vertical scrollbar”.
  6. Click “Save Changes” in the upper right.

  1. Edit the page in Elementor.
  2. Click or drag the wpDataTables widget where you want it to go.
  3. In the “Select wpDataTable” dropdown, select the table you created in Part 1.
  4. Note, the full table doesn’t appear in the inline Elementor preview — only its short code. You’ll need to preview in a separate tab.
  5. Click Update.