Menú

Tablas

Estilos generales para estilar tablas. Las tablas heredan el color de fondo de su contenedor que en general siempre será gris claro. Por ejemplo si el contenedor de la tabla es un div con la clase bg-grey-light, al poner dentro una tabla tendrá este color.

Al tratarse de una solución global, se disponen a continuación ejemplos, porque no se pueden abarcar en GEF todas las casuísticas o necesidades posibles en las que se puede usar una tabla.

Tabla con borders en cabecera y pie

Los estilos para una tabla se obtienen aplicando la clase .table a una tabla. Para aplicar bordes en cabecera se aplica la clase .table__header al elemento thead y .table__footer al elemento tfoot.

Tabla con bordes en cabecera y pie

Lorem	Ipsum	Lorem	Ipsum
auctor	60	auctor	60
Mneque...	42	Mneque...	42
MVivamus...	18	MVivamus...	18
egestas	120	egestas	120
neque	120	neque	120
ornare rhoncus	120	ornare rhoncus	120
Lottoo	240	Total	240

<div class="bg-grey-light">
    <table class="table">
        <thead class="table__header">
            <tr>
                <th scope="col">Lorem</th>
                <th scope="col">Ipsum</th>
                <th scope="col">Lorem</th>
                <th scope="col">Ipsum</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>auctor</td>
                <td>60</td>
                <td>auctor</td>
                <td>60</td>
            </tr>
            <tr>
                <td>Mneque...</td>
                <td>42</td>
                <td>Mneque...</td>
                <td>42</td>
            </tr>
            ...
        </tbody>
        <tfoot class="table__footer">
            <tr>
                <td><b>Lottoo</b></td>
                <td><b>240</b></td>
                <td><b>Total</b></td>
                <td><b>240</b></td>
            </tr>
        </tfoot>
    </table>
</div>

Se puede aplicar la clase .td--narrow al elemento thead th deseado para hacer la columna estrecha. Esta clase se usa para poder crear por ejemplo tablas de asignaturas y créditos.

Si necesitamos anidar datos se puede aplicar la clase .td--nested a un elemento td para aplicar una indentación al texto de la celda.

Tabla con columna estrecha

Concepto	Cantidad
auctor	60
- Mneque...	42
- MVivamus...	18
egestas	120
neque	120
ornare rhoncus	120
Total	240

<div>
    <table class="table">
        <thead class="table__header">
            <tr>
                <th scope="col">Concepto</th>
                <th class="td--narrow align-center" scope="col">Cantidad</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>auctor</td>
                <td class="align-center" >60</td>
            </tr>
            <tr>
                <td class="td--nested"><em>- Mneque...</em></td>
                <td class="align-center">42</td>
            </tr>
            <tr>
                <td class="td--nested"><em>- MVivamus...</em></td>
                <td class="align-center">18</td>
            </tr>
            ...
        </tbody>
        <tfoot class="table__footer">
            <tr>
                <td><b>Total</b></td>
                <td class="align-center"><b>240</b></td>
            </tr>
        </tfoot>
    </table>
</div>

Tabla con bordes en cada fila

Para aplicar bordes en cada fila, se añade la clase .table--borders a table.

Tabla con bordes en cada fila

Nombre	Apellido
Lorem	Ipsum
Lorem	Ipsum
Lorem	Ipsum

<div>
    <table class="table table--borders">
        <thead class="table__header">
            <tr>
                <th scope="col">Nombre</th>
                <th scope="col">Apellido</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Lorem</td>
                <td>Ipsum</td>
            </tr>
            <tr>
                <td>Lorem</td>
                <td>Ipsum</td>
            </tr>
            <tr>
                <td>Lorem</td>
                <td>Ipsum</td>
            </tr>
        </tbody>
    </table>
</div>

Tablas responsive

Podemos envolver cualquier tabla con la clase .table-responsive para provocar un scroll horizontal cuando no haya suficiente espacio para mostrar la tabla completa.

Es necesario el atributo tabindex="0" para mejorar la accesibilidad

Tabla responsive

Explicación de lo que hace la tabla
Concepto	Cantidad	Extra 1	Extra 2	Extra 3	Extra 4
auctor	60	E	E	E	E
Mneque...	42	E	E	E	E
MVivamus...	18	E	E	E	E
egestas	120	E	E	E	E
neque	120	E	E	E	E
ornare rhoncus	120	E	E	E	E
Total	240	-	-	-	-

<div class="table-responsive" tabindex="0">
    <table class="table">
        <thead class="table__header">
            <tr>
                <th scope="col">Concepto</th>
                <th class="align-center" scope="col">Cantidad</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>auctor</td>
                <td class="align-center">60</td>
            </tr>
            <tr>
                <td>Mneque...</td>
                <td class="align-center">42</td>
            </tr>
            <tr>
                <td>MVivamus...</td>
                <td class="align-center">18</td>
            </tr>
            <tr>
                <td>egestas</td>
                <td class="align-center">120</td>
            </tr>
            ...
        </tbody>
        <tfoot class="table__footer">
            <tr>
                <td><b>Total</b></td>
                <td class="align-center"><b>240</b></td>
            </tr>
        </tfoot>
    </table>
</div>

Tabla con filtros y ordenación

Para transformar dinámicamente una tabla de datos en una tabla de datos con filtros y ordenación, se ha de añadir dicha tabla dentro de un div con el atributo data-dynamic-table-wrapper.

Con esto conseguiremos que la tabla se monte con los estilos necesarios y además podremos configurar las cabeceras de dicha tabla, para modificar su comportamiento.

Para hacer que una columna sea ordenable, se ha de añadir el atributo data-only-sort-enabled al th de esa columna.

Para hacer que una columna sea filtrable y ordenable, se debe añadir el atributo data-filters-enabled al th de dicha columna.

Además, si alguna de las columnas tiene valores multiples, debemos añadir a dicha columna el atributo data-span-values-enabled y además, dentro en las celdas con múltiples valores, debemos separar dichos valores con elementos span.

Si hay alguna columna con filtros y con elementos html invisibles que no deberían verse en el título de lamodal debemos predefinir el atributo data-table-column-key con el título de dicha columa. Ejemplo en la columna "Favourite color"

Ordenación y filtrado de tablas

Explicación de lo que hace la tabla
Nombre	Apellido	Cargo	Genero	País	Color favoritoEste texto solo está disponible para los lectores de pantalla
Belicia	Hanwright	Especialista en alcance comunitario	Femenino	Estados Unidos de América	Caqui
Britta	Boldt	Secretaria ejecutiva	Femenino Masculino	Filipinas	Índigo
Cristin	Aisthorpe	Trabajadora social	Femenino	Filipinas	Granate
Mozes	Bome	Coordinador de cuentas	Masculino	Tunez	Pardo rojizo
Kienan	Moreside	Contador III	Masculino	Indonesia	Naranja
Hendrik	Cracoe	Ingeniero III	Masculino	China	Malva
Angel	Arbuckel	Contadora fiscal		Indonesia	Rosa
Gawen	Karlqvist	Diseñador Web IV	Masculino	China	Amarillo
Stanislaus	Hulland	Ingeniero geologico	Masculino	Mongolia	Verde turquesa
Garald	Klemensiewicz	Coordinador de cuentas	Masculino	Russia	Aguamarina

<div class="table-responsive" data-dynamic-table-wrapper tabindex="0">
    <table>
      <caption class="visually-hidden">Explicación de lo que hace la tabla</caption>
      <thead>
        <tr>
          <th data-filters-enabled scope="col">Nombre</th>
          <th data-only-sort-enabled scope="col">Apellido</th>
          <th data-filters-enabled scope="col"><span>Cargo</span></th>
          <th data-filters-enabled data-span-values-enabled scope="col">Genero</th>
          <th data-only-sort-enabled aria-label="País" scope="col">País</th>
          <th data-filters-enabled data-table-column-key="Color favorito" scope="col">
            Color favorito
            <span class="visually-hidden">Este texto solo está disponible para los lectores de pantalla</span>
          </th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>Belicia</td>
          <td>Hanwright</td>
          <td>Especialista en alcance comunitario</td>
          <td>Femenino</td>
          <td>Estados Unidos de América</td>
          <td><a href="https://www.colorhexa.com/c3b091">Caqui</a></td>
        </tr>
        <tr>
          <td>Britta</td>
          <td>Boldt</td>
          <td>Secretaria ejecutiva</td>
          <td><ul><li><span>Femenino</span></li><br><li><span>Masculino</span></li></ul></td>
          <td>Filipinas</td>
          <td><a href="https://www.colorhexa.com/4b0082">Índigo</a></td>
        </tr>
        ...
      </tbody>
    </table>
  </div>

Subir