No tienes acceso a esta clase

隆Contin煤a aprendiendo! 脷nete y comienza a potenciar tu carrera

Finalizando estilos de tabla de monedas

17/32
Recursos

驴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 鈥搒oft-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鈥揹ate 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 鈥搘arm-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:
image.png

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

Contribuci贸n creada por: Jos茅 Miguel Veintimilla (Platzi Contributor).

Aportes 349

Preguntas 27

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad?

o inicia sesi贸n.

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

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 馃槃

.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

Ac谩 esta mi versi贸n con perritos de raza! Saludos!

Reto logrado, todo con Puro CSS

Never stop learning 馃槂

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

Reto cumplido usando CSS GRID

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

<h3></h3>
<main>
    <section class="exchange">
      <div class="exchange-background-img"></div>
      <div class="exchange-title">
        <h2>Visibilizamos todas las tasas de cambio.</h2>
        <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">
              <h4>Bitcoin</h4>
            </div>
            <div class="table-currency-top-right">
              <h5>$ 1.96 <span class="currency-down"></span></h5>
            </div>
            <div>
              <h4>Ethereum</h4>
            </div>
            <div>
              <h5>$ 0.07 <span class="currency-up"></span></h5>
            </div>
            <div>
              <h4>Ripple</h4>
            </div>
            <div>
              <h5>$ 2.15 <span class="currency-down"></span></h5>
            </div>
            <div class="table-currency-bottom-left">
              <h4>Stellar</h4>
            </div>
            <div class="table-currency-bottom-right">
              <h5>$ 4.96 <span class="currency-down"></span></h5>
            </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">
              <h4>Bitrade</h4>
            </div>
            <div class="table-commissions-top-right">
              <h5>$ 12.96</h5>
            </div>
            <div>
              <h4>Bitpreco</h4>
            </div>
            <div>
              <h5>$ 13.07</h5>
            </div>
            <div>
              <h4>Novadax</h4>
            </div>
            <div>
              <h5>$ 13.15</h5>
            </div>
            <div class="table-commissions-bottom-left">
              <h4>Coinext</h4>
            </div>
            <div class="table-commissions-bottom-right">
              <h5>$ 14.96</h5>
            </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;
          } 
        } 
      } 
    } 
  } 
}

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鈥搕itle // 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";
}


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">
            <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas</h1>
            <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">
                <h2>Visualizamos todas las tasas de cambio</h2>
                <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">
                    <h2>Comisiones</h2>
                    <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);
}

Les comparto mi resultado

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

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


Reto cumplido gracias profe!

Hice la segunda tabla pero 鈥渄in谩mica鈥 con JS

Logrado!

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;

Listo, reto completado 馃槂
![](

Reto cumplido!

Reto cimplido. tambien le a帽adi los botones de izquierda y derecha

Para los botones a帽adi un div extra como hermando de la tabla

          <!-- la tabla -->
          <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>Ethererum</td>
                <td class="table--right">$ 0.07 <span class="up"></span></td>
              </tr>
              <tr>
                <td>Ripple</td>
                <td class="table--right">$ 2.15 <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-container__right-button"></div>
          </div>

Y para posicionarlo

/* botton derecha */
.currency-table-container .currency-table-container__right-button {
  width: 7px;
  height: 12px;
  position: absolute;
  top: calc(50% - 6px);
  right: -24px;
  background: url('../assets/icons/right-icon.svg') center/cover no-repeat;
}
/*
  para que se posicione en relacion a la tabla el <div class="currecncy-table-container">
  debe estar posicionado 
 */
.currency-table-container {
  position: relative;
}

Trate de completar el reto de una forma sencilla, por lo cual al los dos div que contiene la fecha de actualizaci贸n deje la misma clase currency-table鈥揹ate y agregue otra clase monedas y comisiones dependiendo de a que tabla correspond铆a y los estilos quedan de esta manera:

.currency-table--date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding: 8px;
    border-radius: 8px;
}

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

.monedas{
    background-color: var(--soft-orange);
}

.comisiones{
    background-color: #E7F5FF;;
}

驴Si uso exactamente las mismas clases y solo cambio lo que necesito, en este caso solo el t铆tulo de la tabla y el cuadro que contiene la fecha?
驴Es una buena pr谩ctica?

En chrome queda perfecta la secci贸n de actualizado pero en Safari el texto se desborda. Alguien sabe esto a qu茅 se debe? Creo que puede ser un tema relacionado a la fuente que est谩 tomando Safari pero no estoy seguro鈥

Casi nunca hab铆a usado y estilizado las tablas.

As铆 me va quedando, por m谩s que se vea igual, estoy optimizando lo que es las clases de css

Reto completado

Bueno como mucho de los estilos se repet铆an lo que hice fue jugar con las clases en el HTML para no repetir c贸digo, no se si es trampa o eficiencia jaja

Hice que fuese como un carrusel cuando le das clic al punto se cambia

aqu铆 les dejo el repositorio:
https://github.com/jonniermartinez/BataBit

Tenia poca fe en realizar la segunda tabla pero record茅 que es normal y correcto reutilizar c贸digo, as铆 que solo reutilice el c贸digo que ya hab铆a hecho para la primera tabla y agregue clases en el HTML para los componentes de la segunda. Despu茅s de algunos errores quedo, nunca en mi vida me hab铆a sentido tan programador hasta ahora :3


DOne

He aqu铆 mi reto completado 馃槃 y lo hice agregando la menor cantidad de l铆neas de c贸digo extras ![](

Aqu铆 mi resultado de las 鈥渢ablas鈥, pues como indic贸 el profe, lo hice con grid, as铆 que use otro m茅todo.

Hecho

Segunda tabla terminada con CSS GRID

  • HTML
<div class="main-comision-table">
                    <p class="comision-table--title">Comisiones</p>
                    <div class="comision-table--container">
                        <div class="comision-table--item table__top-left">
                            <p class="comision-table-item--title">Bitrade</p>
                        </div>
                        <div class="comision-table--item table__top-right">
                            <p class="comision-table-item--price">$ 12.96</p>
                        </div>
                        <div class="comision-table--item">
                            <p class="comision-table-item--title">Bitpreco</p>
                        </div>
                        <div class="comision-table--item">
                            <p class="comision-table-item--price">$ 13.07</p>
                        </div>
                        <div class="comision-table--item">
                            <p class="comision-table-item--title">Novadax</p>
                        </div>
                        <div class="comision-table--item">
                            <p class="comision-table-item--price">$ 13.15</p>
                        </div>
                        <div class="comision-table--item table__bottom-left">
                            <p class="comision-table-item--title">Coinext</p>
                        </div>
                        <div class="comision-table--item table__bottom-right">
                            <p class="comision-table-item--price">$ 14.96</p>
                        </div>
                    </div>
                    <div class="comision-table--date">
                        <p><b>Actualizado:</b> 19 Julio 23:45 </p>
                    </div>
                </div>

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

.main-comision-table .comision-table--title{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secundary-blue);

}

.comision-table--container{
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;    
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-row-gap: 2.6px;
    grid-column-gap: 2px;
}

.comision-table--item{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: #fff;
}
.comision-table--item p{
    margin: 0;
}

.comision-table--item .comision-table-item--title{
    color: var(--grey);
    font-size: 1.6rem;
}

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

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

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

Reto finalizado.

Estoy haciendo el curso con el uso de preprocesadores para llevar un c贸digo m谩s organizado

Reto cumplido

Reto terminado馃檶

Cambie un poco el c贸digo para que se pareciera mucho mas al modelo de Figma, pero en general es el mismo que hice el profe DeGranda. Tambien me ayudo mucho el comentario de un compa帽ero de ponerle coma a los estilos de la primera tabla y agregar las clases de la segunda tabla, fue super sencillo as铆

<section class="main-exchange-container">
      <div class="backgroundImg"></div>
      <div class="main-exchange-container--title">
        <h2>Visibilizamos todas las tasas de cambio.</h2>
        <p>
          Traemos informaci贸n en tiempo real de las casas de cambio y las monedas m谩s 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>Ethereum</td>
                <td class="table__right">$ 0.07 <span class="up"></span></td>
              </tr>
              <tr>
                <td>Ripple</td>
                <td class="table__right">$ 2.15 <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="currency-table--date">
            <p><b>Actualizado:</b> 19 de Julio 23:45</p>
          </div>
        </div>
        <div class="main-commission-table">
          <p class="commission-table--title">Comisiones</p>
          <div class="commission-table--container">
            <table>
              <tr>
                <td class="table__top-left">Bitrade</td>
                <td class="table__top-right table__right">$ 12.96 <span class="down"></span></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="commission-table--date">
            <p><b>Actualizado:</b> 19 de Julio 23:48</p>
          </div>
        </div>
      </section>
.main-currency-table, .main-commission-table {
  width: 70%;
  min-width: 235px;
  max-width: 500px;
  height: 320px;
  margin: 0 auto;
  font-family: 'Inter', sans-serif;
}
.main-currency-table .currency-table--title, .main-commission-table .commission-table--title {
  text-align: left;
  margin-top: 48px;
  margin-bottom: 15px;
  padding-left: 16px;
  font-family: 'DM Sans', sans-serif;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 2.3rem;
  color: var(--bitcoin-orange);
}
.main-commission-table .commission-table--title {
  color: var(--secondary-blue);
}
.currency-table--container, .commission-table--container {
  width: 90%;
  min-width: 230px;
  max-width: 300px;
  height: 200px;
  margin: 0 auto;
}
.currency-table--container table, .commission-table--container table {
  width: 100%;
  height: 100%;
}
.currency-table--container td, .commission-table--container td {
  text-align: left;
  padding: 10px 12px 10px 12px;
  width: 50%;
  font-size: 1.6rem;
  font-weight: 500;
  line-height: 1.9rem;
  color: #B5B0AC;
  background-color: var(--just-white);
}
.currency-table--container .table__top-left, .commission-table--container .table__top-left {
  border-radius: 8px 0 0 0;
}
.currency-table--container .table__bottom-left, .commission-table--container .table__bottom-left {
  border-radius: 0 0 0 8px;
}
.currency-table--container .table__top-right, .commission-table--container .table__top-right {
  border-radius: 0 8px 0 0;
}
.currency-table--container .table__top-left, .commission-table--container .table__top-left {
  border-radius: 0 0 8px 0;
}
.currency-table--container .table__right, .commission-table--container .table__right{
  text-align: center;
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.6rem;
  color: #757575;
  ;
}
.currency-table--container .down {
  display: inline-block;
  margin-left: 10px;
  width: 12px;
  height: 12px;
  background: url(./assets/icons/trending-down.svg) center/cover no-repeat;
}
.currency-table--container .up {
  display: inline-block;
  margin-left: 10px;
  width: 12px;
  height: 12px;
  background: url(./assets/icons/trending-up.svg) center/cover no-repeat;
}
.currency-table--date, .commission-table--date {
  width: 190px;
  height: 30px;
  margin: 0 auto;
  margin-top: 16px;
  padding: 8px;
  border-radius: 8px;
}
.currency-table--date p, .commission-table--date p {
  font-size: 1.2rem;
  line-height: 1.5rem;
  color: var(--warm-black);
}
.currency-table--date {
  background-color: var(--soft-orange);
}
.commission-table--date {
  background-color: var(--soft-blue);
}

Mi aporte

Implementadolo con css grid, y feliz que salio, pero aun falta que pueda ser responsivo

Usando Grid layout para las tablas y flex para el contenedor de las tablas, lo hago as铆, pues a煤n no se me da lo del overflow

Fue muy facil hacer la otra tabla apliando los estilos

 <section class="main-tables-container">
                <div class="main-comisions-table">
                    <p class="main-comisions--tittle">Comisiones</p>
                    <div class="comisions-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.95</td>
                            </tr>
                        </table>
                    </div>
                    <div class="comisions-table--date">
                        <p><b>Actualizado:</b>19 Julio 23:48</p>
                    </div>
                </div>
            </section>
.main-comisions-table .main-comisions--tittle {
    margin-bottom: 15px;
    font-size: 1.8rem;
    line-height: 2.3rem;
    font-weight: bold;
    color: var(--secundary-blue);
}
.currency-table--container, .comisions-table--container {
    width: 90%;
    min-width: 230px;
    max-width: 300px;
    height: 250px;
    margin: 0 auto;
}
.currency-table--container table, .comisions-table--container table {
    width: 100%;
    height: 100%;
}
.currency-table--container td, .comisions-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, .comisions-table--container .table__top-left {
    border-radius: 15px 0 0 0;
}
.currency-table--container .table__top-right, .comisions-table--container .table__top-right {
    border-radius: 0 15px 0 0;
}
.currency-table--container .table__bottom-left, .comisions-table--container .table__bottom-left {
    border-radius: 0 0 0 15px;
}
.currency-table--container .table__bottom-right, .comisions-table--container .table__bottom-right {
    border-radius: 0 0 15px 0;
}
.currency-table--container .table__right, .comisions-table--container .table__right {
    font-weight: normal;
    font-size: 1.4rem;
    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: 31px;
    padding: 8px;
    margin: 0 auto;
    margin-top: 15px;
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.currency-table--date p {
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}
.comisions-table--date {
    width: 190px;
    height: 31px;
    padding: 8px;
    margin: 0 auto;
    margin-top: 15px;
    background-color: var(--soft-blue);
    border-radius: 8px;
}
.comisions-table--date {
    font-weight: 300;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--warm-black);
}

Asi va quedando el proyecto!


Reto cumplido
Yo en lo personal utilice herencia para realizar la segunda tabla y agrege un modificador en css solo para el cambio de los colores de esta manera no duplique codigo.

Listo!!

Como buena pr谩ctica, yo recomendar铆a usar:

margin-left: auto;
margin-right: auto;

en lugar de margin: 0 auto;

A menos que quieran modificar el top y bottom.

RETO COMPLETADO 馃槂

Reto cumplido implementando css grid:

Para la siguiente tabla use los mismos estilos y lo que hice fue las l铆neas para cambiar los colores y dejar el texto alineado en la segunda tabla

.main__exchangeContainer-tables div:last-child .main__currency-tableTitle{
    color: var(--secondary-blue);
}

.main__exchangeContainer-tables div:last-child table tr td:last-child {
    text-align: center;
}

.main__exchangeContainer-tables div:last-child .currency__table-date {
    background-color: var(--soft-blue);
}

Yo agregu茅 la otra tabla justo debajo de la amarilla, ahorita que no s茅 utilizar js la dejar茅 ah铆, igualmente se ve bien 馃槂

Ah铆 va la cosa, espero y hagamos el efecto de slide.

La parte del bot贸n como que no me queda centrado, pero lo he intentado:

<<section class="main-tables-container">
            <div class="main-currency-table">
                <p class="currency-table--title comisiones">Comisiones</p>
                <div class="currency-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="currency-table--date soft-blue">
                    <p> <b> Actualizado:</b> 19 de Julio 23:48</p>
                </div>
            </div>
        </section>> 

La segunda tabla la hice con grid y no qued贸 100%igual a la primera.

Clase 17: 驴C贸mo te fue [detallando los estilos de tabla de monedas](https://platzi.com/clases/2030-mobile-first/32314-detallando-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 ***鈥搒oft-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鈥揹ate 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 ***鈥搘arm-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: ![image.png](https://static.platzi.com/media/articlases/Images/image%28206%29.png) Y de esta manera, hemos terminado la primera secci贸n del proyecto. 隆Muy bien!

馃捇馃榿 Reto completado:

**No es necesario reinventar, simplemente reutilizar lo aprendido y modificar lo necesario.** ***Es cuesti贸n de crear una estructura ya antes vista y aplicarle estilos y contenido indicados.*** ![](https://static.platzi.com/media/user_upload/tables-33170249-370e-44de-aeef-3c2c7b5133a3.jpg)
![](https://static.platzi.com/media/user_upload/Batatabit-7f07b9cb-ed69-47d8-a7d8-1caacdd00e96.jpg)
Hecho con **Grid**: ![](https://static.platzi.com/media/user_upload/Captura%20de%20pantalla%202023-10-19%20120009-cf0df6ea-b669-482c-b548-4e74bae871eb.jpg)

En algunos documentos de MDN web al dia de hoy lastables ya no estan soportadas y tinen los comentarios de que se debe modificar con CSS

as矛 sigue el proyecto:

          <div class="tabla">
            <h3>Monedas</h3>
            <ul class="main-tabla">
              <li>Bitcoin</li>
              <li>
                $ 1.96
                <img
                  src="./assets/icons/trending-down.svg"
                  alt="flecha de menos"
                />
              </li>

              <li>Etherum</li>
              <li>
                $ 0.07 <img src="./assets/icons/trending-up.svg" alt="" />
              </li>

              <li>Ripple</li>
              <li>
                $ 2.15
                <img
                  src="./assets/icons/trending-down.svg"
                  alt="flecha de menos"
                />
              </li>

              <li>Stellar</li>
              <li>
                $ 4.96
                <img
                  src="./assets/icons/trending-down.svg"
                  alt="flecha de menos"
                />
              </li>
            </ul>

            <div class="actualizado">
              <p><b>actualizado</b> 19 julio 23:45.</p>
            </div>
          </div>

          <div class="tabla-comisiones">
            <h3>Comisiones</h3>
            <ul class="main-tabla">
              <li>Bitrade</li>
              <li>$ 12.96</li>

              <li>Bitprecio</li>
              <li>$ 13.07</li>

              <li>Novadax</li>
              <li>$ 13.15</li>

              <li>Coinext</li>
              <li>$ 14.96</li>
            </ul>

            <div class="actualizado">
              <p><b>actualizado</b> 19 julio 23:45.</p>
            </div>
          </div>

          <span id="flecha-derecha">
            <img src="./assets/icons/right-arrow.svg" alt="flecha derecha" />
          </span>
        </section>

El css:

.main-exchange-contanedor {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  justify-content: center;
  align-content: center;
  align-items: center;
  margin-block-start: 80px;
  margin-block-end: 30px;
  margin-inline: auto;
  width: 90%;
  min-width: 280px;
  max-width: 900px;
}
.main-exchange-contanedor figure {
  width: -moz-max-content;
  width: max-content;
  margin-block-end: 12px;
  -o-object-fit: cover;
     object-fit: cover;
}
.main-exchange-contanedor figure img {
  -o-object-fit: cover;
     object-fit: cover;
  width: 100%;
  max-width: 900px;
  min-width: 280px;
}
.main-exchange-contanedor .main-exchange-containedor--titulo h2 {
  font-size: 2.4rem;
  font-weight: bold;
  margin-block-end: 12px;
}
.main-exchange-contanedor .main-exchange-containedor--titulo p {
  font-size: 1.6rem;
  color: #757575;
  margin-block-end: 8px;
}

.main-tabla-containedor {
  display: flex;
  overflow-x: hidden;
  margin: 0 auto;
  width: 60%;
  min-width: 260px;
  max-width: 460px;
  font-family: "inter", sans-serif;
}
@keyframes irse {
  0% {
    opacity: 0;
    transform: translateX(-100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.main-tabla-containedor .tabla h3, .main-tabla-containedor .tabla-comisiones h3 {
  text-align: left;
  margin-block-end: 8px;
  font-size: 2.4rem;
  font-weight: bold;
  color: #f7931a;
}
.main-tabla-containedor .tabla .main-tabla, .main-tabla-containedor .tabla-comisiones .main-tabla {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  justify-items: flex-start;
  width: 100%;
  min-width: 260px;
  max-width: 380px;
  padding: 12px;
  border-radius: 12px;
  background-color: #fff;
}
.main-tabla-containedor .tabla .main-tabla li, .main-tabla-containedor .tabla-comisiones .main-tabla li {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  align-content: center;
  align-items: center;
  margin: 4px 0;
  width: 100%;
  height: 100%;
  font-size: 1.6rem;
  color: #757575;
  list-style: none;
}
.main-tabla-containedor .tabla .main-tabla li:nth-child(even), .main-tabla-containedor .tabla-comisiones .main-tabla li:nth-child(even) {
  font-weight: 700;
}
.main-tabla-containedor .tabla .main-tabla li .caida, .main-tabla-containedor .tabla-comisiones .main-tabla li .caida {
  display: inline-block;
  background-image: url("./assets/icons/trending-down.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.main-tabla-containedor .tabla .main-tabla li .subida, .main-tabla-containedor .tabla-comisiones .main-tabla li .subida {
  display: inline-block;
  background-image: url("assets/icons/trending-up.svg");
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
}
.main-tabla-containedor .tabla .actualizado, .main-tabla-containedor .tabla-comisiones .actualizado {
  margin: 12px auto;
  padding: 16px;
  width: min(100%, 26rem);
  border-radius: 12px;
  font-size: 1.2rem;
  background-color: #ffe8d5;
}
@keyframes aparecer {
  0% {
    opacity: 0;
    transform: translateX(100%);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}
.main-tabla-containedor .tabla-comisiones h3 {
  color: #53a8f8;
}
.main-tabla-containedor .tabla-comisiones .actualizado {
  background-color: #e7f5ff;
}
.main-tabla-containedor #flecha-derecha {
  position: absolute;
  right: 2.8rem;
  bottom: -30.8rem;
  width: -moz-max-content;
  width: max-content;
  cursor: pointer;
  transition: 0.3s ease;
}
.main-tabla-containedor #flecha-derecha img {
  width: 12px;
}

Y esta vez el javascript:

const move = document.getElementById("flecha-derecha");
const comiciones = document.getElementsByClassName("tabla-comisiones")[0];
const monedas = document.getElementsByClassName("tabla")[0];

let concurrent = 0;

move.addEventListener("click", incrementNumber);

function incrementNumber() {
  if (concurrent === 0) {
    ++concurrent;
    moveRight();
  } else {
    --concurrent;
    moveLeft();
  }
}

function moveRight() {
  monedas.style.removeProperty("animation");

  move.style.right = "none";
  move.style.left = "2rem";
  move.style.transform = "rotate(180deg)";

  comiciones.style.order = 1;
  comiciones.style.animation = "aparecer 0.3s ease-in-out";

  monedas.style.order = 2;
}

function moveLeft() {
  move.style.removeProperty("left");
  move.style.removeProperty("transform");
  comiciones.style.removeProperty("animation");

  comiciones.style.order = 2;
  monedas.style.order = 1;

  monedas.style.animation = "irse 0.3s ease-in-out";
}

Mi resultado

Mi resultado

![](

Reutilice las mismas clases. Asimsimo cree dos clases nuevas agregando las variaciones de la primera tabla.

<!-- codigo HTML-->
    <main>
<!-- codigo anterior de currency-table -->
<!-- nueva tabla para comisiones -->
            <div class="commissions-table">
                <p class="commissions-table--tittle">Comisiones</p>
                <div class="commissions-table--container">
                    <table>
                        <tr>
                            <td class="table__top-left">Bitrade</td>
                            <td class="table__top-right colum__right">$12.96 </td>
                        </tr>
                        <tr>
                            <td>Bitpreco</td>
                            <td class="colum__right">$13.07 </td>
                        </tr>
                        <tr>
                            <td>Novadax</td>
                            <td class="colum__right">$13.15 </td>
                        </tr>
                        <tr>
                            <td class="table__bottom-left">Coinext</td>
                            <td class="table__bottom-right colum__right">$14.96 </td>
                        </tr>
                    </table>
                </div>
                <div class="commissions-table--date">
                    <p><b>Actualizado:</b>19 Julio 23:48 </p>
                </div>
            </div>

        </section>
        <sections></sections>
        <sections></sections>
        <sections></sections>
    </main>

<!-- codigo CSS -->

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

.main-currency-table .currency-table--tittle, .commissions-table .commissions-table--tittle{
    width: 90%;
    /*margin-bottom: 15px;*/
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--bitcoin-orange);
    text-align: left;
    margin:15px auto;
}

.commissions-table .commissions-table--tittle{
    color: var(--secondary-blue);
}

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

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

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

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

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

.currency-table--container .colum__right, .commissions-table--container .colum__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, .commissions-table--date{
    width: 190px;
    height: 30px;
    margin: 0 auto;
    margin-top: 15px;
    padding:8px;
    background-color: var(--soft-orange);

}

.commissions-table--date{
    background-color: var(--soft-blue);
}

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

}

Reto terminado 馃槂

Hola, comparto mi tabla

Reto completado !! 馃榿馃榿

Es la primera vez que utilizo las tablas.

Reto completado!

Aqu铆 dejo las tablas hechas con GRID y un buen uso de BEM para reutilizaci贸n eficiente del c贸digo 馃槉

C贸digo HTML:


<section class="tabla">
	<h3 class="tabla__heading">Monedas</h3>
        <div class="tabla__contenido">
                    <p class="celda tabla__cripto">Bitcoin</p>
                    <p class="celda tabla__precio">10.12 鈧<span class="tabla__trending"><img class="tabla__trending-img" src="assets/icons/trending-down.svg" alt=""></span></p>

                    <p class="celda tabla__cripto">Ethereum</p>
                    <p class="celda tabla__precio">5.47 鈧<span class="tabla__trending"><img class="tabla__trending-img" src="assets/icons/trending-up.svg" alt=""></span></p>

                    <p class="celda tabla__cripto">Ripple</p>
                    <p class="celda tabla__precio">2.15 鈧<span class="tabla__trending"><img class="tabla__trending-img" src="assets/icons/trending-down.svg" alt=""></span></p>

                    <p class="celda tabla__cripto">Stellar</p>
                    <p class="celda tabla__precio">1.13 鈧<span class="tabla__trending"><img class="tabla__trending-img" src="assets/icons/trending-down.svg" alt=""></span></p>
                </div>
                <p class="tabla__actualizado"><span class="tabla__actualizado-act">Actualizado: </span>19 Julio 23:45</p>
            </section>

<section class="tabla">
<h3 class="tabla__heading tabla__heading--comisiones">Comisiones</h3>
	<div class="tabla__contenido">
        	<p class="celda celda--2 tabla__cripto">Bitrade</p>
                <p class="celda celda--2 tabla__precio">15.45 鈧</p>

                <p class="celda celda--2 tabla__cripto">Bitpreco</p>
                <p class="celda celda--2 tabla__precio">13.58 鈧</p>

                <p class="celda celda--2 tabla__cripto">Novadax</p>
                <p class="celda celda--2 tabla__precio">10.05 鈧</p>

                <p class="celda celda--2 tabla__cripto">Coinext</p>
                <p class="celda celda--2 tabla__precio">14.93 鈧</p>
            </div>
            <p class="tabla__actualizado tabla__actualizado--comisiones"><span class="tabla__actualizado-act">Actualizado: </span>19 Julio 23:45</p>
</section>

C贸digo CSS:


/* Tablas */

.tabla {
    width: 60%;
    max-width: 50rem;
    margin: 4rem auto 2rem auto;
    font-family: var(--font-s);
}
.tabla__heading {
    margin-inline-start: 1rem;
    font-size: 1.6rem;
    text-align: left;
    color: var(--primary);
}
.tabla__heading--comisiones {
    color: var(--secondary);
}
.tabla__contenido {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    margin: 0;
    font-size: 1.4rem;
    background-color: var(--just-light);
    color: var(--light-darker);
}
.celda {
    padding: 1rem;
    border: 1px solid #dcdcdc;
}
.celda:hover {
    background-color: var(--primary-soft);
    cursor: default;
}
.celda--2:hover {
    background-color: var(--secondary-soft);
}
.tabla__cripto {
    text-align: left;
}
.tabla__cripto:nth-child(1) {
    border-top-left-radius: 1rem;
}
.tabla__cripto:nth-child(7) {
    border-bottom-left-radius: 1rem;
}
.tabla__precio {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
}
.tabla__precio:nth-child(2) {
    border-top-right-radius: 1rem;
}
.tabla__precio:nth-child(8) {
    border-bottom-right-radius: 1rem;
}
.tabla__actualizado {
    padding-block: 1rem;
    margin: 1.5rem 0 0;
    font-size: 1.2rem;
    background-color: var(--primary-soft);
    border-radius: .8rem;
}
.tabla__actualizado--comisiones {
    background-color: var(--secondary-soft);
}
.tabla__actualizado-act {
    font-weight: bold;
}

tarea.

Reto Tabla Comisiones.

Reto

<section class="main-exchange-container">
            <div class="backgroundimg"></div>
            <div class="main-exchange-container--title">
                <h2>Visibilizamos todas las tasas de cambio.</h2>
                <p>Traemos informaci贸n en tiempo real de las casas de cambio y las monedas m谩s 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.15 <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="currency-table--date">
                        <p><b>Actualizado:</b> 19 Julio 23:45
                        </p>
                    </div>
                </div>
                <div class="main-currency-table">
                    <p class="currency-table--title-two">Comisiones</p>
                    <div class="currency-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="currency-table--date-two">
                        <p><b>Actualizado:</b> 19 Julio 23:48
                        </p>
                    </div>
                </div>
            </section>
        </section>
.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 .backgroundimg{
    width: 200px;
    height: 200px;
    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.8rem;
    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);
    font-family: 'DM Sans', sans-serif;
}

.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;
    background-color: var(--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: 300;
    line-height: 1.5rem;
    color: var(--warm-black);
}

.main-currency-table .currency-table--title-two{
    margin-bottom: 15px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: var(--secundary-blue);
    font-family: 'DM Sans', sans-serif;
}

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

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

Mi aporte

Admito que tard茅 como una semana, solo porque me frustr茅 entre hacerlo con grid o con table. Al final gan贸 grid y qued贸 s煤per.

Challenge Complete

Reto cumplido.

HTML.

CSS.

Y el scroll y el scroll horizontal???

El curso de grid no est谩 disponible a煤n, soy al 煤nico que no le aparece?

Honestamente, me costo mas de lo que imagine, pero lo pude lograr

mi bb

mi bebe

~Se pudo, solo queda practicar para no olvidarse.

Mi aporte con respecto a las tablas y como las enfoque en mi proyecto personal 馃コ:

Reto cumplido

Por si alguien quiere alinear el texto de la tabla a la izquierda como en figma denle una clase a <td> de bitcoin,ethereum y todos. Y en el css

.currency-table--container .table_left{
    text-align: start;
    padding: 12px;
}