Page Comparison

Excerpt

Section

Column

width	50%

Step 1:

Click

Add the

Table Button

In the Page Editor, place your cursor in the Content Editor where the top left of the table will appear.

Then, click the Table button

Plugin

Before a table can be added, the plugin to create tables must be added.

From the dashboard's Toolbar, click the option for Plugins.

Column

width	50%

Section

Section

Column

width	50%

Step 2:

Hover Over Insert Table and Select Starting Cell Layout

Hover over the Insert Table option.

The Table Layout Selector will display.

Select the preferred starting layout. The example depicts a 10x5 table.

Select the TablePress Plugin

Use the Search Bar to type in tablepress.

This will filter the plugins and reveal the TablePress plugin.

Column

width	50%

Section

Section

Column

width	50%

Step 3:

Click Select Files

Drag and drop your image onto the page, or click the Select Files button.

Your computer's Finder or Explorer window will display

Activate the TablePress Plugin

Click the Activate link to activate the TablePress plugin.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 4: Plugin Activation Confirmation

Once completed, the word Activate will switch to Deactivate, and the TablePress option will appear in the Toolbar.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 5: Select the TablePress Option

Click the TablePress option in the Toolbar.

This will take you to the Table Editor.

Column

width	50%

Image RemovedImage Added

Section

Section

Column

width	50%

Step

4

6:

Select

Copy the

ImageUse your computer's Finder or Explorer window to select the appropriate image. This will upload the image to the Wordpress server and return you to the Media Library Screen

Default Table

Hover over the default table and click the option to Copy it.

This isn't necessary for the first table you create, but it may be best to preserve a starting table if more have to be created later.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 7: Table ID

Notice the table ID for your new table.

Table IDs are important for keeping track of the table you're working with, and later for when you place it on a page.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 8: Edit the Table

Hover over the table you wish to edit and click the link for Edit.

Column

width	50%

Image RemovedImage Added

Section

Section

Column

width	50%

Step

5: Select the ImageOnce uploaded, select the specific image or images to insert onto the page

9: Table Information

Change the Table Name and the Description to be specific to the table you are making.

The description is used by people using screen readers, so filling it in correctly is part of accessibility compliance.

A quick description is best.

Example: Table displaying rows of findings and columns of years.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 10: Table Content

The Table Content area displays the actual layout of your table.

Select a row or column by placing a checkmark into the corresponding row or column checkbox.

The Table Manipulation area allows you to combine, insert, remove, hide, show, duplicate, and/or delete rows and/or columns.

It also allows for the addition of images and links into cells in the table.

Column

width	50%

Image RemovedImage Added

Section

Section

Column

width	50%

Step

6: Add Alt Text for AccessibilityWith the image selected, click into the Image Pane and added alt text into the Alt Text field for accessibility

11: Table Options

The Table Options area allows for style customization.

Always leave Table Head Row checked for accessibility purposes. This includes a code tag that allows screen readers to see that the top row is a header.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 12: Save Changes

After all changes to a table are made, click the Save Changes button at the top or bottom of the page.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 13: Copy the Table's Shortcode

The Shortcode is the string WordPress uses to reference the table you made. It needs to be placed on a page in the area you want the table to appear.

Copy the shortcode by selecting the entire code string and using the keyboard shortcut Control + C (or Command + C on a Mac). Alternatively, you can right-click your mouse and select Copy from the shortcut menu.

Column

width	50%

Image RemovedImage Added

Section

Section

Column

width	50%

Step

7: Click Insert Into Page ButtonAfter being selected and having the alt text entered, click the Insert Into Page

14: Click Pages

Click the Pages option in the Toolbar.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 15: Edit Page

Hover over the page you wish to place the table on and click the Edit link.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 16: Click the Table Button

Inside the WYSIWYG text editor, place your cursor where you want the top left of the table to appear, then paste the Shortcode by using the keyboard shortcut Control + V (or Command + V on a Mac). Alternatively, you can right-click your mouse and select Paste from the shortcut menu.

Column

width	50%

Image Added

Section

Section

Column

width	50%

Step 17: Click the Update Button

When all of your changes are complete, click the Update button.

Column

width	50%

Image RemovedImage Added

Section

Section

Column

width	50%

Step

6

18:

Confirm the Image and Placement

Confirm that the correct image is in the correct location on the page.

You can drag and drop the image to move it, or you can click on the image to bring up the Image Editor and use that to change its position

Live Version of the Table

The table displays on the front end with 10 entries by default. Users can also use the Search Bar to search for specific content in the table.

The Previous and Next options advance the table to different pages to view additional entries.

The Edit button will move you immediately to the Table Editor.

Column

width	50%

Image RemovedImage Added

Versions Compared

Old Version 3

New Version Current

Key

Step 1:

Add the

Plugin

Step 2:

Select the TablePress Plugin

Step 3:

Activate the TablePress Plugin

Step 4: Plugin Activation Confirmation

Step 5: Select the TablePress Option

Step

6:

Copy the

Default Table

Step 7: Table ID

Step 8: Edit the Table

Step

9: Table Information

Step 10: Table Content

Step

11: Table Options

Step 12: Save Changes

Step 13: Copy the Table's Shortcode

Step

14: Click Pages

Step 15: Edit Page

Step 16: Click the Table Button

Step 17: Click the Update Button

Step

18:

Live Version of the Table