Shortcodes - Tables | Nexus Websites Ltd

From the Nexus team we wanted to thank you all for your continued business during one of the most challenging years in a century.

Just to let you know, our business will be closed from the 19th of December until the 4th of January. Thank you!

Difficulty

How long will it take?

5 Minutes

Youtube Video

Not yet available

Step 1

First of all, create or navigate to the page or post that you would like to edit.

The table shortcode is an easy way to insert a pre-defined table. Advanced users with HTML knowledge can still create their own table with HTML code.

Step 2

Click on the shortcode dropdown, signified by a [] symbol.

Step 3

Click on the shortcode named “Table 1” or “Table 2” to insert a table into the page.

The difference between “Table 1” and “Table 2” is visual; table 2 has a dark header where as table 1 is light. Try them both out!

Step 4

You will now see a table on the page with 4 headings, and 5 rows below each. Simple edit the table contents as you wish by selecting the text within each table cell and replacing with what you like.

In our example, we will use it to compare different services.

It is quite likely that you will need additional rows or columns. As this is slightly more advanced, how to do this is located in additional information lower down the page.

Step 5

Submit, update, publish or preview your page or post and it should look similar to this image.

Additional Information – Adding New Rows

Click on the “Text” tab within the editor to display the HTML code. Find the code for the table. To create a new row, locate a block of code that is contained with in the <tr> tags. Select all of this code, copy, and then paste the code directly after the </tr> tag for the row where you want the new row to appear after. You can then go back to the visual editor and enter the text for the new row.

For help with understanding the HTML table tags – <tr> = “table row” and <td> = “table down”. You insert the row, and then you insert each cell moving down (or across) the row.

Additional Information – Adding New Columns

Click on the “Text” tab within the editor to display the HTML code. Find the code for the table. To create a new column, look for a line that begins with <td> – representing one cell. Copy one of these lines and then paste on a new line below the one you copied.

You must paste the line the same amount of times inside each <tr> block. – If you have 5 columns, you will need to paste the line of code 5 times, once in each <tr> row block.