1

Hola un pregunta sobre diseño estoy en cero en diseño; quiero lograr esto en mi tabla html

Actualemnte esta asi: introducir la descripción de la imagen aquí

ESTE ES EL RESULTADO FINAL QUE LE QUIERO DAR "SEMAFORO DOCENTE" Y "SEMAFORO ALUMNO" EN LA TABLA

introducir la descripción de la imagen aquí

este es mi codigo de la tabla :

<div class="box-body">
    <table id="tabla_asistencias"
        class="table table-bordered table-condensed table-hover responsive"
            cellspacing="0" width="100%">
              <thead>
                <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>

3
  • 2
    ¿Qué forma le quieres dar? Con lo que tienes puesto en la pregunta, no queda muy claro qué es lo que estás buscando hacer (el resultado final). Sé más específico
    – Alvaro Montoro
    Commented el 19 may. 2017 a las 21:50
  • ¿Qué más le falta? Commented el 19 may. 2017 a las 21:51
  • le quiero dar la forma de la imagen Commented el 19 may. 2017 a las 21:51

2 respuestas 2

2

Siguiendo el ejemplo de @Franklin'j de esta forma intervienes un poco menos en la tabla que ya tienes hecha:

<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>

Puedes ver como queda aquí.

1

Esto es lo que se me ocurre a mi

    <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>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.