Complicated Table Using Rowspan And Colspan

I have to make a very complicated table similar to the one in the picture below. http://irinaciocan.ro/tehnici_web_2012/imagini/tabel_ciudatel29.png I tried this markup but it does

Solution 1:

Your table should be a 5 columns per 8 rows table (before merging many cells).

All your rows should have a total of 5 columns (or colspan="2" followed by colspan="3" by example). This is the case of the first 2 ones but then it's wrong from the third to the last one.

No fiddle as I won't do it for you ;) Please provide a fiddle where the table is 5C x 8R if there remain(s) a problem

EDIT: OK solved it here: http://jsfiddle.net/W9nJU/5/

• The main problem was with the 2nd and 3rd rows: while they've a double height when displayed and make the impression that they occupy 4 rows, they should - no they MUST - be made with only 1 row each. So the 3 cells "1, 4 and 8" on the left span vertically over resp. 1, 2 and 5 cells (but the cell 4 is twice the height of a cell that would also be spannng over 2 rows). Modifcations: cell "4" spans over 2 rows (not 4); "5" and "6" no vertical span and resp. span over 2 and 3 columns; cell "7" spans over 3 rows (not 4)
• the cell "8" spans over 5 rows and not 4
• I think there was, within cells labelled "9"-"17" another value off by 1 but I can't find it anymore. Maybe not.

You're not drawing on a sheet of paper with a fixed-size grid or on a checkerboard. An HTML table is a bit like topology where size doesn't matter and a ring, a mug, a donut and Saturn ring have the same characteristics: "it's just a torus" (if the ring of Saturn wasn't made of a million rings made of blocks... my analogy isn't so good) At the time the HTML table algorithm build the cells, rows and columns from HTML code (and it can even do so with a few cells lacking!), it has no idea of the size they will have on a graphical browser or on a printer. And a screen reader couldn't care less about that. What is important is the minimal number of cells needed. CSS then use the result to style and display it.