The Advanced Table Block in WordPress allows for searching, sorting, and filtering within tables. It contains a variety of features beyond the standard Table Block that enhance data management, interactivity, accessibility, and mobile responsiveness. This block can effectively improve user experience, especially for content-heavy tables.

Features of the Advanced Table Block

• Customizable column widths for better readability, accessibility, and mobile responsiveness.
• Sortable data to help users easily navigate through information.
• Header and footer rows to create a professional look and improved screen reader support.
• Custom styling options for easier scanning of long columns.

Why Use It?

The Advanced Table Block allows you to display complex information more effectively.

For example:

• Department heads can use it to lay out course offerings for each semester, complete with clickable links to course descriptions.
• Event coordinators can create detailed schedules where users can sort by date, time, or location.
• Resource managers can organize downloadable materials with clear headers for each category, ensuring files are easy to locate.

---

Practical Example

Imagine the following:

• You’re updating your team’s directory — Instead of listing everyone in plain text, you can use the Advanced Table Block to create a clean, sortable table with columns for  Name, Position, Office Hours, and Contact Information. This ensures the directory is easy to navigate.

Let’s practice:

Creating the Table

Step 1:

Inserting the Advanced Table Block

In the blank area (or where you want to place the table), type the forward slash (/). This will instantly open the Block Inserter menu, giving you a quick way to access different types of blocks.

Next, start typing “Advanced Table.” As you type, WordPress will show a list of blocks that match your input. Once you see the Advanced Table Block appear in the dropdown list, simply click on it to insert it into your page. You’re now ready to start building your table!

---

Step 2:

Table Setup

After selecting the Advanced Table Block, you’ll see a prompt asking you to choose the number of columns and rows for your table:

• In the box labeled “Columns,” enter 4. This will create four vertical sections in your table
• In the box labeled “Rows,” enter 4 as well. This will create four horizontal sections, giving you a 4×4 grid
  
  

---

Step 3:

Adding Header Labels

Now that you’ve created a 4×4 table, the next step is to add header labels to the first row. Enter labels such as Name, Position, Office Hours, and Contact Information to define the content of each column. One way to make your header stand out is by bolding the text. Simply select each label and click the Bold (B) icon in the formatting toolbar above the table, or press Ctrl + B (Cmd + B on Mac) for a shortcut.

---

Customizing The Table

Step 4:

Sorting Data in Columns

To make your table interactive and allow visitors to sort data, you will want to ensure that sorting is enabled. First, click on the white space of your block next to the “Search For” box, and navigate to the block settings panel to the right of your editor interface. Next, toggle the switch next to the option “Sortable”. Enabling this feature will allow users to click on the column headers to sort information either alphabetically or numerically.

---

Step 5:

Adjusting the Width

WordPress allows you to adjust the width of your table to fit your page design. You can choose between None (default width) or Wide Width.

None (Default Width)

• By default, tables are set to None, meaning they fit within the normal content margins.
• To ensure your table stays at the default size, click on the table, open the alignment menu, and select None.

Wide Width

• To make your table span a wider section of the page, select Wide Width from the same alignment menu.
• This option allows your table to cover more horizontal space, making it stand out on wider screens.

---

Step 6:

Styling the Table

To style your table, first click on the body of your block. The Table Block Toolbar will appear above where you’ll find a variety of options for styling your table. Click the “Styles” icon to choose between “Default” and “Stripes” for your borders. In this toolbar you will also find options for changing your column and text alignment.

To change the colors of your table, once again click on the body of your block, then navigate to the Block Settings Panel on the right of your screen. Look for the Color Settings option and choose colors of text and backgrounds that align with your website’s branding.

(On the right side of your screen, you should see the Block Settings Panel. If it’s not visible, click the small Sidebar icon at the top-right corner of the editor next to “Save”).

---

Step 8 (final):

Adding or Removing Rows and Columns

Adding a Row or Column:

• Click anywhere in the table where you want to insert a new row or column.
• In the toolbar that appears above the table, click the “Edit Menu” icon. You’ll see options to Add Row Above, Add Row Below, Add Column Left, or Add Column Right.
• Select your desired option, and a new row or column will be added to your table.

Deleting a Row or Column:

• Click in the row or column you want to remove.
• Open the Table block toolbar again and select Delete Row or Delete Column.

---

Example Advanced Table in Use