Simple Calendar

SimpleCal.css

.slot {
  padding: 3px;
  text-align: center;
  border: 0;
}

.available {
  background-color: #eee;
}

.unavailable {
  background-color:#ccc;
  color: #;
    
}

.court-header {
  background-color:#666;
  color:white;
}

.timeSlots {
  border: 0;
  background-color:transparent;
  border: 0;
  width:80%;
  border-collapse:collapse;
/*   border-radius: 100px */
} 

SimpleCal.html

<div>
  <table class="timeSlots">

      <tr>
        <td class="slot available"><a href="#">Sun</a></td>
        <td class="slot available"><a href="#">Mon</a></td> 
        <td class="slot available"><a href="#">Tue</a></td>
        <td class="slot available"><a href="#">Wed</a></td>
        <td class="slot available"><a href="#">Thrs</a></td>
        <td class="slot available"><a href="#">Fri</a></td>
        <td class="slot available"><a href="#">Sat</a></td>
      </tr>
  </table>
</div>


<div class="day-view">
  <h2>Monday March 24</h2>

  <table border="1" class="timeSlots">
  <tr class="court-header">
  <th>Court 1</th><th style="padding:3px;">Court 2</th>
  </tr>
  <tr>
     <td class="slot unavailable">8:30am</td>    <td class="slot available"><a href="#">8:30am</a></td>
  </tr>
  <tr>
  <td class="slot available"><a href="#">9:00am</a></td>    <td class="slot unavailable">9:00am</td>
  </tr>
    <tr>
      <td class="slot available"><a href="#">9:30am</a></td>    
      <td class="slot available"><a href="#">9:30am</a></td>
    </tr>
    <tr>
      <td class="slot available"><a href="#">10:00am</a></td>    
      <td class="slot available"><a href="#">10:00am</a></td>
    </tr>

    <tr>
      <td class="slot available"><a href="#">10:30am</a></td>    
      <td class="slot available"><a href="#">10:30am</a></td>
    </tr>

    <tr>
      <td class="slot available"><a href="#">11:00am</a></td>    
      <td class="slot available"><a href="#">11:00am</a></td>
    </tr>

    <tr>
      <td class="slot available"><a href="#">12:00pm</a></td>    
      <td class="slot available"><a href="#">12:00pm</a></td>
    </tr>

    <tr>
      <td class="slot available"><a href="#">12:30pm</a></td>    
      <td class="slot available"><a href="#">12:30pm</a></td>
    </tr>
    <tr>
      <td class="slot available"><a href="#">1:00pm</a></td>    
      <td class="slot available"><a href="#">1:00pm</a></td>
    </tr>

  </table>
</div>