{"id":16567,"date":"2020-11-26T15:00:06","date_gmt":"2020-11-26T14:00:06","guid":{"rendered":"https:\/\/qodeinteractive.com\/magazine\/?p=16567"},"modified":"2021-05-27T10:45:16","modified_gmt":"2021-05-27T08:45:16","slug":"how-to-create-tables-in-wordpress","status":"publish","type":"post","link":"https:\/\/qodeinteractive.com\/magazine\/how-to-create-tables-in-wordpress\/","title":{"rendered":"How to Create Tables in WordPress"},"content":{"rendered":"

[vc_row][vc_column][vc_column_text]Adding tables to a website is an excellent way of organizing data and presenting it in a concise, logical, and comprehensive manner. Whether you wish to share information, statistics, or create comparisons of any kind, tabular format is your friend. It is well-ordered, clean, and as such it allows your users to read data at a glance.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]In this tutorial, we will show you two ways of creating WordPress tables. One is the non-plugin way that works in Gutenberg only. The other method requires the installation of a plugin (we chose TablePress, currently the best table plugin<\/a> on the market) and can be applied to both the Classic Editor and Elementor.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Create WordPress Tables in Gutenberg<\/h2>\n

[\/vc_column_text][vc_column_text]Possibly the easiest way of adding basic tables to your WordPress website is by using Gutenberg. No coding is required nor do you have to install third-party plugins – the functionality comes already bundled with the editor.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The first thing you should do is open the page or post where you wish to display the table and add the Table<\/strong> <\/em>block.[\/vc_column_text][vc_empty_space height=”50px”]

\n
\n \"Table <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]By default, the table has 2 columns and 2 rows.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Table <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can change these values as per your requirements and then click the Create button to make the table.
\n[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Table <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once the table is created, you will have the possibility to customize it to some extent.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The first option placed above the block regards the block itself and it allows you to change the block style<\/strong>. You can choose between default and striped.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Block <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The second option lets you modify the alignment of the whole table (left, center, or right)<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Table <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]In case you change your mind and decide to add\/remove columns or rows to\/from your table<\/strong>, select the Edit Table<\/strong><\/em> option.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]The fourth option enables you to change the column alignment<\/strong>. By default, it\u2019s set to left, but you can set it either to center or right.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Column <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Additional table settings are displayed on the right side of the screen, where you can set fixed table cell width as well as add header and footer sections to your table.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Block <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Moreover, you can alter the background row color and select one of the four available hues<\/strong> (this option is placed right below Table Settings<\/em>).[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Block <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you would like to make additional alterations to your table and format or create more advanced tables, you would have to either use some good ole\u2019 coding or install a powerful plugin. We\u2019ll go with the latter and show you how to make the most of the TablePress plugin.
\n[\/vc_column_text][vc_empty_space height=”80px”][vc_widget_sidebar sidebar_id=”new-top-picks-banner”][vc_empty_space height=”81px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

How to Create WordPress Tables with the TablePress Plugin<\/h2>\n

[\/vc_column_text][vc_empty_space height=”24px”]

\n
\n \"TablePress\" <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]TablePress<\/a> is currently the most powerful table plugin on the market and you can use it free of charge<\/strong>. It lets you effortlessly create and add tables to your website and edit them to your liking. It packs far more options than the Gutenberg\u2019s Table<\/em> block and is also a great solution if you\u2019re using the Classic Editor since you can\u2019t add tables to it unless you\u2019re up for some coding.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Once you start creating the new table, you\u2019ll have the option to add its name, description, and set the number of columns and rows (the default value is 5 x 5).<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Table <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Once all the parameters are set, press the Add Table<\/strong><\/em> button.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]You will then see a huge table editor divided into multiple sections you can use to enter data and manipulate the table however you please. The number of edits you can make is truly staggering.
\n[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]At the top of the page, you can see the Table ID<\/em>. The ID is important because you\u2019ll need to insert it into the shortcode<\/strong> [table id=<the-ID> \/]<\/strong><\/em>\u00a0that you will later use to add your table to a page<\/strong>. The ID is set to 1, but in case you should change it, make sure to modify the shortcode as well.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Table <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]Under Table<\/em> Content, you should add data to your table. You can drag-and-drop both columns and rows to change their position.<\/strong> To do that, place the mouse cursor on the name of the column and\/or the row number and rearrange their positions however you wish. Moreover, next to the name of each column are two small arrows that will help you sort the content in alphabetical or numerical order.<\/strong>[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Table <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]If you click on the triangular shape at the bottom right corner of each cell, you\u2019ll be able to change the cell\u2019s size simply by dragging your mouse<\/strong>.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Table <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]TablePress lets you add not just textual content to your table, but also links and images<\/strong>. To go about that, you first need to select the cell where you wish to display such content. Then, under Table Manipulation<\/strong><\/em> click Insert Link<\/em> or Insert Image<\/em>.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When you press the Insert Link<\/em> button, a pop-up window will show up, where you can add your link and decide if it should open in a new tab or not. You can also link to the already existing content on your site.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]As for adding images, once you\u2019ve clicked the Insert Image<\/em> button, your media library will open, so you can select one of the already uploaded files or add a new one. When you find the desired picture, click the Insert Into Table<\/em> button and the image will show up within the selected cell.[\/vc_column_text][vc_empty_space height=”50px”]
\n
\n \"Add <\/div>\n<\/div>[vc_empty_space height=”38px”][vc_column_text]You can add\/remove as many columns and rows as you want, hide them, duplicate them, as well as combine cells.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Under Table Options<\/em>, you have the possibility to add a header and\/or a footer to your table, enable alternating row colors, add CSS classes, and more.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]The final section of the editor contains options that would enable visitors to sort the table how they want, use search and filter options, display table pagination, etc.<\/strong>[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]When you\u2019re happy with how everything looks, it\u2019s time to save all the changes and add the table to your page. As we\u2019ve mentioned earlier, you\u2019ll have to use a shortcode displayed at the top of the table editor to do that. Copy the [table id=<the-ID> \/]<\/strong> shortcode, go to the page or post where you wish to showcase the table and select the page builder of your choice. If you\u2019re using Gutenberg, paste the link into the Shortcode<\/em> block. In the Classic Editor, add the link to the text editor. And lastly, Elementor users need to use the Shortcode<\/em> widget in which they should insert the link.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]Another cool thing about the TablePress plugin is that it allows you to export and import tables<\/strong>. You get to choose the export\/import formats, decide if the newly imported table should replace the existing table or be displayed as an entirely new table, and more. The exported data can be added to Microsoft Excel, Google Sheets, or any other spreadsheet program.[\/vc_column_text][vc_empty_space height=”28px”][vc_column_text]To enhance the power of the TablePress plugin and take it on a whole new level, you can add extensions to it.<\/strong> The list of all available extensions<\/a> is impressive and it allows you to add pretty cool features to your tables, such as row filtering, column filter, and many others. The plugin\u2019s author made sure you can use them all free of charge, even the ones that come with the Premium<\/em> tag.[\/vc_column_text][vc_empty_space height=”68px”][\/vc_column][\/vc_row][vc_row][vc_column][vc_column_text]<\/p>\n

Conclusion<\/h2>\n

[\/vc_column_text][vc_column_text]If you intend to create a simple table, then the Gutenberg\u2019s Table<\/em> block should suffice. It features all the basic options and is easy to use. Plus, if you know how to code, you could further increase its functionality. But in case coding is not exactly your forte or you don\u2019t want to bother with it at all, the TablePress plugin has got it all. It ensures the hassle-free creation of tables that you can tweak however you need, without having to spend a dime from your pocket (although, donating to the author is an option).[\/vc_column_text][\/vc_column][\/vc_row]<\/p>\n<\/div>","protected":false},"excerpt":{"rendered":"

Interested in adding WordPress tables to your website? Follow our tutorial and learn how to create them in the Classic Editor, Gutenberg, and Elementor<\/p>\n","protected":false},"author":4,"featured_media":16618,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7],"tags":[14,47,4,13],"class_list":["post-16567","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-tutorials","tag-core","tag-plugin","tag-tips","tag-wordpress"],"_links":{"self":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16567","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/comments?post=16567"}],"version-history":[{"count":0,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/posts\/16567\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media\/16618"}],"wp:attachment":[{"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/media?parent=16567"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/categories?post=16567"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/qodeinteractive.com\/magazine\/wp-json\/wp\/v2\/tags?post=16567"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}