TablePress

The TablePress plugin allows users to create tables without manually coding HTML. Tables are created in the plugin’s UI and then displayed via shortcodes in any editable content area.

1. Creating a new table

From the WordPress admin screen (wp-admin), select TablePress > Add New Table:

Give the table a name (required), an optional description, specify the number of rows and columns, and click ‘Add Table’.

Enter table content in the editor screen. Note the checkbox options for table header and footer. The header and footer are styled differently than normal rows (see example table below).

Once saved, the table’s shortcode will show up in wp-admin > TablePress > All Tables > click ‘Show Shortcode’ on an individual entry. Copy and paste this shortcode into your post or page.

Here’s an example of a table with optional header and footer styled with USC colors:

2. Styling

Table colors are specified in wp-admin > TablePress > Plugin Options. You can change these colors but be aware that they will affect all tables.

The first CSS block defines colors for the table header.
The second CSS block defines the background color displayed when hovering over a table row. The third CSS block defines colors for the table footer.
See the ‘CSS basics’ at the end of this document for more information about styling.

3. Limitations

HTML are limited in how they scale for smaller screen sizes. When setting up a page or post with tables, be sure to narrow your browser screen down to mobile width to see how the tables display at smaller screen sizes. The greater the number of columns there are in the table, the higher the potential for them not looking great on mobile by default.

If you have tabular content that contains a lot of columns and doesn’t look good at smaller screen sizes, you can enable horizontal scrolling in the JavaScript library, described in the next section.

4. JavaScript Library (advanced)

TablePress offers a number of JavaScript featured that are disabled by default and can be enabled for individual tables. Refer to the table editor screen to enable any or all of these features. The most useful one is the horizontal scrolling option, useful for small screen sizes.

Note: with the JavaScript disabled (default), the table will display at 100% of the width of the containing element (section, column, etc). With the JavaScript library enabled, the table will set its width according to the amount of content displayed, meaning it may not fill the width of its containing element.

5. CSS Basics

The ‘Styling’ section describes how to change colors via CSS. CSS specifies how HTML elements are displayed and determine text and background colors among other things.

Colors can be specified in CSS as either hex values e.g. #990000; as RGB colors e.g. rgb(153,0,0); as RGBA colors (RGB with an alpha channel for setting transparency) e.g. rgba(153,0,0,100%); or as HSL (hue, saturation, lightness) e.g. hsl(0, 100%, 30%). Each of these examples displays USC Cardinal Red.

If changing colors in the plugin options, use RGB values unless you have a compelling reason not to. RGB is the most basic color specification and is the most recognizable to most people writing or editing CSS.

A more detailed breakdown of CSS is beyond the scope of this document. Those wishing to expand their CSS knowledge may wish to refer to Mozilla Developer Network's documentation.