<div id="writing-mode">
  <h3>Time Table</h3>
  <table>
    <tr>
      <th style="width:20px"> </th>
      <th>1</th>
      <th>2</th>
      <th>3</th>
      <th>4</th>
      <th>5</th>
      <th>6</th>
      <th>7</th>
      <th>8</th>
    </tr>
    <tr>
      <th>Monday</th>
      <td contenteditable=true>
        <img src=//bit.ly/2aYd2fM>
      </td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true>
        <img src=//bit.ly/2bv2i52>
      </td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
    </tr>
    <tr>
      <th>Tuesday</th>
      <td contenteditable=true><img src=//bit.ly/2bv2i52></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true>
        <img src=//bit.ly/2boHErt>
      </td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true>
        <img src=//bit.ly/2b31RAU>
      </td>
    </tr>
    <tr>
      <th>Wednesday</th>
      <td contenteditable=true>
        <img src=//bit.ly/2boHErt>
      </td>
      <td contenteditable=true>
        <img src=//bit.ly/2boHErt>
      </td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
    </tr>
    <tr>
      <th>Thursday</th>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true>
        <img src=//bit.ly/2aYd2fM>
      </td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
    </tr>
    <tr>
      <th>Friday</th>
      <td contenteditable=true></td>
      <td contenteditable=true>
        <img src=//bit.ly/2b31RAU>
      </td>
      <td contenteditable=true>
        <img src=//bit.ly/2boHErt>
      </td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true></td>
      <td contenteditable=true>
        <img src=//bit.ly/2bv2i52>
      </td>
    </tr>
  </table>
</div>
<div id=credit>
  <strong>Image credits:</strong> 
  <a href=//www.ymbproperties.com target=_blank>YMB Properties</a>
  , via <a href=//www.iconfinder.com target=_blank>Iconfinder</a>.
</div>

table tr:not(:first-child) th 
{
  -webkit-writing-mode: vertical-rl;
  -ms-writing-mode: tb-rl;
  writing-mode: vertical-rl;
  display: inline-block;
}
table 
{
  table-layout: fixed;
  border-collapse: collapse;
}
th 
{
  padding: 6px;
}
#writing-mode img {
  width: 35px;
}
td 
{
  width: 40px;
  border: 1px dotted black;
}
tr:nth-child(2) th 
{
  background: #69D2E7;
}
tr:nth-child(2) td 
{
  background: #A7DBD8;
}
tr:nth-child(3) td 
{
  background: #F1D4AF;
}
tr:nth-child(3) th 
{
  background: #E08E79;
}
tr:nth-child(4) td 
{
  background: #CFF09E;
}
tr:nth-child(4) th 
{
  background: #79BD9A;
}
tr:nth-child(5) td 
{
  background: #D5DED9;
}
tr:nth-child(5) th 
{
  background: #99B2B7;
}
tr:nth-child(6) td 
{
  background: #EBE3AA;
}
tr:nth-child(6) th 
{
  background: #CAD7B2;
}
body
{
  font-family: courier new;
}
#credit 
{
  background: ivory;
  border-left: 6px skyblue solid;
  font-size: 14px;
  margin: 12px 0;
  padding: 6px;
}