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>