[Community Puzzle] HTML table cell split

Puzzles
#1

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

Send your feedback or ask for help here!

#2

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

#3

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?

#4

Don’t bother I think I got the main idea

#5

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
#6

Good to know. Next time I won’t waste my time trying to help.

#7

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
#8

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

#9

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 ?

#10

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)

#11

Thanks very much for the clarification

#12

My pleasure

#13

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.

#14

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