Para que el usuario vea la información de manera clara y estructutada se utilizan tablas
desde html. En este apartado se mostrarán los estilos predefinidos para las tablas
que aporta la biblioteca Bodystyle.
Desde la versión 4.0.0 se adoptaron alias para las clases que conforman los estilos
de las tablas. A continuación se generará una tabla con la compatibiladad con las clases que
provienen de versiones anteriores.
| Español |
Inglés |
| .tabla-roja |
.table-red |
| .tabla-verde |
.table-green |
| .tabla-azul |
.table-blue |
| .tabla-oscura |
.table-dark |
| .tabla-sm |
.table-sm |
| .tabla-bor-negro |
.table-bor-black |
| .tabla-bor-blanco |
.table-bor-white |
| .tabla-bor-gris |
.table-bor-grey |
| .tabla-bor-rojo |
.table-bor-red |
| .tabla-bor-verde |
.table-bor-green |
| .tabla-bor-azul |
.table-bor-blue |
| .borde-vertical |
.vertical-border |
| .tabla-responsive v4.5.0 |
.table-responsive v4.5.0 |
Tabla Modelo
A continuación se presenta una tabla modelo, definida con clases pertenecientes a otros
apartados de esta documentación, que son una forma de definir los estilos
de las tablas y aportan conocimientos de otras áreas que conforman
Bodystyle.
Recomendación:
| ID |
Apellido |
Nombre |
Estado |
| 1 |
Manzano |
Federico |
Activo |
| 2 |
Ramirez |
Ezequiel |
Inactivo |
| 3 |
Perez |
Carlos |
Activo |
| 4 |
Gonzales |
Julian |
Inactivo |
| 5 |
Gomez |
Pedro |
Activo |
| ID |
Apellido |
Nombre |
Estado |
| 1 |
Manzano |
Federico |
Activo |
| 2 |
Ramirez |
Ezequiel |
Inactivo |
| 3 |
Perez |
Carlos |
Activo |
| 4 |
Gonzales |
Julian |
Inactivo |
| 5 |
Gomez |
Pedro |
Activo |
Tabla por Default
La biblioteca tiene un estilo predefinido para las tablas con solo
agregar la biblioteca a nuestro proyecto, a partir de esto podemos obtener
el siguiente resultado:
| ID |
Descripción |
| 1 |
Mesa de cocina |
| ID |
Descripción |
| 1 |
Mesa de cocina |
En este caso, la tabla por default sólo se veria correctamente desde un fondo
blanco, si la web en cuestión es de un fondo diferente el contenido de la tabla
no sería adecuado.
Colores de Tablas
A continuación de describen las clases necesarias para colorear las tablas y mejorar
la visibilidad según el fondo del sitio en desarrollo.
Para la versión actual de la biblioteca se añadieron los alias para el nombre de las
clases en inglés.
Colores
| ID |
Descripción |
| 1 |
Mesa de cocina |
| ID |
Descripción |
| 1 |
Mesa de cocina |
| ID |
Descripción |
| 1 |
Mesa de cocina |
| ID |
Descripción |
| 1 |
Mesa de cocina |
| ID |
Descripción |
| 1 |
Mesa de cocina |
| ID |
Descripción |
| 1 |
Mesa de cocina |
| ID |
Descripción |
| 1 |
Mesa de cocina |
| ID |
Descripción |
| 1 |
Mesa de cocina |
Tabla SM
Podemos definir un estilo de tabla mas pequeña que se ajuste mejor
a la visualización en dispositivos de pantalla de tamaño reducido.
La clase encargada de realizar esto es .table-sm.
| ID |
Apellido |
Nombre |
Estado |
| 1 |
Manzano |
Federico |
Activo |
| 2 |
Ramirez |
Ezequiel |
Inactivo |
| 3 |
Perez |
Carlos |
Activo |
| 4 |
Gonzales |
Julian |
Inactivo |
| 5 |
Gomez |
Pedro |
Activo |
| ID |
Apellido |
Nombre |
Estado |
| 1 |
Manzano |
Federico |
Activo |
| 2 |
Ramirez |
Ezequiel |
Inactivo |
| 3 |
Perez |
Carlos |
Activo |
| 4 |
Gonzales |
Julian |
Inactivo |
| 5 |
Gomez |
Pedro |
Activo |
Bordes Vericales
Para añadirle bordes vericales a la tabla y definir una separación de los campos
contenidos utilizaremos la clase .borde-vertical o el alias
.vertical-border.
| ID |
Apellido |
Nombre |
Estado |
| 1 |
Manzano |
Federico |
Activo |
| 2 |
Ramirez |
Ezequiel |
Inactivo |
| 3 |
Perez |
Carlos |
Activo |
| 4 |
Gonzales |
Julian |
Inactivo |
| 5 |
Gomez |
Pedro |
Activo |
| ID |
Apellido |
Nombre |
Estado |
| 1 |
Manzano |
Federico |
Activo |
| 2 |
Ramirez |
Ezequiel |
Inactivo |
| 3 |
Perez |
Carlos |
Activo |
| 4 |
Gonzales |
Julian |
Inactivo |
| 5 |
Gomez |
Pedro |
Activo |
Bordes Superiores
Tenemos la opción de decorar la tabla con un borde superior que puede ser
de varios colores, las clases implicadas en esta acción son las siguientes:
| Español |
Inglés |
Función |
| tabla-bor-azul |
table-bor-blue |
Genera un borde azul en la parte superior de la tabla |
| tabla-bor-rojo |
table-bor-red |
Genera un borde rojo en la parte superior de la tabla |
| tabla-bor-verde |
table-bor-green |
Genera un borde verde en la parte superior de la tabla |
| tabla-bor-gris |
table-bor-grey |
Genera un borde gris en la parte superior de la tabla |
| tabla-bor-blanco |
table-bor-white |
Genera un borde blanco en la parte superior de la tabla |
| tabla-bor-negro |
table-bor-black |
Genera un borde negro en la parte superior de la tabla |
| Español |
Inglés |
Función |
| tabla-bor-azul |
table-bor-blue |
Genera un borde azul en la parte superior de la tabla |
| tabla-bor-rojo |
table-bor-red |
Genera un borde rojo en la parte superior de la tabla |
| tabla-bor-verde |
table-bor-green |
Genera un borde verde en la parte superior de la tabla |
| tabla-bor-gris |
table-bor-grey |
Genera un borde gris en la parte superior de la tabla |
| tabla-bor-blanco |
table-bor-white |
Genera un borde blanco en la parte superior de la tabla |
| tabla-bor-negro |
table-bor-black |
Genera un borde negro en la parte superior de la tabla |
Selector de Filas
El selector de filas nos va a permitir darle un color a las filas pares y otro
a las filas impares permitiendo una mejor lectura del contenido y mejorando la visualización
de la tabla.
La clase encargada de esta tarea es .selector y va incluida
dentro del conjunto de clases de la etiqueta table.
| ID |
Apellido |
Nombre |
Estado |
| 1 |
Manzano |
Federico |
Activo |
| 2 |
Ramirez |
Ezequiel |
Inactivo |
| 3 |
Perez |
Carlos |
Activo |
| 4 |
Gonzales |
Julian |
Inactivo |
| 5 |
Gomez |
Pedro |
Activo |
| ID |
Apellido |
Nombre |
Estado |
| 1 |
Manzano |
Federico |
Activo |
| 2 |
Ramirez |
Ezequiel |
Inactivo |
| 3 |
Perez |
Carlos |
Activo |
| 4 |
Gonzales |
Julian |
Inactivo |
| 5 |
Gomez |
Pedro |
Activo |
Tabla con Elementos
Hasta el momento todo lo añadido a las tablas de ejemplo
de las secciones anteriores contienen texto. En este apartado
agregaremmos elementos compuestos como por ejemplo: Botones, Checkbox, Etc.
Botones
Checkbox
Tabla Responsive v4.5.0
Es necesario en algunas oportunidades adaptar el diseño de la tabla
para que se adapte a todos los dispositivos añadiendo un scroll horizontal
para que el contenido de la tabla no sufra deformaciones.
Para lograr esto hay que envolver la tabla en una clase
.tabla-resposive.
| ID |
Apellido |
Nombre |
Estado |
Edad |
| 1 |
Manzano |
Federico |
ACTIVO
|
20 |
| 2 |
Ramirez |
Ezequiel |
INACTIVO
|
23 |
| 3 |
Perez |
Carlos |
INACTIVO
|
30 |
| 4 |
Gonzales |
Julian |
INACTIVO
|
25 |
| 5 |
Gomez |
Pedro |
INACTIVO
|
35 |