Introducción a CSS

15.11. Ejercicio 11

Determinar las reglas CSS necesarias para mostrar la siguiente tabla con el aspecto final mostrado en la imagen (modificar el código HTML que se considere necesario añadiendo los atributos class oportunos).

Tabla original:

Aspecto original de la tabla

Figura 15.17 Aspecto original de la tabla

Tabla final:

Aspecto definitivo de la tabla después de aplicar estilos CSS

Figura 15.18 Aspecto definitivo de la tabla después de aplicar estilos CSS

1) Alinear el texto de las celdas, cabeceras y título. Definir los bordes de la tabla, celdas y cabeceras (color gris oscuro #333):

Tabla con texto alineado y bordes

Figura 15.19 Tabla con texto alineado y bordes

2) Formatear las cabeceras de fila y columna con la imagen de fondo correspondiente en cada caso (fondo_gris.gif, euro.png, dolar.png, yen.png, libra.png). Modificar el tipo de letra de la tabla y utilizar Arial. El color azul claro es #E6F3FF.

Tabla con colores e imágenes de fondo

Figura 15.20 Tabla con colores e imágenes de fondo

3) Mostrar un color alterno en las filas de datos (color amarillo claro #FFFFCC).

Tabla con colores de fila alternos

Figura 15.21 Tabla con colores de fila alternos

Descargar página HTML

Descargar imagen fondo_gris.gif, Descargar imagen euro.png, Descargar imagen dolar.png, Descargar imagen yen.png, Descargar imagen libra.png

Ver solución