This document describes how the cells are spanned.
A cell may span to cover multiple columns/rows with the value defined in colspan/rowspan attributes. This spanning is similar to the “merge cell” of tables in Word. So, we will use the following table as example.
Let’s look at the cell node below:
<cell rowspan="2" colspan="3" width="40" height="30"></cell>
…
<cell rowspan="2" height="30"></cell>
This cell node definition will generate big cells in the table like below:

The cell with gray background shows the one as defined with rowspan=2 and colspan=3.
The cell with green background shows the one as defined with rowspan=2.
The sizes of cells are filled in the table.
When there are some cells covered more rows and columns, the following things will be affected.
1. Calculate size
When there is a cell covers multiple rows/columns, it will make the last row/column larger if its height/width is larger than the cells in these rows and columns.
In this example, the width of column 4 will be changed to 20, and the height of row 3 will be changed to 20, in order to fit the merged cell.
Since the height of row 3 is already changed to 20, the green cell will not make the row 4 higher.
2. Covered cells
As you may have noticed in some examples, there are still cell definitions for the cells covered by the merged cell.
As in the example above, the cell at row 2, column 3 and 4, you will still need to add cell definitions. Or, you will not be able to define the cell at column 5.
Similarly, in order to define the cell at row 3, column 5, you will need to input cell definitions for column 2, 3 and 4 in row 3.
This is a behavior designed on purpose, not by accident. With this approach, you will be able to
- Draw images on a gradient background, as shown in demo2
- Place some controls inside a group control, as shown in demo3
- Any other appearance similar, whatever you want
The cost of this approach is, you will need to input some empty cell nodes if you do not want to do such things.