Timeline
table{
    width: 100%;
    padding: 0;
    padding: 0;
    margin: 0;
    border-collapse: collapse;
}
table td, table th {
    padding: 0.3em;
    margin: 0;
}
table td.empty, table th.empty {
    border: 0;
    background: transparent;
}
table th {
    background: #000;
    color: #FFF;
}
table th, table td.task {
    text-align: left;
    border: 1px solid #000;
}
table td.task {
    width: 20%;
}
table td.day {
    width: 6.25%;
    background: #CCC;
    border: 1px solid #000;
}
table td div {
    height: 20px;
    padding: 0.3em;
}
tablev tr.alt {
    background: #F4F4F4;
}
div.task1 {
    background: #C2CAEF;
    width: 25%;
    margin-left: 5%;
}
div.task2 {
    background: #FFAFAF;
    width: 35%;
    margin-left: 20%;
}
div.task3 {
    background: #C7DFB5;
    width: 45%;
    margin-left: 30%;
}
<table>
 
<tr>
    <th colspan="6">Week 13</th>
    <th colspan="7">Week 14</th>
    <th colspan="3">Week 15</th>
</tr>
 
<tr>
 
    <td class="day">T4</td>
    <td class="day">W5</td>
    <td class="day">T6</td>
    <td class="day">F7</td>
    <td class="day">S8</td>
    <td class="day">S9</td>
 
    <td class="day">M10</td>
    <td class="day">T11</td>
    <td class="day">W12</td>
    <td class="day">T13</td>
    <td class="day">F14</td>
    <td class="day">S15</td>
    <td class="day">S16</td>
 
    <td class="day">M17</td>
    <td class="day">T18</td>
    <td class="day">W19</td>
 
</tr>
 
<tr class="alt">
 
    <td colspan="16" class="taskbar"><div class="task1">Task 1 (Chris)</div></td>
 
</tr>
 
<tr>
 
    <td colspan="16" class="taskbar"><div class="task2">Task 2 (Steve)</div></td>
 
</tr>
 
<tr class="alt">
 
    <td colspan="16" class="taskbar"><div class="task3">Task 3 (Dave)</div></td>
 
</tr>
 
</table>
Unless otherwise stated, the content of this page is licensed under Creative Commons Attribution 3.0 License