Q:

HTML table CSS design for a "calendar"

I'm trying to create a "calendar" in a HTML Table.
Here is the code idea:
<table>
<thead>
    <tr>
        <th>21/04/2016</th>
        <th>17/08/2016</th>
        <th>22/10/2016</th>
    </tr>
    <tr>
        <th>11:00</th>
        <th>13:00</th>
        <th>18:00</th>
            <th>22:00</th>
            <th>15:00</th>
            <th>08:00</th>
                <th>19:00</th>
                <th>23:50</th>
                <th>10:00</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="checkbox" />
        </td>
        <td>
            <input type="checkbox" />
        </td>
    </tr>
</tbody>

Here is the REAL idea:

1 Date can have 3 time
The user is then able to select if he's available for any date / time
The problem is, since we add another table row for the times, they won't stay in date's column.
I guess some CSS can fix this.
But I have NO IDEA how it can be done, any hint ?

A:

You can start like this:

            table{font-family: Arial;font-size: 15px;}
            table thead{background-color: #3385e4;}
            table thead tr th{padding: 15px 10px;}
            table tbody tr td{padding: 15px 10px;text-align: center;border: 1px solid #cdcdcd;}
            table tbody tr.hours td{background-color:#d0e3fb;}
            table tbody tr.hours td.active{background-color:#d1f3d1;}
            table tbody tr td span{display: table;width: 100%;}
        <table>
            <thead>
                <tr><th colspan="9">Calendar</th></tr>
            </thead>
            <tbody>
                <tr>
                    <td colspan="3">21/04/2016</td>
                    <td colspan="3">17/08/2016</td>
                    <td colspan="3">22/10/2016</td>
                </tr>
                <tr class="hours">
                    <td class="active">
                        <span>11:00</span>
                        <input type="checkbox" checked />
                    </td>
                    <td>
                        <span>13:00</span>
                        <input type="checkbox" />
                    </td>
                    <td class="active">
                        <span>18:00</span>
                        <input type="checkbox" checked="" />
                    </td>
                    <td>
                        <span>22:00</span>
                        <input type="checkbox" />
                    </td>
                    <td>
                        <span>15:00</span>
                        <input type="checkbox" />
                    </td>
                    <td class="active">
                        <span>08:00</span>
                        <input type="checkbox" checked="" />
                    </td>
                    <td>
                        <span>19:00</span>
                        <input type="checkbox" />
                    </td>
                    <td>
                        <span>23:50</span>
                        <input type="checkbox" />
                    </td>
                    <td class="active">
                        <span>10:00</span>
                        <input type="checkbox" checked="" />
                    </td>
                </tr>
            </tbody>
        </table>

