In WordPress, there are various methods to insert tables. You can use plugins, directly embed tables using HTML code, or utilize table elements provided by page builders (for instance, the Table element in the Avada theme). Additionally, you can now take advantage of the Gutenberg table block, which is the basic editor, eliminating the need for plugins.
Recently, I tried inserting a table using the table block offered by Gutenberg and found its capabilities to be quite impressive. However, the layout of the table may vary slightly depending on the theme. With some CSS adjustments, it seems unnecessary to rely on third-party plugins.
If you wish to create more complex tables, utilizing plugins or online table creation tools is an option.
By using ChatGPT, you can quickly convert text-based table data or HTML code into the table block of the block editor. It also allows for immediate translation of content in foreign languages such as English, Japanese, and Chinese to generate directly into table blocks.
Using the WordPress Gutenberg Table Block
Adding a Gutenberg Table Block
To insert a table in the Gutenberg editor, simply select the Add Block option and choose the table.

You can also quickly select the table block by typing '/table' in a new paragraph block.

Configuring the Table
After inserting the table block, you can set the number of columns and rows. Specify the desired Column Count and Row Count, then click the Create Table button.

After the table is inserted, you can begin entering data into it. Additionally, you can customize the table style in the block settings on the left.

You have two options for the table style:
- Default
- Stripes
Default offers a standard table appearance with borders, while Stripes displays alternating striping.
In the table settings section, you can enable or disable three options: Fixed Width Table Cells, Header Section, Footer Section.
If the length of the content in the table cells is short, the overall width of the completed table may appear too small and unattractive. In such cases, activating the Fixed Width Table Cells will allow the table to expand to fit the width. If you have a header section, make sure to enable the Header Section.
Customizing Table Styles with CSS
You can use the basic table format, but if you're a bit familiar with CSS, you can customize the table using custom CSS. For example, I styled my table as shown below.
First, add the following CSS code in Appearance » Customize » Additional CSS.
.table-style-1 thead {
background-color: #8f919e;
color: white;
}
.wp-block-table table {
border-collapse: collapse;
}
.wp-block-table figcaption {
text-align: center;
}
Then, assign the CSS class to the table you want to apply the above style to. Set the basic style in the table block settings, and under Advanced, add table-style-1 in the additional CSS class field.

This will display the table similarly to the example below. This is based on the GeneratePress theme, and the style may vary slightly depending on the theme.
City | Population |
---|---|
Karachi | 24,600,000 |
Shanghai | 24,230,000 |
Delhi | 24,230,000 |
Lagos | 16,060,303 |
Istanbul | 13,710,512 |
Tokyo | 13,297,629 |
Mumbai | 12,478,447 |
Moscow | 11,977,988 |
Sao Paulo | 11,821,876 |
Beijing | 11,716,000 |
Applying the example CSS code allows you to change the header border color and center-align the caption section of the table.
When choosing the striped style, the table will appear as follows.
City Name | Population |
---|---|
Karachi | 24,600,000 |
Shanghai | 24,230,000 |
Delhi | 24,230,000 |
Lagos | 16,060,303 |
Istanbul | 13,710,512 |
Tokyo | 13,297,629 |
Mumbai | 12,478,447 |
Moscow | 11,977,988 |
Sao Paulo | 11,821,876 |
Beijing | 11,716,000 |
With CSS, you can also create table styles like the one shown below. (The table below displays some of the action hooks provided by WordPress.)
Hook Name | Description |
---|---|
muplugins_loaded | Called after essential plugins have been loaded |
registered_taxonomy | Handles operations related to categories, tags, etc. |
registered_post_type | Handles operations related to posts, pages, etc. |
plugins_loaded | Called after activated plugins are loaded, before plugin functions are defined |
sanitize_comment_cookies | Called when cleaning comment cookies |
setup_theme | Called before the theme is loaded |
load_textdomain | Called when using the `default` domain |
after_setup_theme | This hook is generally used to initialize theme settings or options. It is called right after the functions.php file of the active theme is loaded, and is the first action hook available in the theme. The add_theme_support() function should be called at this point, as adding certain functionalities in the init action hook would be too late. At this stage, the current user is not yet authenticated. |
If you're not satisfied with the style, consider adjusting it using CSS. If it still doesn't meet your preferences, you might want to try using a table plugin like TablePress.