LogIn
FastLight Logo

Ejemplo de tables en FastLight Framework

  • Inicio
  • Ejemplos de maquetación
  • GitHub
  • Test de CSS: tablas

    Pruebas del estilo de las tablas, que se encuentra en el fichero base.css.

    Una tabla normal

    Esta tabla tiene clase table. Las celdas de la última columna tienen las clases centered bold.

    Alumno Materia Evaluación Nota
    Perico Palotes matemáticas primera 8
    Bartolomeo Meomeo lengua recuperación 4
    Eva Pagudo interpretación primera 6
    Pablo Moreno programación en C primera 10
    Marta Terrano diseño web primera 7
    Alumnos evaluados: 5

    Una tabla con botones

    Esta es una tabla con botones en el interior de algunas de las celdas. Tiene las clases table y box-shadow. Los botones tienen clases: button, button-light, button-success, button-warning y button-danger.

    Alumno Materia Operaciones
    Perico Palotes matemáticas
    Bartolomeo Meomeo lengua
    Eva Pagudo interpretación
    Pablo Moreno programación en C
    Marta Terrano diseño web
    Alumnos: 5

    Una tabla sombreada y centrada en la página

    Esta tabla tiene clases:

    Alumno Materia Evaluación Nota
    Perico Palotes matemáticas primera 8
    Bartolomeo Meomeo lengua recuperación 4
    Eva Pagudo interpretación primera 6
    Pablo Moreno programación en C primera 10
    Marta Terrano diseño web primera 7
    Alumnos evaluados: 5

    Una tabla con imágenes en las celdas

    Esta tabla tiene las clases tiene clases table w50 box-shadow centered-block y dispone de celdas con imágenes en la primera columna. A las imágenes les podemos añadir la clase table-image.

    Foto Alumno Materia Nota
    FastLight Perico Palotes primera 8
    GitHub Eva Pagudo interpretación 6
    LinkedIn Pablo Moreno programación en C 10

    Más padding en las celdas

    Esta tabla tiene clases table, w50 y big-cell (aumenta el padding de las celdas). Las celdas de la última columna tienen las clases:

    Y una de éstas: success, warning o danger

    Alumno Materia Evaluación Nota
    Perico Palotes matemáticas primera 8
    Bartolomeo Meomeo lengua recuperación 4
    Eva Pagudo interpretación primera 6
    Pablo Moreno programación en C primera 10
    Marta Terrano diseño web primera 7
    Alumnos evaluados: 5

    Tomando el 100% del ancho

    Esta tabla tiene clases table y w100.

    Alumno Materia Evaluación Nota Operaciones
    Perico Palotes matemáticas primera 8
    Bartolomeo Meomeo lengua recuperación 4
    Eva Pagudo interpretación primera 6
    Pablo Moreno programación en C primera 10
    Marta Terrano diseño web primera 7
    Alumnos evaluados: 5

    Fin del ejemplo tables

    Lista de ejemplos.

    FastLight Framework, versión 1.8.3