You have missed the crux of the problem and was mentioned in the last line of my post. 
Historically the table element was abused to create layouts that were not tabular. A table is a semantic element and meant for tabular data. In the olden days you had no choice but to use tables for layout to create the complex shapes required as no other tools were available.
As css became more mature people moved away from tables for layout and used html more semantically.
The links you posted were basically showing how to create layouts without using the table element. That is in essence very easy unless you want to imitate the rowspan and colspan behaviours. Kevin’s article shows one way to do this but is very limited and relies on magic numbers and is a very fragile construct that I would not use in production.
These days flex makes layouts easier but flex is one dimensional. It does not have explicit relationships to maintain rows and columns in alignment unless you fix widths in some way.
On the other hand css grid is 2 dimensional and can if required create explicit integrity of rows and columns and indeed mimic rowspan and colspan where required.
I’m only on a mobile at the moment so can’t show code examples but I think the above answers the ‘why’ of your question
(You may be interested in my codepen at the end of a recent thread that shows a similar css grid layout I know you didn’t want a grid layout but this shows how simple the html becomes when grid is used.)