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 | ||||