Estilos CSS para Tablas y Herencia de Fuentes

Clase 17 de 32 • Curso de Responsive Design: Maquetación Mobile First

Resumen

¿Cómo te fue detallando los estilos de tabla de monedas? Seguro lo hiciste genial. Ya casi llegamos al final de esta sección de tablas. ¿Te diste cuenta que sólo nos falta el texto de actualización? Lo más complicado ya ha pasado, así que vamos a ello.

Cómo agregar estilos

Primero le damos un ancho de 190px y alto de 30px para que exista el espacio.
Lo centramos con margin: 0 auto.
Lo separamos de la tabla con margin-top: 15px.
Creamos un espaciado interno con padding: 8px.
Ajustamos su color de fondo con la variable –soft-orange.
Redondeamos los bordes con border-radius: 8px.
Para darle estilos al texto llamamos la etiqueta p desde el contenedor de la tabla con .currency-table–date p.
Ajustamos su tamaño a 1.2rem y le damos un interlineado de 1.5rem.
Por último, le cambiamos el color con la variable –warm-black.

.currency-table--date {
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.currency-table--date p {
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}

Este sería el resultado:

Y de esta manera, hemos terminado la primera sección del proyecto. ¡Muy bien!

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

Marianna Guedez

student•

Hice un ligero cambio a las tablas, implementé CSS GRID

Juan Cruz

student•

Te quedo muy bueno!!

Marianna Guedez

student•

Gracias jjuantech

Leonardo de los angeles Espinoza Hernandez

student•

Un par de aportes a la clase Para evitar el desbordamiento del texto podemos usar width: max-content;

Para evitar sobrescribir estilos en la misma clase podemos ahorrarnos lineas haciendo margin: 15px auto 0 en lugar de

margin: 0 auto;
margin-top: 15px;

Y la clase quedaría de la siguiente forma :D

.currency-table--date{
  width: max-content;
  height: 30px;
  margin: 15px auto 0;
  padding: 8px;
  background-color: var(--soft-orange);
  border-radius: 8px;
}

Espero les sirva mi aporte

Eduardo Pérez Suárez

student•

Hola Leo, gracias, me ayudaste con el max-content. Busque un poco mas sobre la propiedad y dice que define el ancho del contenido de acuerdo al tamaño de la caja que lo contenga , ósea su padre. Esta genial por que se acomodara acorde a su padre, y eso lo hace ideal para que sea adaptable.

Fabio Gomez

student•

Gracias por la ayuda amigo!

Camilo Andrés Páez Escobar

student•

Acá esta mi versión con perritos de raza! Saludos!

Juan Christopher

student•

Esta molona :D

Luis Blas

student•

Tengo curiosidad de cómo lograste el doble borde exterior y que pares a más grueso el color negro.

Luis José Cruz Martínez

student•

Reto logrado, todo con Puro CSS

Never stop learning :)

Nicolas Conde Salazar

student•

¿Cómo lo hiciste?

Andrés Gómez

student•

Usaste JS o solo CSS?, y si es con solo CSS pásame el código porfa o súbelo a tu repositorio de GitHub para poder detallarlo mucho mejor porfa

Ivan Daniel Cuevas

student•

Reto cumplido con CSS GRID.

HTML

          <div class="main-commission-table" >
            <p class="commission-table--title">Comisiones</p>
            <div class="commission-table--container">
              <div class="commission-table--item">
                <p>Bitrade</p>
              </div>
              <div class="commission-table--item">
                <p class="table__price">$ 12.96</p>
              </div>
              <div class="commission-table--item">
                <p>Bitpreco</p>
              </div>
              <div class="commission-table--item">
                <p class="table__price">$ 13.07</p>
              </div>
              <div class="commission-table--item">
                <p>Novadax</p>
              </div>
              <div class="commission-table--item">
                <p class="table__price">$ 13.15</p>
              </div>
              <div class="commission-table--item">
                <p>Coinext</p>
              </div>
              <div class="commission-table--item">
                <p class="table__price">$ 14.96</p>
              </div>
            </div>
            <div class="commission-table--date">
              <p> <b>Actualizado:</b>  19 Julio 23:48</p>
            </div>
          </div>

CSS Como varios de los estilos se repiten no los coloque acá. Esta el CSS que necesite para hacer la tabla.

.commission-table--container {
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  height: 250px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  background-color: var(--just-white);
  border-radius: 15px;
}
.commission-table--item {
  display: flex;
  justify-content: center;
  align-items: center;
  border: 1px solid var(--off-white);
}
.commission-table--item p {
  margin: 0;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: var(--grey);
}
.commission-table--date {
  background-color: var(--soft-blue);
}```

Victor Andres Castillo Zambrano

student•

genial

Juan Christopher

student•

Exelente.

Jesus Federico David Herrera

student•

Reto cumplido usando CSS GRID

Juan Jose Hernandez Garcia

student•

las dos las hiciste con grid, o una con tables y otra con grid? XD

Luis E. Gama Ramirez

student•

El actualizado de la segunda tabla la hiciste en rosa, no el azul :P

Agustina Corvo

student•

Las flechitas y las interacciones para cambiar de Monedas a Comisiones y vice-versa las vamos a ver en el curso? O queda para investigar por nuestra cuenta?

Josué David Coreas Paiz

student•

Hola @aguscorvo en otra sección se realiza algo similar para poder cambiar, en esta que mencionas no se hace pero si sería muy bueno que tomes el reto para realizarlo. Saludos!

Sebastian Felipe Díaz Guevara

student•

lo tienes como reto, asi como generar otra tabla

Jhonatan Guerrero

student•

Poquito pero con mucha ilusión. Mi aporte en scss

<main>
    <section class="exchange">
      <div class="exchange-background-img"></div>
      <div class="exchange-title">
        <h3>Visibilizamos todas las tasas de cambio.</h3>
        <p>Traemos información en tiempo real de las casas de cambio y las monedas más importantes del mundo.</p>
      </div>
      <section class="exchange-tables">
        <div class="table-currency">
          <p class="table-currency-title">Monedas</p>
          <div class="table-currency-container">
            <div class="table-currency-top-left">
              <h5>Bitcoin</h5>
            </div>
            <div class="table-currency-top-right">
              <h6>$ 1.96 <span class="currency-down"></span></h6>
            </div>
            <div>
              <h5>Ethereum</h5>
            </div>
            <div>
              <h6>$ 0.07 <span class="currency-up"></span></h6>
            </div>
            <div>
              <h5>Ripple</h5>
            </div>
            <div>
              <h6>$ 2.15 <span class="currency-down"></span></h6>
            </div>
            <div class="table-currency-bottom-left">
              <h5>Stellar</h5>
            </div>
            <div class="table-currency-bottom-right">
              <h6>$ 4.96 <span class="currency-down"></span></h6>
            </div>
          </div>
          <div class="table-currency-date">
            <p><span>Actualizado:</span> 19 de Julio 23:45</p>
          </div>
        </div>
        <div class="table-commissions">
          <p class="table-commissions-title">Comisiones</p>
          <div class="table-commissions-container">
            <div class="table-commissions-top-left">
              <h5>Bitrade</h5>
            </div>
            <div class="table-commissions-top-right">
              <h6>$ 12.96</h6>
            </div>
            <div>
              <h5>Bitpreco</h5>
            </div>
            <div>
              <h6>$ 13.07</h6>
            </div>
            <div>
              <h5>Novadax</h5>
            </div>
            <div>
              <h6>$ 13.15</h6>
            </div>
            <div class="table-commissions-bottom-left">
              <h5>Coinext</h5>
            </div>
            <div class="table-commissions-bottom-right">
              <h6>$ 14.96</h6>
            </div>
          </div>
          <div class="table-commissions-date">
            <p><span>Actualizado:</span> 19 de Julio 23:48</p>
          </div>
        </div>
      </section>
    </section>
  </main>

main{
  background: var(--off-white);
  height: auto;
  width: 100%;

  .exchange {
    padding-top: 24px; 
    height: auto;
    width: 100%;
    text-align: center;

    &-background-img {
      //background: url('../img/bitcoin.svg') center/cover no-repeat; //Shorthand 
      background-image: url('../img/bitcoin.svg');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;

      margin: 40px auto;
      height: 200px;
      width: 200px;
    }

    &-title {
      width: 90%;
      min-width: 288px;
      max-width: 900px;
      margin: 0 auto;

      h2 {
        color: var(--warm-black);
        font-size: 2.4rem;
        font-weight: bold;
        line-height: 2.6rem;
        margin-bottom: 24px;
      }

      p {
        color: var(--gray-text);
        font-size: 1.4rem;
        font-weight: 500;
        line-height: 1.6rem;
        margin-bottom: 48px;
      }      
    }

    &-tables {
      width: 90%;
      min-width: 288px;
      max-width: 900px;
      margin: 0 auto; 
      margin-bottom: 24px;

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

        &-title {
          display: grid;
          color: var(--bitcoin-orange);
          font-size: 1.8rem;
          font-weight: bold;
          line-height: 2.344rem;
          margin-bottom: 12px;  
          min-width: 230px;
          max-width: 300px;
          width: 90%; 
        }

        &-container { 
          display: grid;
          justify-content: center;
          grid-template-columns: 100px 95px;
          grid-template-rows: repeat(4, 39px);
          margin: 0 auto; 
          min-width: 230px;
          max-width: 300px;
          width: 90%; 
          justify-content: center; 

          div {
            background-color: var(--just-white); 


            &.table-currency-top-left{
              border-radius: 15px 0 0 0;
            }
  
            &.table-currency-top-right{
              border-radius: 0 15px 0 0;
            }
  
            &.table-currency-bottom-left{
              border-radius: 0 0 0 15px;
            }
  
            &.table-currency-bottom-right{
              border-radius: 0 0 15px 0;
            }  
  
            h4 { 
              display: flex;
              color: #b5b0ac;
              font-size: 1.6rem;
              font-weight: 500;
              line-height: 1.936rem;
              padding: 10px 12px;
              justify-content: start;
            }
            
            h5 {
              color: var(--gray-text);
              font-size: 1.4rem;
              font-weight: 400;
              line-height: 1.694rem;
              padding: 11px 12px;

              span {
                display: inline-block;
                margin-left: 10px;
                height: 15px;
                width: 15px;
                
                &.currency-down{
                  background: url('../icons/trending-down.svg') center/cover no-repeat;
                }

                &.currency-up{
                  background: url('../icons/trending-up.svg') center/cover no-repeat;
                }
              } 
            } 
          } 
        }

        &-date {
          background-color: var(--soft-orange);
          color: var(--warm-black);
          font-size: 1.2rem;
          font-family: 'Inter', sans-serif;
          font-weight: 400;
          line-height: 1.452rem;
          margin: 16px auto;
          padding: 8px;
          width: max-content; 
          border-radius: 8px;
          justify-self: center;
          align-self: center;
          
          span {
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.936rem;
          } 
        } 
      }

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

        &-title {
          display: grid;
          color: var(--secondary-blue);
          font-size: 1.8rem;
          font-weight: bold;
          line-height: 2.344rem;
          margin-bottom: 12px;  
          min-width: 230px;
          max-width: 300px;
          width: 90%; 
        } 

        &-container { 
          display: grid;
          justify-content: center;
          grid-template-columns: 100px 95px;
          grid-template-rows: repeat(4, 39px);
          margin: 0 auto; 
          min-width: 230px;
          max-width: 300px;
          width: 90%; 
          justify-content: center; 

          div {
            background-color: var(--just-white); 


            &.table-currency-top-left{
              border-radius: 15px 0 0 0;
            }
  
            &.table-currency-top-right{
              border-radius: 0 15px 0 0;
            }
  
            &.table-currency-bottom-left{
              border-radius: 0 0 0 15px;
            }
  
            &.table-currency-bottom-right{
              border-radius: 0 0 15px 0;
            }  
  
            h4 { 
              display: flex;
              color: #b5b0ac;
              font-size: 1.6rem;
              font-weight: 500;
              line-height: 1.936rem;
              padding: 10px 12px;
              justify-content: start;
            }
            
            h5 {
              color: var(--gray-text);
              font-size: 1.4rem;
              font-weight: 400;
              line-height: 1.694rem;
              padding: 11px 12px; 
              
            } 
          } 
        }

        &-date {
          background-color: var(--soft-blue);
          color: var(--warm-black);
          font-size: 1.2rem;
          font-family: 'Inter', sans-serif;
          font-weight: 400;
          line-height: 1.452rem;
          margin: 16px auto;
          padding: 8px;
          width: max-content; 
          border-radius: 8px;
          justify-self: center;
          align-self: center;
          
          span {
            font-size: 1.4rem;
            font-weight: 700;
            line-height: 1.936rem;
          } 
        } 
      } 
    } 
  } 
}

Abril Darynka Tapia Sosa

student•

Resultado del reto, agregue e js para el cambio de tabla a mostrar

Para la segunda tabla reutilice los estilos creados en clase, de la siguiente manra en cada caso donde eran los mismos:

.main-currency-table,
.main-commissions-table{
    
}

Para las flechas agregue lo siguiente abajo de p.currency-table--title // Tambien paara commissions

<div class="arrow-right" id="arrowRight"></div>

Al div de main-currency-table y main-commissions-table les agregue un id para identificarlos en el js A main-commissions-table le agregue un display:none para que no se muestre al inicio

Codigo JS

const left = document.getElementById('arrowLeft');
const right = document.getElementById('arrowRight');
const tableCurrency =document.getElementById('tableCurrency');
const tableCommissions =document.getElementById('tableCommissions');

left.addEventListener("click", showCurrency);
right.addEventListener("click", showCommissions);

function showCommissions(){
    tableCurrency.style.display = "none";
    tableCommissions.style.display = "block";
}
function showCurrency(){
    tableCurrency.style.display = "block";
    tableCommissions.style.display = "none";
}

Evelia Lopez Rueda

student•

Asi quedo mi segunda tabla

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap" rel="stylesheet">
    <link rel="stylesheet" href="./styles/styles.css">
    <title>Document</title>
</head>
<body>
    <header>
        <img src="./assets/img/logo.svg" alt="">

        <div class="header--title--container">
            <h2>La próxima revolución en el intercambio de criptomonedas</h2>
            <p>Batatabit ayuda a navegar entre los diferentes 
                precios y tendencias
            </p>
            <a href="" class="header--button"> Conoce nuestros planes <span></span> </a>
        </div>
    </header>


    <main>
        <section class="main--exchange--container">
            <div class="backgroundImg">

            </div>
            <div class="main--exchange--container--title">
                <h3>Visualizamos todas las tasas de cambio</h3>
                <p>Traemos informacion en tiempo real de las casas de cambio y las monedas mas importantes del mundo</p>
            </div>
            <section class="main--tables--container">
                <div class="main--currency--table">
                    <p class="currency--table--title">Monedas</p>
                    <div class="currency--table--container">
                        <table>
                            <tr>
                                <td class="table__top-left">Bitcoin</td>
                                <td class="table__top-right table__right">$1.96 <span class="down"></span></td>
                            </tr> 

                            <tr>
                                <td>Etherium</td>
                                <td class="table__right">$0.07 <span class="up"></span></td>
                            </tr> 

                            <tr>
                                <td>Ripple</td>
                                <td class="table__right">$2.17 <span class="down"></span></td>
                            </tr> 

                            <tr>
                                <td class="table__bottom--left">Stellar</td>
                                <td class="table__bottom--right table__right">$4.96 <span class="down"></span></td>
                            </tr> 
                        </table>
                        <div class="currency--table--date">
                            <p>  <b>Actualizado:</b>  19 de julio 23:45 </p>
                        </div>
                    </div>
                </div>

                
                <div class="main--comisions--table">
                    <h3>Comisiones</h3>
                    <div class="comisions--table--container">
                        <table>
                            <tr>
                                <td class="table__top--right">Bitrade</td>
                                <td class="table__top--left table--right">$12.96</td>
                            </tr>
                            <tr>
                                <td>Bitprecio</td>
                                <td class="table--right">$13.07</td>
                            </tr>
                            <tr>
                                <td>Novadax</td>
                                <td class="table--right">$13.15</td>
                            </tr>
                            <tr>
                                <td class="table__bottom--left">Coinext</td>
                                <td class="table--right table__bottom--right">$14.96</td>
                            </tr>
                        </table>
                        <div class="comisions--table--date">
                            <p> <b>Actualizado:</b>  19 de julio 19:48</p>
                        </div>
                    </div>
                </div>
            </section>

/*
1. Posicionamiento
2. Modelo de caja (Box-model)
3. Tipografia
4. Visuales (Shadow box, border radius)
5. Otros
*/
/*Implementacion de variables*/
:root
{
/* Colores*/
--bitcoin-orange: #F7931A;
--soft-orange: #FFE9D5;
--secondary-blue: #1A9AF7;
--soft-blue: #E7F5FF;
--warm-black: #201E1C;
--black: #282623;
--grey: #BABABA;
--off-white: #FAF8F7;
--just-white: #FFFFFF;

}
*
{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html
{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif;
}


header
{
    position:relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    min-width: 320px;
    height: 334px;
    text-align: center;
    background: linear-gradient(207.8deg, #201E1C 16.69%, #F7931A 100%);
}

header img
{
    width: 150px;
    height: 24px;
    margin-top: 60px;
    align-self: center;
}

.header--title--container
{
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    height: 218px;
    margin-top: 30px;
    text-align: center;
    align-self: center;
}

.header--title--container h1
{
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem; /* Dimension entre lineas */
    color: var(--just-white);
}

.header--title--container p
{
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: bold;
    line-height: 1.8rem; /* Dimension entre lineas */
    color: var(--soft-orange);   
}

.header--title--container .header--button
{
    position:absolute;
    left: calc(50% - 118px);
    top: 270px;
    display: block;
    margin-top:35px ;
    padding: 15px;
    width: 229px;
    height:48px;
    background-color: var(--off-white);
    /*Sombras*/
    box-shadow: 0px 4px 8px rgba(89, 73, 30, 0.16);
    border: none;
    border-radius: 5px;
    /*Fuentes*/
    font-size: 1.4rem;
    font-weight: bold;
    text-decoration: none;
    color: var(--black);
}

.header--button span
{
    display: inline-block;
    width: 13px;
    height: 8px;
    margin-left: 10px;
    background-image: url('../assets/icons/down-arrow.svg');
}

main
{
    width: 100%;
    min-width: 320px;
    height: auto;
    background-color: var(--off-white);
}

.main--exchange--container
{
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 30px;
    text-align: center;
}

.main--exchange--container--title
{
    width: 100%;
    min-width: 288px;
    max-width: 900px;
    margin: 0 auto;
}

.main--exchange--container .backgroundImg
{
    width: 195px;
    height: 195px;
    margin: 0 auto;
    margin-bottom: 50px;
    background-image: url(../assets/img/Bitcoin.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.main--exchange--container h2
{
    margin-bottom: 30px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--black);
}

.main--exchange--container p
{
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}

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

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

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

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

.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);
}

.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;
}

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

.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;
}

.currency--table--container .currency--table--date
{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:var(--soft-orange);
    border-radius: 8px;
    
    
    
}

.currency--table--container .currency--table--date p
{
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.45rem;
    color: var(--warm-black);
}

.main--comisions--table
{
    width: 63%;
    min-width: 235px;
    max-width: 300px;
    height: 360px;
    margin: 0 auto;
    font-family: 'Inter',sans-serif;
}

.main--comisions--table h2
{
    margin: 0 0 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secondary-blue);
}

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

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

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

.comisions--table--container .table--right
{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7rem;
    color: #757575;
    
}

.comisions--table--container .table__top--right
{
    border-radius: 15px 0 0 0;
}

.comisions--table--container .table__top--left
{
    border-radius: 0 15px 0 0;
}

.comisions--table--container .table__bottom--right
{
    border-radius:  0 0 15px 0;
}

.comisions--table--container .table__bottom--left
{
    border-radius: 0 0 0 15px;
}

.comisions--table--container .comisions--table--date
{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color:#E7F5FF;
    border-radius: 8px;
}

.comisions--table--container .comisions--table--date p
{
    font-size: 1.2rem;
    font-weight: 300;
    line-height: 1.45rem;
    color: var(--warm-black);
}

Juan Christopher

student•

Buena.

Abel Areiza

student•

Me gustaría saber la mejor forma para alinear el título de la tabla y los elementos de la izquierda como en el diseño de Figma. Lo que tengo:

Lo que está en el diseño en Figma:

Gracias de antemano

John Cardenas

student•

¡Hola, Abel!

Sube tu código CSS para saber que display y/u otras propiedades estas usando y así poder ayudarte :D

Abel Areiza

student•

Hola, John! Gracias por responder, lo tengo tal cual como le llevamos en el curso hasta lección, te adjunto la parte de CSS correspondiente a esta zona del main:

main {
    width: 100%;
    height: auto;
    background-color: var(--off-white);
}

.main-exchange-container {
    width: 100%;
    height: auto;
    padding-top: 80px;
    padding-bottom: 30px;
    text-align: center;
}

.main-exchange-container--title {
    width: 90%;
    min-width: 288px;
    max-width: 900px;
    margin: 0 auto;
}

.main-exchange-container .background-image {
    width: 200px;
    height: 200px;
    margin: 0 auto;
    margin-bottom: 50px;
    background-image: url('./assets/images/bitcoin.svg');
    background-position: center;
    background-repeat: no-repeat;
}

.main-exchange-container h2 {
    margin-bottom: 30px;
    font-size: 2.4rem;
    font-weight: bold;
    line-height: 2.6rem;
    color: var(--black);
}

.main-exchange-container p {
    margin-bottom: 30px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.6rem;
    color: #757575;
}

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

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

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

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

.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);
}

.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;
}

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

.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;
}

.currency-table--date {
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}

.currency-table--date p {
    font-size: 1.2rem;
    font-weight: 400;
    line-height: 1.5rem;
    color: var(--warm-black);
}

Muchas gracias de antemano

Antonio Mora

student•

Les comparto mi resultado

Alejandro Adain Navarro Gorraiz

student•

Le hice unos pequeños cambio, en base al aporte de https://platzi.com/comentario/1877304/

Jaime Isaí Orellana Mejia

student•

<section class="main-tables-container">
          <div class="main-MC-table">
            <p class="MC-table--title">Monedas</p>
            <div class="MC-table--container">
              <table>
                <tr>
                  <td class="table__top-left">Bitcoin</td>
                  <td class="table__top-right table__right">
                    $1.96 <span class="down"></span>
                  </td>
                </tr>
                <tr>
                  <td>Ethereum</td>
                  <td class="table__right">$0.07 <span class="up"></span></td>
                </tr>
                <tr>
                  <td>Riple</td>
                  <td class="table__right">$2.17 <span class="down"></span></td>
                </tr>
                <tr>
                  <td class="table__bottom-left">Stellar</td>
                  <td class="table__bottom-right table__right">
                    $4.96 <span class="down"></span>
                  </td>
                </tr>
              </table>
            </div>
            <div class="MC-table--date">
              <p><b>Actualizado:</b> 19 Julio 23:45</p>
            </div>
          </div>
          <div class="main-MC-table">
            <p class="C-table--title">Comisiones</p>
            <div class="MC-table--container">
              <table>
                <tr>
                  <td class="table__top-left">Bitrade</td>
                  <td class="table__top-right table__right">$12.96</td>
                </tr>
                <tr>
                  <td>Bitpreco</td>
                  <td class="table__right">$13.07</td>
                </tr>
                <tr>
                  <td>Novadax</td>
                  <td class="table__right">$13.15</td>
                </tr>
                <tr>
                  <td class="table__bottom-left">Coinext</td>
                  <td class="table__bottom-right table__right">$14.96</td>
                </tr>
              </table>
            </div>
            <div class="C-table--date">
              <p><b>Actualizado:</b> 19 Julio 23:48</p>
            </div>
          </div>
        </section>
CSS
.main-MC-table {
  width: 70%;
  min-width: 235px;
  max-width: 500px;
  height: 360px;
  margin: 0 auto;
  font-family: "Inter", sans-serif;
}
.main-MC-table .MC-table--title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  color: var(--bitcoin-orange);
}
.MC-table--container {
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  height: 250px;
  margin: 0 auto;
}
.MC-table--container table {
  width: 100%;
  height: 100%;
}
.MC-table--container td {
  width: 40%;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: var(--gray);
  background-color: var(--just-white);
}
.MC-table--container .table__top-left {
  border-radius: 15px 0 0 0;
}
.MC-table--container .table__top-right {
  border-radius: 0 15px 0 0;
}
.MC-table--container .table__bottom-left {
  border-radius: 0 0 0 15px;
}
.MC-table--container .table__bottom-right {
  border-radius: 0 0 15px 0;
}
.MC-table--container .table__right {
  font-size: 1.4rem;
  font-weight: normal;
  line-height: 1.7rem;
  color: #757575;
}
.MC-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;
}
.MC-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;
}
.MC-table--date {
  width: 190px;
  height: 30px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 8px;
  background-color: var(--soft-orange);
  border-radius: 8px;
}
.MC-table--date p {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--warm-black);
}
/*Tabla Comision*/
.main-MC-table .C-table--title {
  margin-bottom: 15px;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  color: var(--secondary-blue);
}
.C-table--date {
  width: 190px;
  height: 30px;
  margin: 0 auto;
  margin-top: 15px;
  padding: 8px;
  background-color: var(--soft-blue);
  border-radius: 8px;
}
.C-table--date p {
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1.5rem;
  color: var(--warm-black);
}```

Fabián Andrés García Méndez

student•

Reto cumplido gracias profe!

Nicolás Martín González Sosa

student•

¿Con que hiciste poner la flecha y que esa se pueda intercambia entre monedas y comisiones?

Muchas gracias!

José M. Veintimilla

student•

Eduer Pallares Jiménez

student•

Hice la segunda tabla pero "dinámica" con JS

Claudia Gonzalez

student•

Logrado!

Rafael Martínez Rodríguez

student•

Super

Ricardo Mazuera

student•

Así quedaron mis tablas, le puse par líneas de código adicionales a la tabla del profe porque en Figma está alineado el texto a la izquierda.

Espero les sirva...

.currency-table--container td {
	padding-left: 15px;
    	text-align: left;

En cuanto al código de la segunda tabla, lo que hice fue duplicar la primera y pegarme a los estilos de la anterior para no duplicar códigos, les pongo el ejemplo con lo que les escribí arriba, quedaría así:

.currency-table--container td, .comissions-table--container td {
	padding-left: 15px;
    	text-align: left;

Samuel Ulises Pérez Peña

student•

Listo, reto completado 😃 ![](