Shaping a board with bootstrap and html

Following the example of @ Franklin'j in this way you intervene a little less in the table you have already made:

<div class="box-body">
    <table id="tabla_asistencias"
        class="table table-bordered table-condensed table-hover responsive"
            cellspacing="0" width="100%">
              <thead>
                <tr>
                  <th colspan="2">Mostrar... Registros</th>  <!-- En este th va el input para números que tienes -->
                  <th colspan="4" style="text-align:center">Semáforo docente</th>
                  <th colspan="4" style="text-align:center">Semáforo alumno</th>
                </tr>
                <tr>
                 <th class="text-center">Fecha</th>
                 <th class="text-center">turno</th>
                 <th class="text-center">Total docentes</th>
                 <th class="text-center">Docentes Asistentes</th>
                 <th class="text-center">Docentes faltantes</th>
                 <th class="text-center">Semaforo</th>
                 <th class="text-center">Total alumnos</th>
                 <th class="text-center">Alumnos Asistentes</th>
                 <th class="text-center">Alumnos faltantes</th>
                 <th class="text-center">Semaforo</th>
                 <th class="text-center">fecha registro</th>
                 <th class="text-center" style="width: 10%;">Reporte</th>
               </tr>
            </thead>
         <tbody>
       </tbody>
    </table>
  </div>

You can see how it looks here .

This is what I think of my     

    <thead>
        <th colspan="2"></th>
        <th colspan="4">Semaforo docente</th>
        <th colspan="4">Semaforo alumno</th>
        <th colspan="2"></th>
    </thead>
    <tbody>
        <tr>
            <th class="text-center">Fecha</th>
            <th class="text-center">turno</th>
            <th class="text-center">Total docentes</th>
            <th class="text-center">Docentes Asistentes</th>
            <th class="text-center">Docentes faltantes</th>
            <th class="text-center">Semaforo</th>
            <th class="text-center">Total alumnos</th>
            <th class="text-center">Alumnos Asistentes</th>
            <th class="text-center">Alumnos faltantes</th>
            <th class="text-center">Semaforo</th>
            <th class="text-center">fecha registro</th>
            <th class="text-center" style="width: 10%;">Reporte</th>
        </tr>
        <tr>
            <td>data1</td>
            <td>data2</td>
            <td>data3</td>
            <td>data4</td>
            <td>data5</td>
            <td>data6</td>
            <td>data7</td>
            <td>data8</td>
            <td>data9</td>
            <td>data10</td>
            <td>data11</td>
            <td>data12</td>
        </tr>
    </tbody>
</table>