Tablas
Ejemplos de tablas HTML para nuestras aplicaciones web. Hay que recordar que las tablas grandes no son buenas para diseños adaptables, para ellos deberíamos optar por otras estrategias.
Índice
- Una tabla normal y corriente
- Tabla con botones en las celdas
- Tabla centrada y con sombra
- Tabla con imágenes con modales en las celdas
- Modificando el padding de las celdas
- Ocupando el 100% del espacio disponible
Una tabla normal
Esta tabla tiene clase table. Las celdas de la última columna
tienen las clases centered bold.
Ejemplo
| Alumno | Materia | Evaluación | Nota |
|---|---|---|---|
| Perico Palotes | matemáticas | primera | 8 |
| Bartolomeo Meomeo | lengua | recuperación | 4 |
| Eva Pagudo | interpretación | primera | 6 |
| Marta Terrano | diseño web | primera | 7 |
| Alumnos evaluados: 4 | |||
Código del ejemplo
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.
Ejemplo
| 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 | |||
Código del ejemplo
Una tabla con imágenes en las celdas
Esta tabla tiene las clases tiene clases table w50 drop-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.
Se han añadido también auto-modales en las imágenes, para más información consultad el ejemplo de auto-modales.
Ejemplo
| Foto | Alumno | Materia | Nota |
|---|---|---|---|
|
Perico Palotes | primera | 8 |
|
Eva Pagudo | interpretación | 6 |
|
Pablo Moreno | programación en C | 10 |
Código del ejemplo
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
Ejemplo
| 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 | |||
Código del ejemplo
Tomando el 100% del ancho
Esta tabla tiene clases table, drop-shadow y w100.
Ejemplo
| 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 | ||||