Two rows in the single table row in specified columns

Question

I'm planning on re-writing my old badly designed UI and would love to use table (whether it's a default bootstrap styled table or jquery datatables) to show scores. The issue is that i don't know how to style the table in a way that it's possible to write two rows on a single row. As it's kind of hard to explain what i exactly want to achieve, i've added a picture of my table which i formatted in Excel.

All the stylings it currently has (colors,borders, etc) are not an issue to do other than the fact that it has two rows on a single row line, which i can't get my head around on how to approach.

As you can see from the picture Heading 1to Heading n columns have two rows on a single row space.

How could i generate my table in a manner like that?

Answer 1

You could assign every td besides the one that should be two tds in one a class (say bigTD) and give it a attribute rowspan="2".

https://www.w3schools.com/TAGs/tryit.asp?filename=tryhtml_td_rowspan