Recreating the schedule in the image using HTML, CSS, or Javascript

The schedule I want to recreate

I need help creating a schedule using CSS, HTML, and Javascript. I'm having trouble aligning three blank table cells for the 7:00-8:00 time period with the cells on Tuesday, Wednesday, Thursday, and Friday.

This is my code:

th {  border: none;  color: black; /* Text color */  padding: 8px;  text-align: center;}.cell1 {  background-color: #006400; /* Green */}.cell1wd1 {  height: 2px;  width: 20px;  padding: 2px 4px; /* Adjust top and bottom padding */  font-size: 10px; /* Adjust font size if needed */  white-space: nowrap; /* Prevent text wrapping */}.cell2 {  background-color: #ffbec8; /* Green */}.cell3 {  background-color: #808080; /* Green */}

HTML:

<table cellspacing="1"><thead><tr><th>Time</th><th class="cell1">Monday</th><th class="cell2">Tuesday</th><th class="cell3">Wednesday</th><th class="cell1">Thursday</th><th class="cell2">Friday</th></tr></thead><tbody><tr><td>7:00 - 8:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>8:00 - 9:00</td><td></td><td></td><td></td><td></td><td></td></tr><tr><td>9:00 - 10:00</td><td class="cell1">CMSC 132</td><td></td><td></td><td></td><td></td></tr></tbody></table>