Estilos CSS para Tablas de Monedas en HTML

El diseño de la tabla tienen una apariencia bastante similar a la original. Nos faltan algunos detalles como redondear las esquinas, colores al texto y los íconos. Tienes razón.

Entonces, ¡agreguemos esos estilos!

Cómo agregar bordes de la tabla

¿Recuerdas que creamos clases específicas para los botones situados en las esquinas? Pues es momento de llamarlos.

• Empezemos por el lado izquierdo de la tabla, y lo llamamos desde su contenedor con .currency-table–container .table__top-left.
• Le agregamos un border-radius: 15px 0 0 0 en donde cada una de las cuatro posiciones representa una esquina de la caja que estamos estilando: esquina superior izquierda, esquina superior derecha, esquina inferior derecha y esquina inferior izquierda, respectivamente.
• Aplicamos estos valores a cada una de las esquinas.

.currency-table--container .table__top-left {
    border-radius: 15px 0 0 0;
}
.currency-table--container .table__top-right {
    border-radius: 0 15px 0 0;
}
.currency-table--container .table__bottom-left {
    border-radius: 0 0 0 15px;
}
.currency-table--container .table__bottom-right {
    border-radius: 0 0 15px 0;
}

Cómo aplicar texto de precios

• Llamamos la clase que aplicamos a todos los textos de la columna derecha con .currency-table–container .table__right.
• Ajustamos su tamaño a 1.4rem y le damos un ancho normal.
• Agregamos un interlineado de 1.7rem.
• Ajustamos el color usado en el diseño #757575.

.currency-table--container .table__right {
    font-size: 1.4rem;
    font-weight: normal;
    line-height: 1.7rem;
    color: #757575;
}

Cómo agregar íconos

Observando el diseño, nos damos cuenta que hay dos tipos de flechas: hacia arriba y abajo. Entonces tenemos que dividir y aplicar a las etiquetas span estas dos clases: up y down.

• Llamamos a las etiquetas span con su clase desde el contenedor de la tabla con .currency-table–container .down.
• Usamos display: inline-block para mantener el ícono en la misma línea que el texto.
• Le damos un ancho y alto de 15px.
• Agregamos un margin-left: 10px para separarlo del texto.
• Llamamos la imagen desde su dirección con ***background-image: url("")***.
• Ajustamos su tamaño al del contenedor con cover, lo centramos y especificamos que no se repita la imagen.
• Aplicamos los mismos estilos para la clase .currency-table–container .up. Sólo cambiamos la url del ícono.

.currency-table--container .down {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url("./assets/icons/trending-down.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.currency-table--container .up {
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url("./assets/icons/trending-up.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

Este sería nuestro resultado en pantalla:

Genial, ¿no? Ahora solo falta que apliques lo mismo a la otra tabla que falta. Recuerda que no hay una sola manera de lograrlo, sino tantas como programadores hay. Lo importante es que lo intentes. Verás que es muy sencillo.

Contribución creada por: José Miguel Veintimilla (Platzi Contributor).