Estilos CSS para Tablas: Diseño y Personalización Avanzada

¿Qué tal viste la maquetación para la estructura de la tabla de monedas? ¿Un poco tediosa? Puede ser, después de todo, es posible crear estas tablas directamente con CSS Grid. Pero será más divertido empezar a aplicar estilos para que se vea como en el proyecto.

¡Vamos a nuestro archivo .css!

Aplicar estilos al contenedor principal

• Lo primero es llamar la clase del contenedor principal de la tabla con main-currency-table.
• Le damos un ancho del 70% porque no lo ocupa todo.
• Limitamos el ancho mínimo de 235px y máximo de 500px.
• La damos una altura de 360px.
• Centramos el contenido con margin: 0 auto.
• Añadimos la fuente que usan las tablas con font-family: “Inter”, sans-serif.

.main-currency-table {
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    height: 360px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
}

Aplicar estilos al título

• Podríamos llamar la clase del título y empezar a aplicar estilos, sin embargo, recordemos que tenemos dos tablas con títulos distintos. Por lo tanto, conviene ser específicos y llamar primero el contenedor principal de la tabla y luego el título, de esta manera: .main-currency-table .currency-table–title.
• Separamos el título de la tabla con margin-bottom: 15px.
• Ajustamos el tamaño de fuente a 1.8rem y la tornamos negrita con bold.
• Agregamos un interlineado de 2.3rem.

.main-currency-table .currency-table--title {
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
}

Aplicar estilos al contenedor directo

• Llamamos al div que contiene la tabla con .currency-table–container.
• Le damos un ancho del 90% de su contenedor padre.
• Establecemos un ancho mínimo de 230px y un máximo de 300px.
• Ajustamos la altura en 250px.
• Centramos el contenido con margin: 0 auto.

.currency-table--container {
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}

Aplicar estilos a la tabla

• Llamamos a la etiqueta table desde su contenedor padre con .currency-table–container table.
• Le damos un ancho y alto del 100% para ocupar todo el espacio del contenedor padre.

.currency-table--container table {
    width: 100%;
    height: 100%;
}

Celdas

• Llamamos a la etiqueta td desde su contenedor padre con .currency-table–container td
• Le damos un ancho del 50% porque ocupan la mitad de espacio que las filas.
• Ajustamos el tamaño de fuente a 1.6rem y su ancho en 500.
• Agregamos un interlineado de 1.9rem.
• Cambiamos el color con la variable –grey.
• Agregamos un color de fondo con la variable –just-white.

.currency-table--container td {
    width: 50%;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: var(--grey);
    background-color: var(--just-white);
}

Este sería nuestro resultado final:

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