Tablas

LIBP-0241 (Libro de pautas)

Personalización de las tablas de datos para la SGISI

Pautas

TítuloCarácter
BordesObligatoria
CabeceraObligatoria
Fila seleccionadaObligatoria
Colores filas consecutivasObligatoria
Ubicación enlacesObligatoria

Bordes

Eliminar los bordes de las tablas de datos.

Cabecera

Utilizar el color #666666 para el texto de las cabeceras y el color #DFDFDF para el fondo.

Ejemplo de uso:

Código html:

<table class="listado>
...
<th>Columna 002</th>
...
</table>

Código CSS:

.listado th {
  background-color: #DFDFDF;
  color: #666666;
}

Fila seleccionada

Poner en negrita el texto de la fila seleccionada.

Ejemplo de uso:

Código html:

<table class="listado">
  <tr class="seleccionada">
  <td>Fila seleccionada</td>
  ...
  </tr>
  ...
</table>

Código CSS:

.listado tr.seleccionada td {
  background-color: #E7F0E1;
  font-weight: bold;

Colores filas consecutivas

Alternar los colores de fondo blanco y #F4F4F4 en las filas de las tablas de datos, comenzando por el blanco.

Para diferenciar mejor las distintas filas de las tablas de datos se alterna con dos colores de fondo, comenzando la primera fila de la tabla con el blanco.

Ubicación enlaces

Colocar los enlaces para imprimir y exportar un listado encima del mismo y los enlaces de la paginación debajo.