TablePress Plugin

Plugin Resources

Best Practices

Default Table Settings

Table Options

For a data table, select the Table Header Row checkbox. This adds code to the first row for table headers.

No other checkboxes in this section are necessary.

More Resources: Table Options from TablePress.

Table Features for Site Visitors

Select Enable Visitor Features to allow WSU Brand styling for the table.

No other checkboxes in this section are necessary.

First Column Heading

Use the first column header to improve the accessibility of a table with multiple columns and identifies the row header and column header. These table headers are used to interpret the meaning of the cell. While viewing the table you can make this connection. It is when an assistive technology device is reading the table that identifying the row header and column header is useful.

Add an additional parameter to the shortcode to make the first column a header column.

Step 1: Parameter to add: first_column_th=true

[table id=N first_column_th=true /]

Step 2: Add CSS to add the bottom border for the first header column.
Appearance > Edit CSS:

/* TablePress: First Column Header parameter */
table tbody tr th.column-1, table tbody tr:last-of-type {
	border-bottom: 1px solid #ddd;
}

Setting Column Width

Add an additional parameter to the shortcode to define the widths of the columns. Use either px or %. Include the width for each column.

Step 1: Parameter to add: column_widths

[table id=N column_widths="40px|50px|30px|40px" /] <!-- Example is for a 4 column table-->
[table id=N column_widths="20%|60%|20%" /] <!-- Example is for a 3 column table-->

Cache Flush

The data from a table is stored for 24 hours. Updates to the table may not appear once published. While being logged into the website the changes will show. Those seeing the public webpage may not see the updates right away. Use this code to clear the cache for the table and those seeing the public webpage will see the updates.

Step 1: Parameter to add: cache_table_output=false

[table id=N cache_table_output=false /]

Empty Cells

To improve the accessibility of empty cells add this code to the empty cell for the table.

<span class="wsu-screen-reader-only">Not applicable</span>