<style type="text/css"> #tt_timetable { border-collapse: collapse; width: 100%; background-color: #ffc; box-shadow: 0 4px 6px rgba(0,0,0,0.3); } #tt_timetable td { padding: 4px; border-bottom: solid 1px #f0f0c0; } #tt_timetable .tt_time { width: 30px; text-align: right; background-color: #fcc; } #tt_timetable .tt_course { padding-left: 8px; border-left: solid 2px #777; } #tt_timetable .timenow td { background-color: #f6c; } </style> <table cellpadding="0" cellspacing="0" border="0" id="tt_timetable"> <!-- <thead> <tr> <th colspan="2"> <h1 class="tt_title">Today</h1> </th> </tr> </thead> --> <tbody> <tr> <td class="tt_time "><div data-tthour="9">09:00</div></td> <td class="tt_course ">Computer Science</td> </tr> <tr> <td class="tt_time "><div data-tthour="10">10:00</div></td> <td class="tt_course ">Computer Science</td> </tr> <tr> <td class="tt_time "><div data-tthour="11">11:00</div></td> <td class="tt_course "></td> </tr> <tr> <td class="tt_time "><div data-tthour="12">12:00</div></td> <td class="tt_course ">Lunch Time</td> </tr> <tr> <td class="tt_time "><div data-tthour="13">13:00</div></td> <td class="tt_course ">Art History</td> </tr> <tr> <td class="tt_time "><div data-tthour="14">14:00</div></td> <td class="tt_course ">Art History</td> </tr> <tr> <td class="tt_time "><div data-tthour="15">15:00</div></td> <td class="tt_course "></td> </tr> <tr> <td class="tt_time "><div data-tthour="16">16:00</div></td> <td class="tt_course ">Sport ( Basketball )</td> </tr> <tr> <td class="tt_time "><div data-tthour="17">17:00</div></td> <td class="tt_course "></td> </tr> </tbody> </table> <script type="text/javascript"> timetable(); </script>