My Simple Calendar

A simple, table based HTML calendar

HTML

<table class="calendar">
  <tr>
    <th>Sun</th>
    <th>Mon</th>
    <th>Tue</th>
    <th>Wed</th>
    <th>Thu</th>
    <th>Fri</th>
    <th>Sat</th>
  </tr>
  <tr>
    <td>1</td>
    <td>2</td>
    <td>3</td>
    <td>4</td>
    <td>5</td>
    <td>6</td>
    <td>7</td>
  </tr>
  <tr>
    <td>8</td>
    <td>9</td>
    <td>10</td>
    <td class="selected">11</td>
    <td>12</td>
    <td>13</td>
    <td>14</td>
  </tr>
  <tr>
    <td>15</td>
    <td>16</td>
    <td>17</td>
    <td>18</td>
    <td>19</td>
    <td>20</td>
    <td>21</td>
  </tr>
  <tr>
    <td>22</td>
    <td>23</td>
    <td>24</td>
    <td>25</td>
    <td>26</td>
    <td>27</td>
    <td>28</td>
  </tr>
  <tr>
    <td>29</td>
    <td>30</td>
    <td>31</td>
    <td class="next-month">1</td>
    <td class="next-month">2</td>
    <td class="next-month">3</td>
    <td class="next-month">4</td>
  </tr>
</table>

CSS

/* https://color.adobe.com/Color-Theme-2-color-theme-7410278/edit/?copy=true&base=2&rule=Custom&selected=0&name=Copy%20of%20Color%20Theme%202&mode=rgb&rgbvalues=0.7764706015586853,0.7764706015586853,0.7764706015586853,0.529411792755127,0.5294117927551261,0.5254902243614197,0.2313725501298904,0.2313725501298896,0.2274509817361832,1,1,1,1,0.4470588266848227,0.1882352977991104&swatchOrder=0,1,2,3,4 */

table {
  background: #fff;
  border-collapse: collapse;
  color: #3B3B3A;
  font-family: 'PT Sans', sans-serif;
  font-size: 13px;
  width: 100%;
}

th,
td {
  overflow: hidden;
  width: 60px;
}

th {
  background: #3B3B3A;
  color: #C6C6C6;
  height: 30px;
}

td {
  border: 1px solid #C6C6C6;
  color: #3B3B3A;
  line-height: 22px;
  text-align: center;
  height: 60px;
}

.next-month {
  background: #eee;
}

.selected {
  background: #FF7230;
  color: #fff;
  border: 0;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .5) inset;
}