How To Add HTML Tables To A WordPress Page Or Post

HTML tables provide a structured and organized way to present data on your WordPress website. They are ideal for displaying information such as product comparisons, pricing tables, schedules, and more. This guide presents three distinct approaches, along with the pros and cons of each approach.

Method 1: Using the TablePress Plugin

TablePress is a popular, free plugin specifically designed for creating and managing tables in WordPress. It offers a user-friendly interface and numerous features.

Add a New Table

Install and activate the TablePress plugin (Plugins > Add New > Search for “TablePress”). After activation, a new “TablePress” menu item will appear in your WordPress dashboard.

Click on “TablePress” > “Add New Table.” Give your table a name and description (optional). Specify the initial number of rows and columns (you can adjust this later). Click “Add Table.”

Add Your Content

You’ll be taken to the table editor. Enter your data into the table cells, similar to working with a spreadsheet. TablePress provides a visual interface for adding, editing, and deleting rows and columns.

Edit the Table Display (Optional)

TablePress offers various options for customizing the table’s appearance and behavior. You can enable sorting, filtering, pagination, and more. Explore the “Table Options” and “DataTables JavaScript library” sections to configure these features.

Add to a Page or Post

Once your table is ready, TablePress provides a shortcode (e.g., `[table id=1 /]`). Copy this shortcode.

Go to the page or post where you want to display the table. Paste the shortcode into the content area (in either the Classic Editor or a “Shortcode” block in Gutenberg). Update or publish the page/post.

TablePress: Advantages and Disadvantages

• Advantages: User-friendly interface, many features (sorting, filtering, etc.), easy to manage tables from a central location.
• Disadvantages: *Major drawback:* If you deactivate or delete the TablePress plugin, your tables will disappear from your website, leaving only the shortcodes behind. This creates a dependency on the plugin.

Method 2: Using an HTML Table Generator

Online HTML table generators provide a way to create tables without relying on any WordPress plugins. They generate the raw HTML code, which you then paste into your page or post.

Create a New Table

Visit an online HTML table generator, such as Tables Generator. Select “HTML tables”.

Use the generator’s interface to create your table. Set the number of rows and columns, and add your content to the cells. Most generators offer basic styling options as well.

Generate and Copy the Code

Once your table is complete, click the “Generate” button (or similar). The generator will produce the HTML code for your table.

Copy the generated HTML code to your clipboard.

Add to Your Page or Post

Go to the page or post in WordPress where you want to add the table. If using the Classic Editor, switch to the “Text” tab (not the “Visual” tab). Paste the HTML code into the content area.

If using Gutenberg, add an “HTML” block and paste the code into the block. Update or publish the page/post.

HTML Table Generator: Advantages and Disadvantages

• Advantages: No plugin dependency; tables remain even if you change themes or remove plugins. Simple and straightforward.
• Disadvantages: Less convenient for editing tables later; requires manually updating the HTML code. Fewer features compared to TablePress.

Method 3: Using the Advanced Editor Tools Plugin (Recommended)

The Advanced Editor Tools plugin (formerly known as TinyMCE Advanced) enhances the WordPress editor (both Classic and Gutenberg) with additional formatting options, including a user-friendly table creation tool. This is the recommended method because it combines ease of use with plugin independence.

Install and Activate

Install and activate the “Advanced Editor Tools” plugin (Plugins > Add New > Search for “Advanced Editor Tools”).

With Classic Editor

Open the page or post where you want to add the table. You’ll notice that the Classic Editor toolbar now has more options, including a table icon.

Place your cursor where you want the table to appear. Click the table icon in the toolbar. A dropdown menu will appear. Hover over “Table” and then drag your mouse to select the desired number of rows and columns (e.g., 2×2). Click to insert the table.

Fill in the table cells with your data. You can use the table menu options to add/delete rows and columns, merge cells, and apply basic styling.

With Gutenberg

In Gutenberg, add a “Classic” block (search for “Classic” when adding a new block). This block provides the Classic Editor interface within Gutenberg.

Within the Classic block, you’ll see the enhanced toolbar with the table icon. Follow the same steps as with the Classic Editor (above) to create and populate your table.

Advanced Editor Tools: Advantages and Disadvantages

• Advantages: Easy to use, integrates directly into the WordPress editor, creates standard HTML tables (no plugin dependency after creation), offers sufficient features for most basic table needs.
• Disadvantages: Fewer advanced features than dedicated table plugins like TablePress.

Styling Your Tables (CSS)

All three methods create standard HTML tables. You can customize the appearance of your tables using CSS (Cascading Style Sheets). You can add custom CSS to your theme’s stylesheet (usually style.css) or through the WordPress Customizer (Appearance > Customize > Additional CSS).

Here is a simple CSS example to get you started:

table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 20px;
}

th, td {
  border: 1px solid #ddd;
  padding: 8px;
  text-align: left;
}

th {
  background-color: #f2f2f2;
}

This CSS will make the table full-width, add borders, padding, and a light gray background to the header row.

Conclusion

Adding HTML tables to your WordPress pages and posts is straightforward with the right tools. While TablePress offers a feature-rich solution, the potential for table loss upon plugin deactivation makes it less desirable. Using an online HTML table generator gives you full control over the code but requires manual editing. The Advanced Editor Tools plugin strikes the best balance between ease of use and plugin independence, making it the recommended method for most users. Choose the method that best aligns with your workflow and technical comfort level.