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:
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.
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.
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.
Published on June 20th, 2017
Last updated on November 22nd, 2022