# [Community Puzzle] HTML table cell split

https://www.codingame.com/training/medium/html-table-cell-split

Send your feedback or ask for help here!

Any clue for this one ?
Alogithms to use ?
Similar puzzles ?

Unfortunately the W3 page on HTML tables is not the friendliest piece of documentation I ever read, but what you need to know is how the layout works.

Apparently tables have been going out of fashion these last few years. I was surprised to see how little documentation on them is available outside eye-watering layers of specs.

Maybe you could find this explanation useful?

Donâ€™t bother I think I got the main idea

Hi,
Iâ€™ll try to give a short summary on HTML table structure:

HTML table rules

• the table is given as a list of rows, each as a list of cells
• for each row, there are specified only the cells that have top-left corner on that row, in the order as they appears left-to-right
• each cell can possibly extend on many columns and many rows, it is always rectangular, it is never overlapped on other cells
• in each row that â€śreceivesâ€ť columns occupied from cells starting in upper rows, there are only specified the â€śnewâ€ť cells, ordered left-to-right filling empty columns

Good to know. Next time I wonâ€™t waste my time trying to help.

Sorry I didnâ€™t want to be rude.
The link you gave is a useful complement to geppoz explanation.
Itâ€™s just that I get no pleasure at all on this puzzle

1 Like

Ok no problem, such misunderstandings happen.
I can understand this puzzle is not everyoneâ€™s cup of tea.

it seems there is an error in the test â€śSplit in rowsâ€ť
The input ask to split the 3rd cell in 2 rows but the expected answer is the 4th cell split in two !?
In the puzzle explanation it is said the F cell is the 5th one, but it is in fact the 6th one.
Can you please tell me what is wrong ?

The test input is :

A1,3 B3,1
C1,2 D1,1 E1,1
F1,1 G1,1
3 R

so you have

``````+-+-----+
| |  B  |
| +-+-+-+
|A| |D|E|
| |C+-+-+
| | |F|G|
+-+-+-+-+
``````

split cell #3 (i.e. D) horizontally

you will need to increase rowspan of cells A,C and E by one
then add a new cell d as a new row of HTML tags.

``````+-+-----+
| |  B  |
| +-+-+-+
| | |D| |
|A| +-+E|
| |C|d| |
| | +-+-+
| | |F|G|
+-+-+-+-+
``````

A1,4 B3,1
C1,3 D1,1 E1,2
d1,1
F1,1 G1,1

A,C and E change because they all have to make room for the new d cell.
B,F and G donâ€™t stand in the way so they remain unchanged.

Trace mentally an horizontal line splitting D in two, you can see that line going through A, C and E. These are the cells you have to modify so that they span one more row (that will be occupied by cell d)

Thanks very much for the clarification

My pleasure

I had a problem on retreiving col/row spans to operate the split.
I solved the issue by using a dictionary.
Ugly code but it works at last.

That problem can be hairy if you rub it up the wrong way