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:
table
: formato de tabla.drop-shadow
: coloca sobra arrojada alrededor de los elementos de la tabla.centered-block
: alinea en el centro horizontalmente.w50
: ocupa el 50% del ancho disponible.
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 |
---|---|---|---|
![]() |
Perico Palotes | primera | 8 |
![]() |
Eva Pagudo | interpretación | 6 |
![]() |
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:
maxi
: hace la letra más grande.centered
: alineación centrada.bold
: negrita.
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 |