TABLE PRESS

1. Left side in black menu column – select plugins.
2. Scroll down to TablePress, click Activate.
3. TablePress will now show in the black menu just below Page Group.
4. Hover over TablePress and select Add new Table from the menu.
5. Name the Table and type in number of rows and number of columns, then hit Add table.
6. Start filling in the content, the top row is a header row.  Remember to hit Save Changes often.
7. If you need more rows or columns, scroll down on the page, under the area of Table Manipulation left side is rows, right side is columns Hit Preview to see how it looks.
8. To add the table now into a WordPress page: Near the top of the TablePress page about in the center there is a box called Shortcode: it’s light gray.  Copy the code in that box and paste it into the WordPress page where you want it.
9. Save, Preview it in WordPress. TA DA… you did it!!

[fruitful_sep]

A few examples:

Degrees/Programs: https://wou.edu/las/programs-and-degrees/

For courses: https://wou.edu/english/courses-schedules/

[fruitful_sep]

To make changes to table details:

UP at the top where the tabs are on TablePress page – select Plugin Options

This is where coding would go

How can I set column widths?

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

.tablepress-id-N .column-2 {

width: 100px;

}

The N needs to be changed to the ID of the table in question (or use .tablepress as the first part of the selector, if you want this to apply to all tables).

This is the general pattern I recommend. You can use this as often as needed, changing the column in question to the correct number each time.

Note: In most cases, it is not necessary to set the column widths directly! Instead, you will want to reduce the padding (the white space between the text in a cell and the edges of a cell), with the CSS code

.tablepress-id-N .column-2 {

padding: 4px;

}

which again needs to be adjusted as above.

How can I change the background color of a single row?

Changing the background color of a single row, e.g. to highlight it, can be done with some CSS like this:

.tablepress-id-N .row-X td {

background-color: #ff0000;

}

where N (the table’s ID), and X (the number of the row) need to be adjusted to your table! #ff0000 is the HEX color code of the desired color, in this case red.

This just needs to be entered into the “Custom CSS” textfield on the “Plugin Options” page.

How can I change the background color of the table head row?

This can be done with the following CSS code (that just needs to be added to the “Custom CSS” textarea in the “Plugin Options”):

To also change the hover color when sorting, and the background color of the column that is currently sorted, add

.tablepress thead .sorting_asc,

.tablepress thead .sorting_desc,

.tablepress thead .sorting:hover {

background-color: #00ff00;

}

D7E4BD

<p style=”text-align: center;”>

Align Table columns to center: o

.tablepress th,

.tablepress td {

text-align: center;

vertical-align: top;

[fruitful_sep]

Example table