WordPress
Training & Support at Georgia Southern

Working with Tables

Use the WordPress Visual Editor to easily insert and edit tables in your pages – just look for the toolbar-table-button table button in your site’s (visual) toolbar.

Helpful Tips

  • If you don’t see the table button in your toolbar, click the wp-toolbar-kitchen-sink-button“Kitchen Sink” button in “Visual” mode.
  • If necessary, you may need to specify a width of either 100% (or less) or auto to keep your table from exceeding the page’s content area – you can set the width by clicking the table button and selecting “Table Properties.”
  • Stick to the basics – any styles you add (background colors, etc.) will likely be overwritten by our global style rules for tables.

Sortable Tables

The method described below is for Advanced Users Only (HTML knowledge required).

To enable table sorting by the header row, add the class=”sortable” and a unique id (e.g., “mysortabletable”) to the table you want to sort.  Here’s an example:

Header A Header B
Item 1 Item 2
Item 3 Item 4

And here’s the code:

<table class=”sortable” id=”mysortabletable” style=”width:100%;”>
<tbody>
<tr>
<th>Header A</th>
<th>Header B</th>
</tr>
<tr>
<td>Item 1</td>
<td>Item 2</td>
</tr>
<tr>
<td>Item 3</td>
<td>Item 4</td>
</tr>
</tbody>
</table>


Note: Please use these effects responsibly on your site – remember that content editors have varying experience with HTML and having special code on your sites will make it harder for them to update. Also note that switching between the Text and Visual modes in the Page Editor may strip out the sortable table class.

Last updated: 5/24/2016

WordPress Training & Support provided by IT Services & Marketing and Communications