WordPress Tables

Adding a Basic Table Block

  1. Click on the plus sign and search for “table” to add one.
  2. Learn more about the table block.
  3. Tip 1: Always add the Header Section for accessibility.
  4. Tip 2: You can insert images into a table. Click on the down arrow. Select Inline Image.
  5. Here is an example of a basic table using the Stripes style:
JamesBondJames Bond
JasonBourneJason Bourne

Copying Excel into a Basic Table

  1. First copy the Microsoft Excel table into Microsoft Word.
  2. In Microsoft Word, select the table & copy it.
  3. Then paste it into the WordPress page.

Adding a Pricing Tables Block

  1. To add a pricing table, click on the plus sign & search for “pricing table.” It’s actually a set of three columns with buttons.
  2. Change colors and button links as needed.

Ninja Tables Plugin

Ninja tables are complex tables that allows for images, links, uploading of documents, search, filters, sorting, conditional formatting, and much more. Most FUSD WordPress websites have the Ninja Tables Pro plugin installed.

Helpful Links

Ninja tables block

Video Introducing Ninja Tables

Important Info about Ninja Tables

  • After editing and saving a Ninja table, hit Clear Cache at top right so non-logged users can see changes immediately.
  • Be careful about deleting Ninja tables. They cannot be retrieved individually. Your entire website has to be restored to the previous day’s backup.

Ninja Table Recommendations

  1. To add email, links, images, videos or even upload a file (Add Media) directly inside a cell, use the HTML Field as the Data Type when creating a new column.
  2. To reorder fields: Go to Table Configuration. Drag the handle next to the field.
  3. To enable searching or sorting: Go to Table Design > Styling. Check the desired boxes under Features.
  4. To set which field to sort by: Go to Table Design > Other > Set Sorting Method.
  5. To manually sort rows: In the back end within Ninja Tables Pro > Table Rows, hover over the left side of a row. When a four-headed arrow displays, drag the row to reorder.
  6. To change colors: Go to Table Design > Table Colors. Make sure there is sufficient color contrast.
  7. To edit the table directly from the webpage: Go to Frontend Editing. Check the Enable Frontend editing box.
    • Allow the Editor and FUSD Web Liaison to edit.
    • Make all columns Editable
    • Check the Always Show Edit Icons box.
Table Configuration
2. Drag handle to reorder fields
Table Design screenshot
3. Enable search and sorting to increase usability
Table Design set sorting method
4. Select which column to sort initially
Screenshot of Table Colors settings
6. Where to set table colors
Screenshot of Sort Manually
6. To Sort Manually, drag the four-headed arrow on the left side of a row.
7. Enable frontend editing to let users edit the table directly from the webpage. View larger screenshot of Frontend Editing settings.

Example of a Ninja Table

Last NameFirst NameDate FieldEmail (HTML Field)Photo (HTML Field)Download (Button/Link with Style)Other Info (HTML Field)
BuiChau10/26/2024 Chau.Bui@fresnounified.orgDownload My Info
BondJames5/31/2022James.Bond@fresnounified.orgJames BondDownload My InfoMr. Bond's Website
BourneJason8/25/2023Jason.Bourne@fresnounified.orgJason BourneDownload My InfoMr. Bourne's Website

Building a Ninja Table From Google Sheets

This is the Google Sheet being used . See how to connect a Ninja Table to Google Sheets. For images to work, Share settings must set to Anyone with the link to view. Don’t forget to add alt text to images on the Google Sheet.

LastFirstEmailHTML FieldPhone
BondJamesjames.bond@fresnounified.orghttps://www.fresnounified.org 559-457-3757

Public WordPress Website Tutorials

  1. Website Overview
  2. Quick Start Guide
  3. How to Update a Bell Schedule (popular)
  4. Editing a WordPress Page
  5. Smart Slider
  6. Navigation Menu
  7. Calendar
  8. Buttons
  9. Envira Gallery
  10. All WordPress Website Tutorials
Back to top