Basic Timetable

<style>

  /* Customisable styles */
  body {
      
      --weekday-font-family: var(--main-font-family);
      --weekday-font-size: 16px;
      --weekday-font-color: var(--main-font-color);
      --weekday-background-color: var(--more-accented-background-color);
      --weekday-cell-height: 35px;
      
      --time-column-font-family: var(--main-font-family);
      --time-column-font-size: 15px;
      --time-column-font-color: var(--main-font-color);
      --time-column-background-color: var(--more-accented-background-color);
      --time-column-width: 40px;
      
      --timetable-border-color: var(--main-background-color);
      --timetable-border-size: 5px;
      
      --event-block-font-family: var(--main-font-family);
      --event-block-font-size: 17px;
      --event-block-font-color: #fff;
      --empty-block-color: var(--accented-background-color);
      
      --day-column-width: 150px;
      --block-height: 35px;
      --timetable-width-percentage: 80%;
      
  }
  
  
  .schedule-cell {
      height: var(--block-height);
      background-color: var(--empty-block-color);
      border: var(--timetable-border-size) solid var(--timetable-border-color);
      vertical-align: middle;
      text-align: center;
      font-size: var(--event-block-font-size);
      font-family: var(--event-block-font-family);
      color: var(--event-block-font-color);
  }
  .schedule-heading {
      height: var(--weekday-cell-height);
      background-color: var(--weekday-background-color);
      font-family: var(--weekday-font-family);
      width: var(--day-column-width);
      text-align: center;
      border: var(--timetable-border-size) solid var(--timetable-border-color);
      font-size: var(--weekday-font-size);
      color: var(--weekday-font-color);
  }
  .schedule-time {
      height: var(--block-height);
      background-color: var(--time-column-background-color);
      font-family: var(--time-column-font-family);
      font-size: var(--time-column-font-size);
      color: var(--time-column-font-color);
      width: var(--time-column-width);
      text-align: center;
      border: var(--timetable-border-size) solid var(--timetable-border-color);
  }
  /* First table cell on top-left */
  .schedule-corner {
      border: var(--timetable-border-size) solid var(--timetable-border-color);
      width: var(--time-column-width);
      background-color: var(--weekday-background-color);
      height: var(--weekday-cell-height);
  }
  #timetable {
      height: 100%;
      width: 100%;
      padding: 0px;
      margin: 0px;
  }
  #schedule-wrapper {
      margin-left: auto;
      margin-right: auto;
      width: var(--timetable-width-percentage);
  }
  
</style>

<div id="schedule-wrapper"> </div>