Tutorial on merging columns, rows or both

Tabulizer allows you to automatically merge neighboring cells easily with a single autospan rule. Depending on which element this rule is applied, the merging takes place on the same row (colspan), on the same column (rowspan) or both. Let's look at some examples to demonstrate these ideas.

Case 1: Cell merging on the first header row

Table without merging Table with merging
Row 1    
Row 2 Row 2 Row 2
Row 3 Row 3 Row 3
Row 1
Row 2 Row 2 Row 2
Row 3 Row 3 Row 3

In we want to enable cell merging on the first row, all we have to do is to add a new rule with the following settings:

Case 2: Cell merging on the first column

Table without merging Table with merging
Column 1 Column 2 Column 3
  Column 2 Column 3
  Column 2 Column 3
Column 1 Column 2 Column 3
Column 2 Column 3
Column 2 Column 3

In we want to enable cell merging on the first column, all we have to do is to add a new rule with the following settings:

Case 3: Cell merging on the first header row & column

In this case, we have kept both of the previous rules, i.e. autospan on the first column and on the first row :

Table without merging When column merging has higher priority When row merging has higher priority
Data[11]    
  Data[22] Data[23]
  Data[32] Data[33]
Data[11]  
Data[22] Data[23]
Data[32] Data[33]
Data[11]
  Data[22] Data[23]
Data[32] Data[33]

Since both cases are valid, we have used the rule priority property in order to make row merging (row autospan) to be executed first or vice versa.

Autospan with Range Key

One interesting situation arises when you want to create the zebra effect, by setting the styling of the even rows differently than the odd rows. If autospan is enabled on the column element, the result may not be what we had in mind. For instance, in the example below we wanted to created the zebra effect, where the row changes based on the value of the first column. This is indicated by setting the range key = 1, which means "change the row count every time there is a new item on the 1st column&quot. If you had set the range key = 2, then the row count would change every time there was a new item on the second row and so on. The default value range key = 0 means the the row count will change every time there is a new item on any row.

Even rows with range key = 0 Even rows with range key = 1
Month Activity Location
June Concert London
Marathon Melbourne
July Concert Athens
Gala Paris
Movie Los Angeles
August Festival Santa Barbara
September Festival Berlin
October Concert Amsterdam
Marathon Roma
Month Activity Location
June Concert London
Marathon Melbourne
July Concert Athens
Gala Paris
Movie Los Angeles
August Festival Santa Barbara
September Festival Berlin
October Concert Amsterdam
Marathon Roma