A煤n no tienes acceso a esta clase

Crea una cuenta y contin煤a viendo este curso

Estilos base de tabla de monedas

15/31
Recursos

Aportes 43

Preguntas 15

Ordenar por:

驴Quieres ver m谩s aportes, preguntas y respuestas de la comunidad? Crea una cuenta o inicia sesi贸n.

La hice con grid, me gustaria feedback de ser necesario. Nunca pares de aprender.

.main-tables-container-title {
    text-align: left;
    margin: 15px;
    font-size: 1.8rem;
    color: #FF9536;
}
.main-tables-container {
    display: grid;
    grid-template-columns: repeat(2, minmax(100px, 300px));
    grid-template-rows: 50px 120px 65px;
    width: 70%;
    min-width: 235px;
    max-width: 500px;
    margin: 0 auto;
    font-family: "Inter", sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    color: #b5b0ac;
    list-style: none;
}
.main-tables-container li {
    height: 40px;
    min-width: 100px;
    margin: 1px;
    padding: 12px;
    border-radius: 5%;
    text-align: left;
    background-color: var(--just-white);
}
.main-tables-container-coins,
.main-tables-container-coins-value {
    grid-row: 2 / 2;
}
.main-tables-container .main-tables-container-coins-value {
    color: #757575;
    font-size: 1.4rem;
    font-weight: 400;
}
.main-tables-container-coins-value li:nth-child(1) span {
    width: 15px;
    height: 10px;
    background: url(../assets/icons/trending-down.svg) center/cover no-repeat;
}
.main-tables-container-coins-value li:nth-child(2) span {
    width: 15px;
    height: 10px;
    background: url(../assets/icons/trending-up.svg) center/cover no-repeat;
}
.main-tables-container-coins-value li:nth-child(3) span {
    width: 15px;
    height: 10px;
    background: url(../assets/icons/trending-down.svg) center/cover no-repeat;
}
.main-tables-container-coins-value li:nth-child(4) span {
    width: 15px;
    height: 10px;
    background: url(../assets/icons/trending-down.svg) center/cover no-repeat;
}
.main-tables-container-coins-value li {
    display: flex;
    justify-content: space-between;
}
.main-tables-container-subtitle {
    grid-row: 4;
    grid-column: 1 / 3;
    padding: 8px;
    border-radius: 8%;
    font-size: 1.6rem;
    font-weight: 700;
    line-height: 1.9rem;
    background-color: var(--soft-orange);
    color: var(--warm-black);
}
.main-tables-container-subtitle::after {
    content: "19 Octubre 23:10";
    font-weight: 400;
    font-size: 1.2rem;
    line-height: 1.5rem;
}

Nadie le presto atencion a porque le puso 15px en margin bottom :v鈥o si 鈥nteriormente se puso 30 px en margin bottom con .main-exchange-container p 鈥si que se afecta al padre .main-echange-container y lo heredan sus crias

Comparto mi tabla, la hice con puro grid. Me cost贸 mucho pero se logr贸! 馃サ馃サ

HTML

<section class="main-exchange-container__table-container">
                <h3>Monedas</h3>
                <div>
                    <p>Bitcoin</p>
                </div>
                <div>
                    <p>$ 1.96 <span class="trending-down"></span></p>
                </div>
                <div>
                    <p>Ethereum</p>
                </div>
                <div>
                    <p>$ 0.07 <span class="trending-up"></span></p>
                </div>
                <div>
                    <p>Ripple</p>
                </div>
                <div>
                    <p>$ 2.15 <span class="trending-down"></span></p>
                </div>
                <div>
                    <p>Stellar</p>
                </div>
                <div>
                    <p>$ 4.96 <span class="trending-down"></span></p>
                </div>
                <div class="main-exchange-table__footer">
                    <p><span>Actualizado:</span> 19 Julio 23:45</p>
                </div>
            </section>

CSS

.main-exchange-container__table-container {
    display: grid;
    grid-template-columns: 100px 100px;
    justify-content: center;
    gap: 10px;
}

.main-exchange-container__table-container h3 {
    width: 100%;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 23px;
    color: var(--bitcoin-orange);
    grid-column: 1 / -1;
    text-align: left;
}

.main-exchange-container__table-container div:nth-child(even) {
    margin-top: 10px;
    font-size: 1.6rem;
    font-weight: 500;
    font-family: "Inter", sans-serif;
    color: #b5b0ac;
    line-height: 1.9rem;
    text-align: left;
}

.main-exchange-container__table-container div:nth-child(odd) {
    margin-top: 10px;
    font-size: 1.4rem;
    font-weight: 400;
    font-family: "Inter", sans-serif;
    line-height: 1.6rem;
    text-align: center;
    color: #757575;
    text-align: center;
}

.main-exchange-container__table-container .trending-down {
    display: inline-block;
    background-image: url('../icons/trending-down.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 8px;
    margin-left: 10px;
}

.main-exchange-container__table-container .trending-up {
    display: inline-block;
    background-image: url('../icons/trending-up.svg');
    background-position: center;
	background-repeat: no-repeat;
    background-size: cover;
    width: 12px;
    height: 8px;
    margin-left: 10px;
}

.main-exchange-container .main-exchange-container__table-container .main-exchange-table__footer {
    margin: 16px 0;
    grid-column: 1 / -1;
    width: 90%;
    height: 31px;
    padding: 8px;
    text-align: center;
    justify-self: center;
    background-color: var(--soft-orange);
    border-radius: 8px;
}

.main-exchange-table__footer p {
	font-size: 1.2rem;
	font-weight: 400;
    line-height: 1.45em;
    color: var(--warm-black);
}

.main-exchange-table__footer span {
    font-weight: 700;
    text-align: center; 
}

Cada d铆a se aprende m谩s. Este curso es el mejor complemento del Curso definitivo de HTML y CSS

Yo no creo que no es lo mejor usar CSS Grid en este caso, porque si tu vas a la documentaci贸n oficial de MDN puedes ver que el proposito de las tablas es presentar datos (aunque en la era de los dinosaurios 馃 se usaba para el dise帽o) y CSS Grid para el dise帽o.

Tambi茅n una raz贸n para usar tablas en ESTE CASO (aclaro esto porque en muchos casos es mejor CSS Grid) es porque si intentaste hacerlo en css grid pudiste notar es es mas dif铆cil con las tablas

Lo que quiero decir es que debes evaluar en que caso es mejor usar una que otra, y no porque una tecnolog铆a este de moda no quiere decir que sea mejor en TODOS los aspectos.

Aporte para la clase, estoy tomando nota con comentarios a los largo de todo el codigo, como los libros de programacion en c, como el Deitel

Aqu铆 les dejo mi c贸digo que hice con CSS Grid, creo que lo 煤nico que me fall贸 es que al hacer m谩s grande la pantalla no se escala, sin embargo creo que se puede resolver. Espero sus opiniones, muchas gracias 馃槃
HTML

CSS

DOM

Pues ah铆 vamos:

No s茅 si solo yo me di cuenta pero en el Title Diego deja el font family del padre que ser铆a inter pero el archivo de Figma dice DM sans鈥 Vieron eso?

Buenas tardes, ofrezco otra opci贸n con grid layout para quine quiera guiarse.

Secci贸n de html

                <div class="item title"><h3>Monedas</h3></div>
                <div class="item content">
                    <div class="subitem text">Bitcoin</div>
                    <div class="subitem value">$ 1.96</div>
                    <div class="subitem text">Ethereum</div>
                    <div class="subitem value">$ 0.07</div>
                    <div class="subitem text">Ripple</div>
                    <div class="subitem value">$ 2.15</div>
                    <div class="subitem text">Stellar</div>
                    <div class="subitem value">$ 4.96</div>
                </div>
                <div class="item button"><a href=""></a></div>
                <div class="item date">Actualizado<span>: 19 Julio 23:45</span></div>
            </section>

Secci贸n CSS

.main-table-container{
    display: grid;
    grid-template: 35px 159px 31px/197px 38px;
    grid-template-areas:"titulo titulo"
                        "contenido boton"
                        "fecha fecha" ;
    margin-left:calc(50% - 99px);;
}
.item.title{
    grid-area:titulo;
    align-self: center;
    justify-self: start;
    margin-left: 12px;
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: #FF9536;
}
.item.content{
    grid-area: contenido;
    display: grid;
    grid-template: repeat(4,1fr) / 101px 95px;
    border-radius: 10px;
    overflow: hidden;
    gap: 1px;
}
.item.content .subitem{
    display: flex;
    justify-content: start;
    align-items: center;
    padding-left: 12px;
    background-color: var(--white-color);
}
.item.content .text{
    font-family: "inter",sans-serif;
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.9rem;
    color: #B5B0AC;
}
.item.content .value{
    font-family: "Inter",sans-serif;
    font-weight: normal;
    font-size: 14px;
    line-height: 17px;
    color: #757575;
    background-image: url("./assets/imgs/flecha-abajo.svg");
    background-repeat: no-repeat;
    background-position: 80%;
}
.item.content .value:nth-of-type(4){
    background-image: url("./assets/imgs/flecha-arriba.svg");
}
.item.button{
    grid-area: boton;
    display: flex;
    justify-content: center;
    align-items: center;
    background-image: url("./assets/icons/Vector.svg");
    background-repeat: no-repeat;
    background-position: 50% 50%;
}
.item.button a{
    display: block;
    width: 50%;
    height:80%;
}
.item.date{
    grid-area: fecha;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color:var(--soft-orange);
    margin-top: 15px;
    margin-left: 15px;
    border-radius: 5px;
    width: 173px;
    height: 31px;
    font-family: "Inter",sans-serif;
    font-weight: 700;
    font-size: 1.2rem;
    line-height: 1.9rem;
    color: var(--warm-black);

}
.item.date span{
    line-height: 1.4rem;
    font-weight: 500;
}```

Como se llama la extensi贸n en VS Code que utiliza el profesor para cuando hace uso del color en las variables y muestre su color asi en rect谩ngulo.

Hola, comentarles que inici茅 mi Github pages aplicando lo que aprendo de la Escuela de Desarrollo Web 猸愶笍

Les comparto el link, agradecer铆a mucho su feedback positivo y as铆 seguir inmersandome m谩s de esta bonita carrera. 馃槏
No duden en agregar issues de creerlo conveniente con sus aportes.馃挌

https://yajayra18.github.io/
Por ahora estoy avanzando con los issues de mobile 馃摫

![](

.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);
    text-align: left;
}

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

}

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

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

Les comparto una forma que hice diferente para hacer los bordes de la tabla. Lo hice para practicar lo que vi en el primer curso

.currency__table-container table tr:first-child td:first-child {
    border-radius: 8px 0 0 0;
}

.currency__table-container table tr:first-child td:last-child {
    border-radius: 0 8px 0 0;
}

.currency__table-container table tr:first-child td:first-child {
    border-radius: 8px 0 0 0;
}

.currency__table-container table tr:last-child td:first-child{
    border-radius: 0 0 0 8px;
}

.currency__table-container table tr:last-child td:last-child{
    border-radius: 0 0 8px 0;
}

me sale as铆 la dimensi贸n de la tabla

Yo lo hice de esta forma. Espero su feedback

        <section class="tables-container">
          <h3 class="tables-container__title">Coins</h3>
          <div class="tables-container__table">
            <p class="coin-name">Bicoin</p>
            <p class="coin-value">1.96</p>
            <p class="coin-name">Ethereum</p>
            <p class="coin-value">0.07</p>
            <p class="coin-name">Ripple</p>
            <p class="coin-value">2.15</p>
            <p class="coin-name">Stellar</p>
            <p class="coin-value">4.96</p>
          </div>
          <div class="currency">
            <p class="currency__date"><strong>Updated</strong> 19 July 23:45</p>
          </div>
        </section>

CSS

.tables-container {
  height: auto;
  &__table {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 250px;
    height: 159px;
    margin: 0 auto;
    margin-top: 1.2rem;
    background-color: var(--just-white);
  }
  &__title {
    width: 250px;
    height: 20px;
    text-align: left;
    padding-left: 1rem;
    margin: 0 auto;
    margin-top: 3.5rem;
    font-size: 1.8rem;
    font-weight: bold;
    color: var(--bitcoin-orange);
  }
}
.coin-name,
.coin-value {
  padding: 1rem;
  border: 1px solid var(--off-white);
  font-size: 1.6rem;
  font-family: var(--inter-font);
}
.coin-name {
  color: var(--text-gray);
  font-weight: 500;
  text-align: left;
  padding-left: 1rem;
}
.coin-value {
  position: relative;
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--dark-gray);
  &::before {
    content: '$ ';
    margin-right: 0.5rem;
  }
  &:nth-child(even)::after {
    content: '';
    width: 20px;
    height: 10px;
    padding: 1rem;
    margin-left: 0.7rem;
  }
  &:nth-child(2)::after {
    background: url(../icons/trending-down.svg) center no-repeat;
  }
  &:nth-child(4)::after {
    background: url(../icons/trending-up.svg) center no-repeat;
  }
  &:nth-child(6)::after {
    background: url(../icons/trending-down.svg) center no-repeat;
  }
  &:nth-child(8)::after {
    background: url(../icons/trending-up.svg) center no-repeat;
  }
}
.currency {
  font-family: var(--inter-font);
  width: 220px;
  height: 40px;
  border-radius: 0.5rem;
  margin: 0 auto;
  margin-top: 2.5rem;
  background-color: var(--soft-orange);
  &__date {
    // font-weight: 700;
    padding: 1rem;
    font-size: 1.6rem;
    text-align: center;
  }
}

Resultado

Gente, me gustaria saber cual es la diferencia de poner los iconos asi:

<code> 
 <div class="main__table--money"> 
                    <li>Bitcoin</li>
                    <li>Eltherum</li>
                    <li>Ripple</li>
                    <li>Stellar</li>
                    <li class="numbers">$ 1.96<span><img src="./assets/icons/trending-down.svg" alt="bajo"></span></li>
                    <li class="numbers">$ 0.06<span><img src="./assets/icons/trending-up.svg" alt="alto"></span></li>
                    <li class="numbers">$ 2.15<span><img src="./assets/icons/trending-down.svg" alt="bajo"></span></li>
                    <li class="numbers">$ 4.96<span><img src="./assets/icons/trending-down.svg" alt="bajo"></span></li>
                </div>

a como lo esta poniendo el profesor que es directamente en el CSS.
Gracias.

Que extensi贸n permite ver los cuadros de colores encima de los textos en el c贸digo css?

Genial, despu茅s de este curso tomare el de CSS Grid para no utilizar tablas.

dure un rato pero logr茅 hacer esa tabla al 100 con grid y flex ac谩 les comparto el c贸digo, si me pueden dar retro de mejores pr谩cticas estar铆a super!

HTML


<section class="exchange-tablesContainer">
   <div class="tableContainer" >
      <h3>Monedas</h3>
      <section class="grid-tableContainer">
         <div>
            <h4>Bitcoin</h4>
         </div>
         <div>
            <h5>$ 1.96<span></span></h5>
         </div>
         <div>
            <h4>Ethereum</h4>
         </div>
         <div>
            <h5>$ 0.07<span></span></h5>
         </div>
         <div>
            <h4>Ripple</h4>
         </div>
         <div>
            <h5>$ 2.15<span></span></h5>
         </div>
         <div>
            <h4>Stellar</h4>
         </div>
         <div>
            <h5>$ 4.96<span></span></h5>
         </div>
      </section>
      <div class="table-updateDate">
         <p> <span>Actualizado:</span> 19 Julio 23:45 </p>
      </div>
   </div>
</section>

CSS


/*Tablas*/

.exchange-tablesContainer {
	margin-top: 40px;
	width: 65%;
	align-self: center;
	min-width: 110px;
	max-width: 520px;
	text-align: left;
}

.tableContainer {
	display: flex;
	flex-direction: column;
}

.tableContainer h3 {
	font-size: 1.8rem;
	font-weight: 700;
	line-height: 2.3rem;
	color: #ff9536;
	margin-left: 12px;
	margin-bottom: 12px;
}

.grid-tableContainer {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-radius: 8px;
	font-family: 'Inter', sans-serif;
	grid-gap: 1.5px;
}

.grid-tableContainer div {
	padding: 10px 12px;
	display: flex;
	background-color: var(--just-white);
}

.grid-tableContainer div:nth-child(1) {
	border-top-left-radius: 4px;
}

.grid-tableContainer div:nth-child(2) {
	border-top-right-radius: 4px;
}

.grid-tableContainer div:nth-child(7) {
	border-bottom-left-radius: 4px;
}

.grid-tableContainer div:nth-child(8) {
	border-bottom-right-radius: 4px;
}

.grid-tableContainer div:nth-child(2n) {
	justify-content: center;
}

.grid-tableContainer div h4 {
	font-size: 1.6rem;
	font-weight: 500;
	line-height: 1.9rem;
	color: #b5b0ac;
}

.grid-tableContainer div h5 {
	font-size: 1.4rem;
	font-weight: 400;
	line-height: 1.7rem;
	color: #757575;
}

.grid-tableContainer div h5 span {
	display: inline-block;
	margin-left: 10.5px;
	width: 12px;
	height: 8px;
	background-image: url('../assets/icons/trending-down.svg');
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #F5450D;
}

.grid-tableContainer div:nth-child(4) h5 span {
	display: inline-block;
	margin-left: 10.5px;
	width: 12px;
	height: 8px;
	background-image: url('../assets/icons/trending-up.svg') !important;
	background-position: center;
	background-repeat: no-repeat;
	background-size: cover;
	color: #F5450D;
}

.table-updateDate {
	background-color: var(--soft-orange);
	color: var(--warm-black);
	padding: 8px;
	text-align: center;
	margin-top: 16px;
	border-radius: 8px;
	width: 90%;
	align-self: center;
}

.table-updateDate p {
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1.45em;
}

.table-updateDate span {
	font-size: 1.2em;
	font-weight: 700;
	line-height: 1.45em;
}

y as铆 se ve

Luego de mucho esfuerzo pude implementar la tabla en Grid y posicionar la palabra 鈥淢onedas鈥 y estilar la fecha:

Mi c贸digo CSS para lograrlo:

.currency-table--container {
    display: grid;
    grid-template-columns: 101px 95px;
    gap: 1px;
    justify-content: center;
}
.main-currency-table .currency-table--title {
    color: #FF9536;
    font-weight: 700;
    font-size: 1.8rem;
    line-height: 2.344rem;
    position: relative;
    top: 25px;
    right: 45px;
}
.main-currency-table .currency-table--date p {
    margin-top: 30px;
    color: var(--black);
    background-color: var(--soft-orange);
    display: inline-block;
    padding: 8px;
    font-size: 1.2rem;
    line-height: 1.5rem;
    text-align: center;
    border-radius: 8px;
}
.currency-table-box {
    background-color: var(--just-white);
    color: #B5B0AC;
    font-size: 1.6rem;
    line-height: 1.936rem;
    font-weight: 500;
    padding: 10px 12px;
    border-radius: 8px 8px 8px 0px;
}
.table-box-number {
    font-size: 1.4rem;
    color: #757575;
    font-weight: 400;
    line-height: 1.694rem;
}
.currency-table-box span {
    display: inline-block;
    width: 12px;
    height: 12px;
}
.trending_down span{
    background-image: url('./assets/icons/trending-down.svg');
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    top: 2px;
    left: 4px;
}
.trending_up span{
    background-image: url('./assets/icons/trending-up.svg');
    background-position: center;
    background-repeat: no-repeat;
    position: relative;
    top: 2px;
    left: 4px;
}

Lo hice con grid tambien 馃槃
HTML

                <div class="main-currency-table">
                    <p class="currency-table--title">
                        Monedas
                    </p>
                    <div class="currency-table--container">
                       <div class="currency-table-cells"> <p class="cripname">Bitcoin</p> </div>
                       <div class="currency-table-cells"><p class="price">$1.52 <span class="down"></span></p></div>
                       <div class="currency-table-cells"><p class="cripname">Etherum</p></div>
                       <div class="currency-table-cells"><p class="price">$1.71 <span class="up"></span></p></div>
                       <div class="currency-table-cells"><p class="cripname">Ripple</p></div>
                       <div class="currency-table-cells"><p class="price">$0.92 <span class="down"></span></p></div>
                       <div class="currency-table-cells"><p class="cripname">Stellar</p></div>
                       <div class="currency-table-cells"><p class="price">$2.16 <span class="down"></span></p></div>
                    </div>
                </div> ```
CSS 



.currency-table鈥搕itle{
margin-top: 48px;
margin-bottom: 12px;
font-family: DM Sans;
color: #FF9536;
font-size: 1.8rem;
font-weight: 700;
line-height: 2.34rem;

}

.currency-table鈥揷ontainer{
width: 100%;
display: grid;
grid-template: repeat(4,50px)/ 35% 30%;
gap: 1px;
align-content: center;
justify-content: center;

}
.currency-table鈥揷ontainer .currency-table-cells{
background-color: white;
}
.currency-table-cells:nth-of-type(1){
border-radius: 8px 0px 0px 0px;

}
.currency-table-cells:nth-of-type(2){
border-radius: 0px 8px 0px 0px;;
}
.currency-table-cells:nth-of-type(8){
border-radius: 0px 0px 8px 0px;
}
.currency-table-cells:nth-of-type(7){
border-radius: 0px 0px 0px 8px;
}
.cripname{
font-family: Inter;
font-size: 1.6rem;
font-weight: 500;
color: #B5B0AC;
margin: 15px 15px;
}
.price{
font-family: Inter;
font-size: 1.4rem;
font-weight: 400;
color: #757575;
text-align: center;
margin: 15px 15px;

}

.price .down{
display: inline-block;
width: 11px;
height: 6px;
background-image: url(鈥./assets/icons/trending-down.svg鈥);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left: 10px;
}
.price .up{
display: inline-block;
width: 11px;
height: 6px;
background-image: url(鈥./assets/icons/trending-up.svg鈥);
background-position: center;
background-repeat: no-repeat;
background-size: cover;
margin-left: 10px;
}

![Screenshot_1.png](https://static.platzi.com/media/user_upload/Screenshot_1-fc269a9f-bd91-4ccb-a28c-0ed2c7ff3e22.jpg)

Mi tabla con CSS Grid:

      <section class="main--tables-container">
        <h3>Monedas</h3>
        <div class="main--currency-table">
          <span class="right-arrow"></span>
          <div class="row">
            <div class="title">Bitcoin</div>
            <div class="price price-down">$ 1.96 <span></span></div>
          </div>
          <div class="row">
            <div class="title">Ethereum</div>
            <div class="price price-up">$ 0.07<span></span></div>
          </div>
          <div class="row">
            <div class="title">Ripple</div>
            <div class="price price-down">$ 2.15<span></span></div>
          </div>
          <div class="row">
            <div class="title">Stellar</div>
            <div class="price price-down">$ 4.96<span></span></div>
          </div>
        </div>
        <div class="main--table-update">
          <p><strong>Actualizado:</strong> 19 de Julio 1943</p>
        </div>
      </section>```




.main鈥搕ables-container {
font-family: 鈥業nter鈥, sans-serif;
}

.main鈥搕ables-container h3 {
text-align: left;
padding-left: 12px;
margin-bottom: 12px;
font-size: 1.8rem;
font-family: 鈥楧M Sans鈥, sans-serif;
color: var(鈥揵itcoin-orange);
}

.main鈥搕ables-container .main鈥揷urrency-table .row {
display: grid;
grid-template-columns: 101px 95px 1fr;
grid-template-rows: 39px;
border-bottom: 1px solid var(鈥搊ff-white);
}
.main鈥揷urrency-table {
position: relative;
background-color: var(鈥搄ust-white);
border-radius: 8px;
}

.main鈥揷urrency-table .right-arrow {
position: absolute;
top: calc(50% - 5px);
right: -40px;
display: inline-block;
width: 13px;
height: 8px;
background-image: url(鈥/assets/icons/arrow-down.svg鈥);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
transform: rotate(-90deg);
}

.main鈥揷urrency-table .row:last-child {
border-bottom: none;
}

.main鈥揷urrency-table .title {
display: flex;
align-items: center;
padding-left: 12px;
border-right: 1px solid var(鈥搊ff-white);
font-size: 1.6rem;
color: #b5b0ac;
}

.main鈥揷urrency-table .price {
display: flex;
align-items: center;
justify-content: space-between;
padding-left: 12px;
font-size: 1.4rem;
font-weight: 300;
color: #757575;
}

.main鈥揷urrency-table .price span {
display: inline-block;
margin-right: 15px;
width: 12px;
height: 12px;
}

.main鈥揷urrency-table .price-down span {
background-image: url(鈥/assets/icons/trending-down.svg鈥);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.main鈥揷urrency-table .price-up span {
background-image: url(鈥/assets/icons/trending-up.svg鈥);
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}

.main鈥搕ables-container .main鈥搕able-update {
padding: 8px;
margin: 15px 15px 64px 15px;
border-radius: 8px;
border: none;
background-color: var(鈥搒oft-orange);
}


Les comparto la forma como hice la tabla
Resultado

HTML

<div class="main-commission-table">
<h3 class="commission-table__title">Comisones</h3>
<div class="commission-table__container">
<ul class="table-right">
       	<li>Bitrade</li>
        <li>Bitpreco</li>
        <li>Novadax</li>
        <li>Coinext</li>
</ul>
<ul class="table-left">
        <li>$ 12.96 </li>
         <li>$ 13.07 </li>
         <li>$ 13.15 </li>
         <li>$ 14.96 </li>
</ul>
</div>
<div class="commission-table__date">
       <p><b>Actualizado:</b> 19 Julio 23:48</p>
</div>
</div>

CSS

/* Estilos a la Tabla */
.main-commission-table {
    width: 200px;
    margin: 0 auto;
    margin-top: 40px;
}

.main-commission-table h3 {
    padding: 0 12px;
    font-weight: bold;
    font-size: 1.8rem;
    line-height: 2.3rem;
    color: var(--secondary-blue);
}

.commission-table__container {
    display: grid;
    grid-template-columns: 100px 88px;
}

.commission-table__container li {
    padding: 10px 12px;
    list-style-type: none;
}

.commission-table__container .table-right {
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.9rem;
    color: #B5B0AC;
}

.commission-table__container .table-left {
    font-weight: normal;
    font-size: 1.4rem;
    line-height: 1.7rem;
    color: #757575;
}

.commission-table__date {
    width: 180px;
    padding: 8px;
    background: var(--soft-blue);
    border-radius: 8px;
    /* Texto */
    text-align: center;
    font-size: 1.2rem;
    line-height: 1.5rem;
    color: var(--black);
}

HTML

 <div class="box">
                <div class="box-item criptoTitle">
                    <h3>Monedas</h3>
                </div>
                <div class="box-item criptoMoney">
                    <!-- name -->
                    <p class="criptoMoney-item criptoMoney-name">
                        Bitcoin
                    </p>
                    <!-- price -->
                    <p class="criptoMoney-item criptoMoney-value">
                        $ 1.96
                        <span></span>
                    </p>
                    <!-- name -->
                    <p class="criptoMoney-item criptoMoney-name">
                        Ethereum
                    </p>
                     <!-- price -->
                    <p class="criptoMoney-item criptoMoney-value">
                        $ 0.07
                        <span class="up-row"></span>
                    </p>
                     <!-- name -->
                    <p class="criptoMoney-item criptoMoney-name">
                        Ripple
                    </p>
                     <!--price-->
                    <p class="criptoMoney-item criptoMoney-value">
                        $ 2.15
                        <span></span>
                    </p>
                    <!--name-->
                    <p class="criptoMoney-item criptoMoney-name">
                        Stellar
                    </p>
                    <!--price-->
                    <p class="criptoMoney-item criptoMoney-value">
                        $ 4.96
                        <span></span>
                    </p>
                </div>
                <div class="box-item criptoRow">
                    <span></span>
                </div>
            </div>

            <div class="ctnFirst-date">
                <h3><strong>Actualizado:</strong></h3>
                <p>19 Julio 23:45</p>
            </div>

CSS

.box{
    display:grid;
    grid-template: 20% 70% /repeat(2,40%) 20%;
    grid-template-areas: "header header ."
                         "main main aside"
                         "main main aside"
                         "main main aside"
                         "main main aside";
    gap: 5px;
    width: 80%;
    min-width: 23.5rem;
    max-width: 50rem;
    height: 19.4rem;
    margin: auto;
    margin-right: 1rem;
    margin-top: 4.7rem;
    margin-bottom: 1.6rem;
}
.box-item{
    width:100%;
    height:100%
}
.box-item:nth-child(1)
{
    grid-area: header;
}
.criptoTitle{
    font-family: 'DM Sans', sans-serif;
    font-size: 1.8rem;
    font-weight: 700;
    line-height: 2.3rem;
    color:#FF9536;
}
.box-item:nth-child(2)
{
    grid-area: main;
    display:grid;
    grid-template: repeat(4,minmax(3.9rem,80%)) /repeat(2,minmax(10.1rem,80%));
    place-items: center;
    gap: 1px;
    border-radius:12px;
    background: #E5E5E5;
}
.criptoMoney-item{
    display:flex;
    align-items:center;
    justify-content:space-evenly;
    width: 100%;
    height:100%;

    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    letter-spacing: -0.02em;

    color: #B5B0AC;
    background: #FFFFFF;
}
.criptoMoney-name{
    justify-content: flex-start;
    padding-left: 2rem;
}
.criptoMoney-value{
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7rem;
    letter-spacing: -0.02em;

    color: #757575;
}
.criptoMoney-item:nth-child(1){
    border-top-left-radius: 7px;
}
.criptoMoney-item:nth-child(2){
    border-top-right-radius: 7px;
}
.criptoMoney-item:nth-child(7){
    border-bottom-left-radius: 7px;
}
.criptoMoney-item:nth-child(8){
    border-bottom-right-radius: 7px;
}
.criptoMoney-item span {
    width: 1.6rem;
    height: 1.6rem;
    background-image: url("../public/assets/icons/trending-down.svg");
    background-repeat: no-repeat;
}
.criptoMoney-item .up-row{
    background-image: url("../public/assets/icons/trending-up.svg");
}
.box-item:nth-child(3)
{
    grid-area: aside;
    display: flex;
    align-items: center;
    justify-content: center;
}
.box-item:nth-child(3) span {
    width: 1.6rem;
    height: 1.6rem;
    background-image: url("../public/assets/icons/right-arrow.svg");
    background-repeat: no-repeat;
}
.ctnFirst-date{
    display: flex;
    align-items: center;
    justify-content: space-evenly;
    width: 18.3rem;
    height:3.1rem;
    margin:auto;


   font-family: 'Inter', sans-serif;
   font-size: 1.2rem;
   font-weight: 400;
   line-height: 1.5rem;


    border-radius: 8px;
    background: #FFE9D4;
}

Aqu铆 les dejo un grid generator:

https://grid.layoutit.com/

Muy bien este curso. Pero se nota la experiencia del profesor. Es mas complicado para un principiante de hacer eso jejeje.

Lo hice con grid, tengo que mejorar el c贸digo, pero al menos logre el desafio y me hizo dar cuenta que necesito mas practica con Grid.

Les comparto mi tabla hecha con grid-layout me falta aun agregarle los iconos pero es trabajo honesto.

Hola. Les comparto este repositorio que sirve de gu铆a para el examen final, pues contiene las preguntas que se encuentran en el examen, la justificaci贸n y el video del curso donde se habla sobre eso. Espero y les sea de utilidad 馃槃.
Platzi-Test

Demor茅 rat铆simo sacarla con CSS Grid layout, pero lo logr茅. Les dejo un screenshot, tanto del maquetado como del CSS. Adem谩s, el c贸digo pers茅:

HTML screenshot:

CSS screenshot:

HTML code:

            <section class="main-table-container">
                <p>Monedas</p>
                <div class="table__wrapper">
                    <div class="table-coins">
                        <div class="table__row--coins">
                            <div class="row--coin">Bitcoin</div>
                            <div class="row--coin">Ethereum</div>
                            <div class="row--coin">Ripple</div>
                            <div class="row--coin">Stellar</div>
                        </div>
                        <div class="table__row--price">
                            <div class="row--price">
                                <span class="row__price--number">
                                    $ 1.96
                                    <span class="row__price--indicator price-down"></span>
                                </span>
                            </div>
                            <div class="row--price">
                                <span class="row__price--number">
                                    $ 0.07
                                    <span class="row__price--indicator price-up"></span>
                                </span>
                            </div>
                            <div class="row--price">
                                <span class="row__price--number">
                                    $ 2.17
                                    <span class="row__price--indicator price-down"></span>
                                </span>
                            </div>
                            <div class="row--price">
                                <span class="row__price--number">
                                    $ 4.96
                                    <span class="row__price--indicator price-down"></span>
                                </span>
                            </div>
                        </div>
                    </div>
                    <span class="table--arrow"></span>
                </div>
                <span class="table--update">
                    <strong>Actualizado: </strong> 19 julio 23:45
                </span>
            </section>

CSS code:

.main-table-container p {
  text-align: left;
  margin-left: 1rem;
  color: var(--bitcoin-orange);
  margin-bottom: 1.5rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 2.3rem;
}

.table__wrapper {
  display: grid;
  grid-template-columns: 1fr 15px;
}

.table__wrapper .table--arrow {
  display: flex;
  align-items: center;
  margin-left: 1rem;
  padding-left: 3rem;
  background-image: url("./assets/icons/arrow_right_black.png");
  background-position: center;
  background-repeat: no-repeat;
}

.table-coins {
  display: grid;
  grid-template-columns: 1fr auto;
  column-gap: 2rem;
  background-color: var(--just-white);
  border-radius: 5px;
  font-family: var(--font-inter);
  font-style: normal;
}

.table-coins .table__row--coins {
  text-align: left;
  color: #b5b0ac;
  font-weight: 500;
  font-size: 1.6rem;
  line-height: 1.936rem;
  letter-spacing: -0.02em;
}

.table__row--coins .row--coin {
  padding: 1rem;
}

.table-coins .table__row--price {
  align-self: end;
  justify-self: left;
  text-align: center;
  color: #757575;
  font-weight: 400;
  font-size: 1.4rem;
  line-height: 1.7rem;
  letter-spacing: -0.02em;
}

.table__row--price .row--price {
  padding: 1.1rem 0;
}

.row--price .row__price--indicator {
  width: 2rem;
  height: 1.5rem;
  display: inline-block;
  margin-left: 0.5rem;
  margin-right: 1rem;
  margin-bottom: -3px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}

.price-down {
  background-image: url("./assets/icons/trending_down.png");
}

.price-up {
  background-image: url("./assets/icons/trending_up.png");
}

.table--update {
  display: inline-block;
  width: 85%;
  height: 25px;
  margin-top: 2rem;
  margin-left: -1.5rem;
  border-radius: 5px;
  color: var(--warm-black-1);
  background-color: var(--soft-orange);
  font-size: 12px;
  line-height: 15px;
  /* font-weight: 700;
   */
}

.table--update strong {
  display: inline-block;
  margin-top: 4px;
}

Y as铆 luce:

Por si alguien lo not贸, el profesor no aplica exactamente todos los tama帽os (width, height, line鈥揾eight, margin) que se ven del proyecto en figma.

VI QUE VARIOS LO HICIERON DE FORMA DISTINTA, AQUI LES DEJO MI FORMA

HTML

<div class="section-top--container-price_coins">
                <p class="section-coins">Monedas</p>
                <article>
                    <img src="./images/2-main/icons/flechita2.svg" alt="">
                    <div class="container-price_coins">
                        <div class="crypto">
                            <p>Bitcoin</p>
                            <p>$ 1.96</p>
                            <img src="./images/2-main/icons/price_rise.svg" alt="">
                        </div>
                        <div class="crypto">
                            <p>Ethereum</p>
                            <p>$ 0.07</p>
                            <img src="./images/2-main/icons/price_drop.svg" alt="">
                        </div>
                        <div class="crypto">
                            <p>Ripple</p>
                            <p>$ 2.15</p>
                            <img src="./images/2-main/icons/price_rise.svg" alt="">
                        </div>
                        <div class="crypto">
                            <p>Stellar</p>
                            <p>$ 4.96</p>
                            <img src="./images/2-main/icons/price_rise.svg" alt="">
                        </div>
                        
                    </div>
                    <img src="./images/2-main/icons/flechita.svg" alt="">
                </article>
                <p class="section-date"><span>Actualizado:</span> 19 Julio 23:45</p>
            </div

CSS

main .section-top--container-price_coins > .section-coins {
    margin-bottom: 12px;
    margin-left: 48px;
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--bitcoin-orange);
}
main .section-top--container-price_coins article {
    display: grid;
    grid-template-columns: auto 3fr auto;
    justify-items: center;
    align-items: center;
    margin-bottom: 15px;
}
article .container-price_coins {
    margin: 0 40px;
}
article .container-price_coins .crypto {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
}
article .container-price_coins .crypto p:nth-child(1) {
    width: 80px;
    margin-right: 20px;
    color: #B5B0AC;
    font-size: 1.6rem;
}
article .container-price_coins .crypto p:nth-child(2) {
    width: 50px;
    margin-right: 10px;
    color: var(--grey);
    font-size: 1.4rem;
}
main .section-top--container-price_coins .section-date {
    /* border: 1px solid black; */
    background-color: var(--soft-orange);
    width: 173px;
    height: 31px;
    margin: 0 auto;
    padding: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1.2rem;
    text-align: center;
    border-radius: 8px;
    box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
}
main .section-top--container-price_coins .section-date span {
    font-weight: bold;
}

Mi tabla con display Grid

.main-table--currency-container {
    width: 70%;
    min-width: 235px;
    max-width: 300px;
    height: auto;
    margin: 0 auto;
    font-family: var(--font-inter), sans-serif;
}
.currency-table--title h3{
    text-align: left;
    margin-bottom: 1.5rem;
    margin-left: 1.2rem;
    font-family: var(--font-DM);
    font-size: 1.8rem;
    line-height: 2.3rem;
    font-weight: var(--size-700);
    color: var(--bitcoin-orange);
}
.currency-table {
    background: var(--just-white);
    margin: 0 auto;
    border-radius: .8rem;
    /* Estilos grid*/
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-auto-rows: 4rem;
    /* Visualez*/
    box-shadow: 0 0 .5rem rgb(226, 226, 226);
}
.currency-table .table__item-bitcoin {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0 1.2rem;
    /*Estilos visuales*/
    font-size: 1.6rem;
    font-weight: var(--size-500);
    color: #B5B0AC;
}
.currency-table .table__item-value {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 0 1.5rem;
    /*Estilos visuales*/
    font-size: 1.4rem;
    font-weight: var(--size-400);
    color: var(--gray);
}
.table__item-value .icon-trading-down {
    display: inline-block;
    width: 1.2rem;
    height: 1.5rem;
    background-image: url('./assets/icons/trending-down.svg');
}
.table__item-value .icon-trading-up {
    display: inline-block;
    width: 1.2rem;
    height: 1.5rem;
    background-image: url('./assets/icons/trending-up.svg');
}
---------------------------------------------------------------------------
<section class="main-tables">
          <div class="main-table--currency-container">
            <div class="currency-table--title">
              <h3>Monedas</h3>
            </div>
            <div class="currency-table">
              <div class="table__item-bitcoin">Bitcoin</div>
              <div class="table__item-value">$1.96 <span class="icon-trading-down"</span> </div>
              <div class="table__item-bitcoin">Ethereum</div>
              <div class="table__item-value">$0.07 <span class="icon-trading-up"></span> </div>
              <div class="table__item-bitcoin">Ripple</div>
              <div class="table__item-value">$2.15 <span class="icon-trading-down"></span> </div>
              <div class="table__item-bitcoin">Stellar</div>
              <div class="table__item-value">$4.96 <span class="icon-trading-down"></span> </div>
            </div>
            <div class="currency-table--date">
              <p><b>Actualizado</b>: 19 julio 23:45</p>
            </div>
          </div>
        </section>
.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.6rem;
    color: var(--bitcoin-orange);
    text-align: left;
}

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

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

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

Para centrar elementos de manera mas limpia y concisa, pueden usar 鈥渕argin-inline: auto鈥. De esa manera evitan tener que especificar medidas para top y bottom usando unicamente 鈥渕argin鈥.

Despacio pero seguro

tantas clases de estilos me marea! =(

buen video amigo

Good class. Everything was clear.

馃憣

Completado con grid 馃槃

div .monedas{
    font-size:1.8rem;
    line-height: 2rem;
    font-weight: 700; 
    color: #FF9536;
    margin: 0 0 15px 20%;
    text-align: start;
}

.fecha-container{
    border-radius: 8px;
    background-color: var(--soft-orange);
    margin: 0 20%;
    height: 31px;
}

.fecha-p{
    font-size:1.2rem;
    font-family:'Inter', sans-serif;
    padding: 6px 0;
}

.main-tables-container{
    display: grid;
    grid-column-gap:2px; 
    grid-row-gap: 2px;
    width: 60%;
    grid-template-columns: [x0] 1fr [x1] 1fr [x2];
    grid-template-rows: [y0] 1fr [y1] 1fr [y2] 1fr [y3] 1fr [y4];
    font-family:'Inter', sans-serif;
    font-size:1.6rem ;
    line-height: 3rem;
    margin: 0 20% 20px 20%;
    
    border-radius: 8px;
    text-align: left;
}

.item1{
    grid-column: x0 / x1;
    grid-row: y0 / y1 ;
    padding-left: 10px;
    background-color: #fff;
}
.item2{
    grid-column: x0/ x1 ;
    grid-row: y1 / y2 ; 
    padding-left: 10px;
    background-color: #fff;
}
.item3{
    grid-column: x0 / x1 ;
    grid-row: y2 / y3 ;
    padding-left: 10px;
    background-color: #fff;
}
.item4{
    grid-column: x0 / x1 ;
    grid-row: y3 / y4 ;
    padding-left: 10px;
    background-color: #fff;
}
.item5{
    grid-column: x1 / x2 ;
    grid-row: y0 / y1 ;
    padding-left: 10px;
    background-color: #fff;
}
.item6{
    grid-column: x1 / x2 ;
    grid-row: y1 / y2 ;
    padding-left: 10px;
    background-color: #fff;
}
.item7{
    grid-column: x1 / x2 ;
    grid-row: y2 / y3 ;
    padding-left: 10px;
    background-color: #fff;
}
.item8{
    grid-column: x1 / x2 ;
    grid-row: y3 / y4 ;
    padding-left: 10px;
    background-color: #fff;
}

.main-tables-container .span-d{
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url(./assets/icons/trending-down.svg);
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
    
}

.main-tables-container .span-u{
    display: inline-block;
    width: 13px;
    height: 13px;
    background-image: url(./assets/icons/trending-up.svg);
    background-size:cover;
    background-position: center;
    background-repeat: no-repeat;
}```

Disculpen compa帽eros saben por que a mi no me sale con ese peque帽o margen de separaci贸n entre cada elemento de la tabla?

les dejo mi codigo:
html

<section class="main-tables-container">
          <div class="main-currency-table">
            <p class="currency-table--title">Monedas</p>
            <section class="grid-currency-table">
              <div class="coin"><h4>Bitcoin</h4></div>
              <div class="mount"><h5>$ 1.96</h5></div>
              <div class="coin"><h4>Ethereum</h4></div>
              <div class="mount"><h5>$ 0.07</h5></div>
              <div class="coin"><h4>Ripple</h4></div>
              <div class="mount"><h5>$ 2.15</h5></div>
              <div class="coin"><h4>Stellar</h4></div>
              <div class="mount"><h5>$ 4.96</h5></div>
            </section>
            <div class="grid-currency-table-date">
              <p><b>Actualizado:</b> 19 Julio 23:45</p>
            </div>
          </div>
        </section> ```

**css**


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

.main-currency-table .currency-table鈥搕itle{
margin-bottom: 15px;
font-size: 1.8rem;
font-weight: 700;
line-height: 2.3rem;
color: var(鈥揵itcoin-orange);
}

.grid-currency-table {
display: grid;
grid-template-columns: repeat(2, 1fr);
align-items: center;
width: 90%;
min-width: 230px;
max-width: 300px;
height: 250px;
border-radius: 10px;
margin-bottom: 20px;
background-color: var(鈥搄ust-white);

}

.grid-currency-table .coin {
justify-self: flex-start;
padding-left: 10px;
font-size: 1.6rem;
font-weight: 500;
line-height: 1.9rem;
color: var(鈥揼rey);
}

.grid-currency-table-date {
font-size: 1.6rem;
} ```