Having multiple cells in a data table can only go two ways. You can either like the way cells are stacked adjacently or be bothered because the data presentation looks too crammed. If you belong to the latter group, then you must be looking for ideas on how to merge cells in a table and display the data in one large cell.
To some users, merging cells horizontally or vertically is easier with table plugins than in Excel. However, you do need a guide to understand the steps of combining consecutive cells in a data table anyway.
So, we are going to show you the cell merging tricks using Ninja Tables because it’s way more comfortable for new users and easy to keep up.
How to merge cells in a table: Ninja Tables
Can you merge cells in a table or not? We can surely guess this one correctly among many questions popping up in your head.
Ninja Tables seems to come with the simplest process as a leading WordPress table plugin. Users can conjoin cells located in the same row or column and make the data table more appealing.
Here’s how to merge cells in Ninja Tables.
1. Colspan/Cell merge
Firstly, start by creating a table with Ninja Tables or edit an existing one. For example, we already have a table- “Ninja Tables Merge Cells”, where we will show you how to merge two columns.
Here’s a preview of the table we are using. We will merge “gender” and “ip_address”, which obviously doesn’t make any sense. But it’s just for demonstration.
Our focus cells will be on the first and fifth rows to explain how to merge two cells in a table. So, notice that these two are separated till now. (We have applied Conditional Formatting to color the cell data of the gender column)
Note: Colspan/Cell merge is only applicable in Advanced Table (Legacy). Make sure you have selected it from “Table Render Settings”.
From the Table Rows panel, click on the pencil edit icon from the last cell of the first and fifth rows like the illustration above. The pencil icon will show you a lightbox popup “Update Row” to edit data.
You can also edit a particular cell by clicking on it.
Since we’re merging columns, the cell merge option will integrate two cells in a row, responding to the cell value “#colspan#”.
As you can see, the distinct cell value “#colspan#” is in the “ip_address” box to merge it with “gender”. The image above is for the first row. Similarly, we have added “#colspan#” in the fifth row’s cell too.
This is how the table looks until you open it in the preview window. The value appears right where we have put it.
Note: Once you add this “#colspan#” value, the previous data will be erased.
Click on “Preview” and compare the table’s appearance with the initial stage. You will see the two cells in the rows have integrated into one.
The two cells merged to make one large cell and took up two columns.
Still stuck with how to merge two cells in a table horizontally? Check out the Ninja Tables documentation.
2. Rowspan
If your table has multiple cells with identical data, you can give it a cleaner look and join them together. This process will integrate two cells vertically.
Let’s edit the same table from the previous section for easier demonstration. Although we have removed the #colspan# value from earlier.
To combine adjacent cells in a column, all you need is a code from Github. Copy the code and paste it in the “Custom Javascript” window of Ninja Tables.
Paste the code as it is, save it, and open the preview window. Since our table has a gender column with only male and female values, the adjacent cells containing similar values will create one single cell.
Here’s a cropped and closer view.
The first four cells were all male. As a result, the code joins the split cells and summarizes them in one. The same thing happens to the rest of the table.
You can take a look at the Rowspan in Ninja Tables documentation.
Finishing notes
A table plugin that can integrate its numerous neighboring cells and turn them into one single large cell is definitely user-centric! So, if you want to merge table cells without giving it much thought, we’d suggest going for Ninja Tables.
On a final note, why not have a go at the row/column calculation function, frontend editing, and some other handy features of Ninja Tables? It’d be awesome for you to keep these tricks under your sleeves!
