如何重新创建此表格效果

I was wondering how I could recreate this table from this image. For my class project we are supposed to redesign this page, however I have no idea how to implement anything like that. It seems almost as if someone embedded an excel spreadsheet in the page.

Here is the picture of the Table.

Use a table header to add the blue background to the top row with CSS.

th { background: some blue-ish color}

Add a fixed width div (the table should be inside this div) and use overflow: scroll; for the scrollbar effect.

Rowspan for the first column.

Pretty basic CSS stuff, do you need to add functionality too or just the CSS?