No tienes acceso a esta clase

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

Estructura de tabla de monedas

14/32
Recursos

Vamos a crear el c贸digo para las tablas de nuestro proyecto. Observamos en el dise帽o un total de dos tablas. Mientras que aqu铆 aprender谩s el desarrollo total de una, tu reto ser谩 completar la segunda, 隆con todo y estilos!

Pasos para hacer la maquetaci贸n

  • Vamos a la secci贸n que creamos anteriormente con la clase de main-tables-container.
  • Dentro del div, creamos una etiqueta p para el texto 鈥Monedas鈥.
  • Abajo creamos otra etiqueta div que contendr谩 la etiqueta table, que la tabla en s铆.
  • Trabajamos con dos etiquetas m谩s: tr (table row) para las filas y td (table data) que va dentro, para la informaci贸n de cada fila.
  • Agregamos la informaci贸n correspondiente, en base al dise帽o sobre el que trabajamos.
            <section class="main-tables-container">
                <div>
                    <p>Monedas</p>
                    <div>
                        <table>
                            <tr>
                                <td>Bitcoin</td>
                                <td>$1.96</td>
                            </tr>
                            <tr>
                                <td>Ethereum</td>
                                <td>$0.07</td>
                            </tr>
                            <tr>
                                <td>Ripple</td>
                                <td>$2.15</td>
                            </tr>
                            <tr>
                                <td>Stellar</td>
                                <td>$4.96</td>
                            </tr>
                        </table>
                    </div>
                </div>
            </section>

Podremos ver que la informaci贸n se organiza como si se tratara de una tabla de excel. Cada celda ocupa un espacio igual y se organiza una sobre otra.
image.png

C贸mo a帽adir las clases

Empezamos a a帽adir las clases para poder aplicar estilos.

  • Al primer div lo nombramos main-currency-table porque se trata de la tabla de valores actuales.
  • Nombramos currency-table鈥搕itle a la etiqueta p como t铆tulo del contenedor.
  • currency-table鈥揷ontainer al div por ser el contenedor directo de la tabla.
  • No necesitamos agregarle clases a la etiqueta tabla o a las filas, pero s铆 al contenido. Por ejemplo, la primera ser铆a table__top left. Agregamos un doble gui贸n bajo porque seg煤n la metodolog铆a BEM, es para diferenciar un elemento (table) de un bloque y modificador (top_left).
  • Al precio le a帽adimos dos clases: table__top-right table-right. Esto es porque tanto la columna de nombres como la de precios tienen estilos distintos. De esta manera podremos llamar una sola clase y aplicar los estilos a todos los que la contienen.
  • A帽adimos la clase table-right a todas las celdas con precios de la tabla. A la 煤ltima celda colocamos antes la clase table__bottom-right por ser la 煤ltima.
  • A帽adimos la clase table__buttom-left a la 煤ltima fila de la tabla. Como ves, s贸lo la primera y 煤ltima fila tienen clases adicionales.
  • Ya s贸lo nos falta el contenedor en el que se actualiza la informaci贸n. Lo creamos fuera del div que contiene la tabla y le agregamos una etiqueta p para el texto que contiene.
  • Resaltamos la palabra mostrada en negritas coloc谩ndola dentro de la etiqueta b.
  • Por 煤ltimo le a帽adimos la clase currency-table鈥揹ate al nuevo contenedor creado para poder aplicarle estilos
            <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></span></td>
                            </tr>
                            <tr>
                                <td>Ethereum</td>
                                <td class="table__right">$0.07</td>
                            </tr>
                            <tr>
                                <td>Ripple</td>
                                <td class="table__right">$2.15</td>
                            </tr>
                            <tr>
                                <td class="table__buttom-left">Stellar</td>
                                <td class="table__bottom-right table__right">$4.96</td>
                            </tr>
                        </table>
                    </div>
                    <div class="currency-table--date">
                        <p><b>Actualizado:</b> 19 de julio 23:45</p>
                    </div>
                </div>
            </section>

El resultado renderizado en el navegador mostrar铆a:
image.png

隆Bien! Hemos maquetado la tabla de la primera secci贸n del proyecto. Recuerda que a煤n falta otra que es parte de tu reto. Ahora, 隆vamos por esos estilos para las tablas!

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

Aportes 98

Preguntas 23

Ordenar por:

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

o inicia sesi贸n.

Aprender a usar <table> nos da un valor agregado bastante importante ya que esta es la forma con la cual se maquetan y dise帽an los emails (Platzi tiene un curso sobre esto). De esta forma podr铆amos colaborar con el equipo de email marketing para crear emails atractivos. 馃槑
.

Me parece que est谩 usando el __ y el 鈥 de la metodolog铆a BEM al rev茅s, usa el __ para los modificadores cuando deber铆a ser 鈥 y viceversa. Confunde un poco.

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

Para que se vea un poco mas din谩mica la fecha, (ya que no estamos en Julio鈥) pueden usar esta linea de JS para que les cargue la fecha y hora del momento:

 <p>Actualizado el: <script> document.write(new Date().toLocaleString());</script> </p>

En mi caso para no tener confusiones con BEM busque el siguiente v铆deo: https://www.youtube.com/watch?v=wDUwGo98JTA&ab_channel=WEBPUNK

y aplique la siguiente nomenclatura para las clases de la tabla:

Entendiendo que:
Bloque = Section = "currency"
Eelemento = div = "tabla"
Mmodificador = p = 鈥渢itle鈥

etiquetas de tabla:

C贸digo en vscode para generar la tabla con sus rows:

table>tr*4>td*2

Reto cumplido implementando grid, me siento un poquito orgulloso de mi mismo 馃槃.
Agradeceria algo de feedback 馃槉

Resultado:

HTML:

CSS:

Dejo por ac谩 una extensi贸n para VSCode, que permite previsualizar archivos .svg

https://marketplace.visualstudio.com/items?itemName=cssho.vscode-svgviewer

Creo que odio las tablas

Un peque帽o tip para agregar s铆mbolos a los precios:

Si utilizan el psudelement before y le agregan el s铆mbolo 鈥$鈥 no tienen que escribirlo cada vez

.Cripto-grid__price {
        font-family: 'Inter';
        font-size: 14px;
        line-height: 17px;
        font-weight: 400;
        color: #757575;
}
.Cripto-grid__price::before {
        content:"$";
        display: inline-block;
        margin-right: 4px;
}

En este link puedes generar autom谩ticamente tablas con etiquetas HTML de manera m谩s sencilla.

https://www.tablesgenerator.com/html_tables#

Se puede agregar un script para actualizar la hora actual. Agrup贸 en una etiqueta span con id=鈥渇echaActual鈥.

<div class="currency-table--date">
	<p><b>Actualizado:</b><span id="fechaActual"></span></p>
 </div>

Luego cre贸 la etiqueta de script para que tome la hora actual:

    <script>
      let fecha = new Date();
      fecha.getDate;
      document.getElementById("fechaActual").innerHTML = fecha;
    </script>

Por si necesitas una vista grafica:

Utilizando grid 馃槂


Lo importante es no rendirse, ah铆 vamos 馃槃

Lo hice con Grid. Me qued贸 as铆鈥

.HTML

<section class="exchange">
            <div class="exchange__background-img"></div>
            <div class="title-container title-container--exchange">
                <h2 class="title">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>
            <div class="coins-and-fees">
                <section class="coins">
                    <h3 class="coins__title">Monedas</h3>
                    <div class="coins__table">
                        <div class="coins__names">
                            <div class="table__item">Bitcoin</div>
                            <div class="table__item">Ethereum</div>
                            <div class="table__item">Ripple</div>
                            <div class="table__item">Stellar</div>
                        </div>
                        <div class="coins__prices">
                            <div class="table__item item--coin-price">$ 1.96<span class="tendency tendency--down"></span></div>
                            <div class="table__item item--coin-price">$ 0.07<span class="tendency tendency--up"></span></div>
                            <div class="table__item item--coin-price">$ 2.15<span class="tendency tendency--down"></span></div>
                            <div class="table__item item--coin-price">$ 4.96<span class="tendency tendency--down"></span></div>
                        </div>
                    </div>
                    <div class="coins__last-update"><b>Actualizado:</b> 19 Julio 23:45</div>
                </section>
                <div class="exchange__button exchange__button--left"></div>
            </div>
        </section>

.
CSS

/*** Exchange section styles ***/
.exchange {
	background-color: var(--light-background-color);
	padding: 25px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-width: 320px;
	text-align: center;
	width: 100%;
}

.exchange__background-img {
	background-image: url(./assets/imgs/bitcoin.svg);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	margin: 20px auto;
	height: 200px;
	width: 100%;
}

.title-container--exchange {
	height: 180px;
}

.exchange p {
	color: var(--grey-color);
}

.coins-and-fees {
	display: grid;
	grid-template-columns: 95% 5%;
}

.coins__title {
	grid-column: 1/3;
	color: var(--primary-color);
	font-size: 1.8rem;
}

.coins__table {
	background-color: var(--light-color);
	border-radius: 16px;
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	margin: 15px auto;
	max-width: 300px;
	width: 80%;
}

.table__item {
	border-bottom: 2px solid var(--light-background-color);
	color: var(--light-grey-color);
	font-family: var(--font-inter);
	font-size: 1.6rem;
	line-height: 19px;
	padding: 15px;
	text-align: left;
}

.item--coin-price {
	border-right: 2px solid var(--light-background-color);
	color: var(--grey-color);
	font-size: 1.4rem;
	font-weight: normal;
	display: flex;
	justify-content: space-around;
	align-items: center;
}

.tendency {
	background-repeat: no-repeat;
	background-position: bottom;
	background-size: contain;
	height: 15px;
	width: 25px;
}

.tendency--up {
	background-image: url(./assets/icons/trending-up.svg);
}

.tendency--down {
	background-image: url(./assets/icons/trending-down.svg);
}

.coins__last-update {
	background-color: var(--primary-soft-color);
	border-radius: 8px;
	color: var(--grey-color);
	font-size: 1.2rem;
	margin: 0 auto;
	padding: 8px;
	width: 65%;
}

.exchange__button {
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	cursor: pointer;
	max-width: 20px;
	height: 50px;
	width: 100%;
}

.exchange__button--left {
	background-image: url(./assets/icons/right-arrow.svg);
	align-self: center;
}

Yo hice las tablas antes de ver la clase, hice 2, una con grid y una con <table> pero mi codigo tiene muchas menos clases, es necesario usar tantas? ayuda a la manutencion del codigo? A veces siento que alguien deberia revisar mi codigo para ver que estoy haciendo mal o bien

Las etiquetas <tr> (del ingl茅s 鈥渢able row鈥) definen cada fila de la tabla y encierran todas las columnas. Por 煤ltimo, la etiqueta <td> (del ingl茅s 鈥渢able data cell鈥)

El profesor tiene la voz cono Gok煤!

Costo bastante pero logre hacerlo con grid鈥
Aqu铆 les dejo mi repo : https://github.com/JairoPozo/Proyecto_Bit

HTML

 <section class="main-tables-container">
                <div class="table__information">
                    <h3 class="table__title">Monedas</h3>
                    <p class="table__money">Bitcoin</p>
                    <div class="table__price">
                        <p>$1.96</p> <span></span>
                    </div>
                    <p class="table__money">Ethereum</p>
                    <div class="table__price">
                        <p>$0.07</p> <span></span>
                    </div>
                    <p class="table__money">Ripple</p> 
                    <div class="table__price">
                        <p>$2.15</p> <span></span>
                    </div>
                    <p class="table__money">Stellar</p> 
                    <div class="table__price">
                        <p>$4.96</p> <span></span>
                    </div>
                    <div class="table__update">
                        <strong>Actualizado :</strong>
                        <span>25 de Enero 13:00</span>
                    </div>
                </div>
            </section>

CSS

.table__information{
  display:grid;
  grid-template-columns: [Moneda]1fr 1fr[Precio];
  grid-template-rows: repeat(6,1fr);
  width: 70%;
  justify-items: start;
  margin: 0 auto;
}
.table__information > p {
  padding-left: 10px;
  text-align: start;
  width: 100%;
  padding: 12px 10px;
  background-color: var(--just-white);
  border: 1px solid var(--off-white);
}
.table__information > p:first-of-type{
  border-radius: 8px 0px 0px 0px;
}
.table__information > p:last-of-type{
  border-radius: 0px 0px 0px 8px;
}
.table__title{
  grid-column-start: Moneda;
  grid-column-end: Precio;
  padding-left: 10px;
  font-weight: bold;
  font-size: 1.8rem;
  margin-bottom: 12px;
  color: var(--bitcoin-orange);
}
.table__update{
  grid-column-start: Moneda;
  grid-column-end: Precio;
  align-self: center;
  justify-self: center;
  width: 90%;
  padding: 8px;
  border-radius: 8px;
  background-color: var(--soft-orange);
  color: var(--warm-black);
}
.table__update{
font-family: var(--font-inter);
font-size: 1.2rem;
}
.table__money{
  grid-column-start: Moneda;
  font-family: var(--font-inter);
  font-weight: var(--size-500);
  font-size: 1.6rem;
  color: #b5b0AC;
}
.table__price{
  grid-column-end: Precio;
  position: relative;
  text-align: start;
  width: 100%;
  padding: 12px 10px;
  background-color: var(--just-white);
  border: 1px solid var(--off-white);
}
.table__price:first-of-type{
  border-radius: 0px 8px 0px 0px;
}
.table__price:last-of-type{
  border-radius: 0px 0px 8px 0px;
}
.table__price > p{
  display: inline-block;
  padding-left: 10px;
  font-family: var(--font-inter);
  font-weight: var(--size-400);
  font-size: 1.4rem;
  color:var(--strong-grey);
}
.table__price > span{
  display: inline-block;
  position: absolute;
  right:16px;
  top: 30%;
  bottom:25%;
  width: 12px;
  height: 12px;
  background-image: url("../assets/icons/trending-down.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}
.table__information > .table__price:nth-of-type(2) > span{
  background-image: url("../assets/icons/trending-up.svg");
  background-position: center;
  background-size: contain;
  background-repeat: no-repeat;
}

Si tienen VSC pueden generar la tabla escribiendo

table>(tr>td*2)*4

excelente Diego como siempre tus cursos son buenos

Codigo para la segunda tabla, solo HTML

<div class="commissions-table--container">
                        <table>
                            <tr>    <!-- Se le agrega estilos a las partes exteriores de la tabla porque la tabla lleva las esquinas redondeadas, no podemos darle ese estilo a toda la tabla porque la etiqueta TABLE no es visual, si le dieramos estilos no los veriamos porque no es visual, por eso se le da estilo a cada esquina de las partes de la tabla -->
                                <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>

7:55 - 8:10 confirma que el Diego no le sabe al BEM

Aqu铆 les dejo una forma de crear las etiquetas tr y td de forma r谩pida sin estar copiando y pegando

(tr>td*2)*4

As铆 quedo mi secci贸n de monedas construido con CSS Grid Layout, igual es importante aprender a usar <table>, por el tema de los layout para los email.

<co<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Batata Bit</title>
  <link href=鈥渉ttps://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;700&family=Inter:wght@300;500&display=swap鈥
    rel=鈥渟tylesheet鈥>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <header class="header">
    <img class="header-img" src="./logo.svg" alt="Logo de Batatabit" title="Logo de Batatabit">
    <div class="header-title-container">
      <h1>La pr贸xima revoluci贸n en el intercambio de criptomonedas</h1>
      <p>Batatabit te 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="background__imageContainer"></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">Comisiones</p>
            <div class="currency-table--container">
            <table>
            <tr>
                <td class="table__top-left"></td>Bittrade</td>
                <td class="table__top-right table__right">12.96 <span></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>coinxt</td>
            <td class="table__right">$14.96</td>
        </tr>
        <tr>
          <td class="table__bottom-left">Stellar</td>
          <td class="table__bottom-right table__right">$4.96</td>
      </tr> 
          </table>
           </div>
           <div class="currency-table--date">
             <p><b>Actualizado:</b> 19 de Julio 23:48</p>
           </div>
            </div>
        
    </section>
    </section>
<section></section>
<section></section>
<section></section>
  </main>
   <footer></footer>     
</body>
</html>


de> 

Espero entender mejor el por qu茅 de usar las clases table__top-left, table__top-right, table__bottom-right y table__bottom-left porque yo me imagine que todos por ser texto dentro de una misma tabla compartir铆an un mismo estilo. Si alguien entiende, agradecer铆a much铆simo que me explicase.

table>tr4>td2

De esta manera podemos hacer m谩s r谩pido la estructura de la tabla utilizando Emmet

Las tablas se definen con tres etiquetas: <table> para crear la tabla
<tr> para crear cada fila (鈥渢able row鈥)
<td> para crear cada columna (鈥渢able data cell鈥)

La etiqueta <table> encierra todas las filas y columnas de la tabla.

Las etiquetas <tr> definen cada fila de la tabla y encierran todas las columnas.

Las etiqueta <td> define cada una de las columnas de las filas.
Dentro de un <td> puede haber cualquier tipo de elemento HTML, textos, im谩genes, listas, etc.

馃摙馃摙 AVISO IMPORTANTE 鉂椻潡

Aunque s茅 manejar algo de CSSGrid, esta vez opte por conocer como usar <table> uwu

Alguien mas lo hizo usando solamente Flex-box? 馃槑

Se puede generar la estructura de la tabla con en VS code con:

table>(tr>td*2)*4

Oprimir tab y listo.

Uso de <table></table>

Se puede ver a una tabla como un array donde la primera componente es una fila y la segunda es una columna.
[f][c] : f(fila) y c(columna)

Sintaxis

<table>
	<tr> <!--Est谩 ser铆a la fila 0-->
	      <td>...</td> <!--Est谩 ser铆a la columna 0 [0][0]-->
	      <td>...</td> <!--Est谩 ser铆a la columna 1 [0][1]-->
	</tr>


	<tr> <!--Est谩 ser铆a la fila 1-->
	     <td>...</td> <!--Est谩 ser铆a la columna 0 [1][0]-->
       <td>...</td> <!--Est谩 ser铆a la columna 1 [1][1]-->
	</tr>
</table>

Tambien podemos crear la estructura de la table asi:

tr*4>td*2

Y sale en una 馃槈


Yo vi el curso de Css Grid, e intente hacer una tabla que se pareciera a esta, y les cuento que es mucho mas facil hacerla, no la he teminado del todo, pero ahi esta la estructura basica, les comparto la estructura en html y el estilo de css.


Aunque me parece muy importate hacerlo tambien con las tablas de html porque el css depende su funcionamiento de que el navegador este actualizado, y ese es un riesgo que como frontend no se puede correr.

tr hace referencia a las filas que van a tener estas tablas y td que hace referencia a la informaci贸n que va a tener esta fila. En este ejemplo ser铆a una fila y dos columnas.

<table>
  <tr>
    <td></td>
    <td></td>
  </tr>
</table>

La etiqueta <b> sirve para hacerle bold al texto

<b>Actualizado:</b>

Segu铆 todas las indicaciones de Diego, incluso regres茅 el video para volver a revisar y la parte de Actualizaci贸n y la fecha siguen sin aparecerme centrados, 驴le pas贸 a alguien m谩s?

para generar las tablas pueden usar este atajo ( no recuerdo el nombre xD)

table>tr*4>td*2 

nombre del elemento luego se pone un mayor que > para meter un elemento dentro del elemento anterior.
El asterisco se usa para multiplicar el elemento y as铆 agregar varios en este caso como necesitamos 4 tr vamos a poner tr*4
como dentro de cada tr vamos a nececitar 2 td usamos el >td*2 .

De esta manerai puedes empezar a generar estructuras de una manera mas r谩pida.

Me acabo de dar cuenta que 320px de ancho no es lo mas peque帽o, resulta que los Galaxy Fold tienen un ancho de 280px

Mi codigo haciendo la tabla con CSS GRID:

HTML

<section class="exchange__tables">
          <div class="exchange__tables--title">
            <p>Monedas</p>
          </div>
          <div class="exchange__tables--monedas">
            <div class="cripto"><p>Bitcoin</p></div>
            <div class="cripto value">
              <p>$ 1.96</p>
              <span></span>
            </div>

            <div class="cripto"><p>Ethereum</p></div>
            <div class="cripto value">
              <p>$ 1.96</p>
              <span></span>
            </div>
            <div class="cripto"><p>Ripple</p></div>
            <div class="cripto value">
              <p>$ 1.96</p>
              <span></span>
            </div>
            <div class="cripto"><p>Stellar</p></div>

            <div class="cripto value">
              <p>$ 1.96</p>
              <span></span>
            </div>
          </div>
        </section>```

CSS:



.exchange__tables {
width: 200px;
margin: 0 auto;
border-radius: 5px;
}

.exchange__tables鈥搈onedas {
display: grid;
grid-gap: 3px;
width: auto;
justify-content: center;
grid-template-columns: 100px 100px;
}
.exchange__tables鈥搕itle {
width: 100px;
margin-bottom: 10px;
font-size: 1.8rem;
font-weight: 700;
line-height: 2.3rem;
color: var(鈥揵itcoin-orange);
}

.cripto {
padding: 10px 15px;
background-color: var(鈥搄ust-white);
font-size: 1.6rem;
line-height: 1.9rem;
font-family: var(鈥揻ont-inter);
color: #b5b0ac;
border-radius: 8px 0 0 0px;
}

.cripto.value {
font-size: 1.4rem;
line-height: 1.6rem;
font-weight: 400;
color: #757575;
border-radius: 0 8px 0 0;
}

Mi codigo y como termino

<section class="main-tables-container">
          <p>monedas</p>
          <div class="main-tables-grid">
            <div class="main-tables-child">Bitcoin</div>
            <div class="main-tables-child">$1.96 <span></span></div>
            <div class="main-tables-child">Etherum</div>
            <div class="main-tables-child">$ <span></span></div>
            <div class="main-tables-child">Ripple</div>
            <div class="main-tables-child">$ <span></span></div>
            <div class="main-tables-child">Stellar</div>
            <div class="main-tables-child">$ <span></span></div>
          </div>
        </section>```

css


.main-tables-container {
background-color: var(鈥揼rey);
}
.main-tables-grid {
display: grid;
grid-template: repeat(4, 50px) / 100px 100px;
width: 100%;
justify-content: center;
}
.main-tables-grid .main-tables-child {
background-color: var(鈥搊ff-white);
font-size: 1.6rem;
display: flex;
align-items: center;
justify-content: center;
border: 1px solid transparent;
}

.main-tables-child:nth-last-child(8) {
border-radius: 15px 0 0 0;
}
.main-tables-child:nth-last-child(1) {
border-radius: 0 0 15px 0;
}
.main-tables-child:nth-last-child(7) {
border-radius: 0 15px 0 0;
}
.main-tables-child:nth-last-child(2) {
border-radius: 0 0 0 15px;
}



Hola a todos, tengo una duda, podemos usar Caption para poner el t铆tulo de la tabla?
de esta manera:

<table class="table-container--data">
            <caption class="table-container--title">Monedas</caption>
            <tr>
              <td>Bitcoin</td>
              <td class="table-container--data__money">$1.96 <span class="table-container__arrow-down">Y</span></td>
            </tr>
            <tr>
              <td>Ethereum</td>
              <td class="table-container--data__money">$0.07 <span class="table-container__arrow-up">Y</span></td>
            </tr>
            <tr>
              <td>Ripple</td>
              <td class="table-container--data__money">$2.17 <span class="table-container__arrow-down">Y</span></td>
            </tr>
            <tr>
              <td>Stellar</td>
              <td class="table-container--data__money">$4.96 <span class="table-container__arrow-down">Y</span></td>
            </tr>
          </table>```


- 驴Cu谩l es mejor practica, usar  <p> o usar caption?

Hice esto antes de ver el v铆deo, pues me gusta m谩s usar grid y flex que table.
html:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <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.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 te 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>Visibilizamos todas las tasas de cambio</h2>
                <p>Traemos informaci贸n en tiempo real de las csas de cambio y las monedas m谩s importantes del mundo.</p>
            </div>
            <section class="main-tables-container">
                <h2 class="title">Monedas</h2>
                <div class="table">
                    <span class="table--coin">Bitcoin</span><span class="table--treding">$1.96<img src="assets/icons/trending-down.svg" alt="Treding down"></span>
                    <span class="table--coin">Ethereum</span><span class="table--treding">$0.07<img src="assets/icons/trending-up.svg" alt="Treding down"></span>
                    <span class="table--coin">Ripple</span><span class="table--treding">$2.15<img src="assets/icons/trending-down.svg" alt="Treding down"></span>
                    <span class="table--coin">Stellar</span><span class="table--treding">$4.96<img src="assets/icons/trending-down.svg" alt="Treding down"></span>
                </div>
                <span class="updated"><em>Actualizado:</em> 19 Julio 23:45</span>
            </section>
        </section>
        <section></section>
        <section></section>
        <section></section>
    </main>
    <footer></footer>
</body>
</html>

css:

/*
*1. Posicionamiento
*2- Modelo de caja (Box model)
*3. Tipograf铆a
*4. Visuales
*5. Otros
*/
: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;
}

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

html{
    font-size: 62.5%;
    font-family: 'DM Sans', sans-serif; /*! 'Inter', 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: 40px;
    text-align: center;
    align-self: center;
}

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

.header--title-container p{
    margin-top: 25px;
    font-size: 1.4rem;
    font-weight: 500;
    line-height: 1.8rem;
    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;
    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%;
    height: auto;
    background-color: var(--off-white);
}

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

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

.main-exchange-container .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.6rem;
    color: #757575;
}

.main-exchange-container .title{
    color: var(--bitcoin-orange);
    margin: 0;
    margin-right: 60%;
    font-size: 1.4rem;
}

.main-tables-container .table{
    width: 70%;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    font-size: 1.2rem;
    margin-bottom: 20px;
}

.main-tables-container .table span{
    border: 1px solid var(--grey);
    color: var(--grey);
}

.table .table--coin{
    text-align: left;
    padding-left: 10px;
}

.main-exchange-container .table .table--treding{
    display: flex;
    justify-content: space-around;
    color: var(--black);
}

.main-tables-container .updated{
    background-color: var(--soft-orange);
    border-radius: 5px;
    padding: 5px;
}

.updated em{
    font-weight: bold;
    font-style: normal;
}

Asi me quedo antes de ver el video

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="Somos Bata Bit">
    <meta name="robots" content="index,follow">
    <title>Batata Bit</title>
    <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="css/normalize.css">
    <link rel="stylesheet" href="css/style.css">
</head>
<body>
    <header>
         <img src="Assets/Imagenes/isologo.svg" alt="">
         <div class="content-header">
             <h1 class="title-content">
                La pr&oacutexima revolici&oacuten en el intercambio de criptomonedas.
             </h1>
             <p class="paragraph-content">
               Batabit te ayuda a navegar entre los diferentes precios y tendencias.
             </p>
             <a class="button-content" href="#"> Conoce Nuestros Planes <span>I</span> </a> 
         </div>
    </header>
    <main>
       <section class="main-exchange-container">
          <div class="backgroundImg">
              <img src="/Assets/Imagenes/bitcoin-image.svg" alt="">
          </div>
          <div class="main-exchange-container--title">
              <h2>Visibilizamos todas las tasas de cambio.</h2>
              <p>Traemos informac&iacuten en tiempo real de las casas de cambio y las monedas m&aacutes importantes del mundo.</p>
          </div>
          </section> -->
          <section class="main-tables-container">
            <div>
              <span>Monedas</span>
            </div>
            <section class="main-tables-container--box">
                <div>
                    
                    <ul class="main-tables-container--coins">
                        <li id="Bitcoin" >Bitcoin</li>
                        <li>Ethereum</li>
                        <li>Ripple</li>
                        <li id="Stellar" >Stellar</li>
                    </ul>
                </div>
                <div>
                    <ul class="main-tables-container--value-coins">
                        <li class="Bitcoin-value" id="Bitcoin-value" >$ 1.96 <span></span> </li>
                        <li class="Ethereum-value">$ 0.07 <span></span> </li>
                        <li class="Ripple-value">$ 2.15 <span></span> </li>
                        <li class="Stellar-value" id="Stellar-value" >S 4.96 <span></span> </li>
                    </ul>
                </div>
            </section> 
            

        <section class="main-act">
            <span class="text">
              Actualizado:
            </span>
            <span class="text-two">
                21 febrero 09:26
            </span>
        </section>

        </section>
       </section>

       <section>

       </section>
       <section>

       </section>
       <section>

       </section>
    </main>
    <footer>

    </footer>
</body>
</html>

Este es mi CSS

:root {
    /* Colors */
    --bitcoin-orange: #F7931A;
    --soft-orange: #FFE9D5;
    --secondary-blue: #1A9AF7;
    --soft-blue: #E7F5FF;
    --warm-black: #201E1C;
    --warn-black-1: #282623;
    --Grey: #BABABA;
    --off-white: #FAF8F7;
    --just-white: #ffffff;
    /* Font */
    --primary-font: 'DM Sans', sans-serif;
}

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

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

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

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

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

header .content-header h1 {
    font-size: 2.5rem;
    color: var(--just-white);
    font-weight: bold;
    line-height: 26px;
}

header .content-header p {
    padding-top: 16px;
    font-size: 1.4rem;
    color: var(--just-white);
}

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

header .content-header .button-content span {
    display: inline-block;
    width: 25px;
    height: 24px;
    background-image: url('../Assets/Icons/flecha-abajo.svg');
}

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

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

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

}

main .main-exchange-container p {
    font-size: 1.4rem;
    padding-top: 24px;
    padding-right: 10px;
    padding-left: 10px;
    line-height: 1.8rem;
    color: rgba(117, 117, 117, 1);
}
main .main-exchange-container--title {
    width: 90%;
    min-width: 280px;
    max-width: 900px;
    margin: 0 auto;
}

main .main-exchange-container .backgroundImg {
    width: 195px;
    height: 195px;
    margin: 0 auto;
    background-image: url("/Assets/Imagenes/bitcoin-image.svg");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

main .main-tables-container {
     position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
     margin-top: 48px;
}

main .main-tables-container li {
    background-color: var(--just-white);
    width: 101px;
    height: 39px;
    list-style: none;
    padding-top: 10px;
    margin: 1px;
    font-family: 'Inter', sans-serif;
}

main .main-tables-container .main-tables-container--coins {
    color:  rgba(181, 176, 172, 1);
    font-size: 1.6rem;
    text-align: left;
}

main .main-tables-container .main-tables-container--coins li {
    padding-left: 12px;  
}

main .main-tables-container .main-tables-container--value-coins {
    color: rgba(117, 117, 117, 1);
    font-size: 1.4rem;
    font-weight: 400;

}

main .main-tables-container--box {
    display: flex;
    flex-direction: row;
    margin-top: 12px;
}
 
/* coloque id para hacerle las curvas a 4 elemento li en especifico 
(lo hice con id por que queria probarlo pero prodia haberlo hecho con clases)*/

#Bitcoin {
    border-top-left-radius: 8px 8px;
}

#Bitcoin-value {
    border-top-right-radius: 8px 8px;
}

#Stellar {
    border-bottom-left-radius: 8px 8px;
}

#Stellar-value {
    border-bottom-right-radius: 8px 8px;
}

/* ---------------------------------------- */

main .main-tables-container div > span {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--bitcoin-orange);
    margin-right: 98px;
}

main .main-exchange-container .main-tables-container--value-coins li span {
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-left: 10px;
}

main .main-exchange-container .main-tables-container--value-coins .Bitcoin-value span {
    background-image: url("/Assets/Icons/bajada.svg");
}

main .main-exchange-container .main-tables-container--value-coins .Ethereum-value span {
    background-image: url("/Assets/Icons/subida.svg");
}

main .main-exchange-container .main-tables-container--value-coins .Ripple-value span {
    background-image: url("/Assets/Icons/bajada.svg");
}

main .main-exchange-container .main-tables-container--value-coins .Stellar-value span {
    background-image: url("/Assets/Icons/bajada.svg");
}

/* ------------------------------------------*/

main .main-exchange-container .main-act {
    width: 173px;
    height: 31px;
    background-color: var(--soft-orange);
    margin: 0 auto;
    margin-top: 16px;
    padding: 8px;
    font-family: 'Inter', sans-serif;
    border-radius: 8px;
}

main .main-exchange-container .main-act .text {
    font-weight: 700;
    font-size: 1.6rem;
}

main .main-exchange-container .main-act .text {
    font-size: 1.2rem;
}

Y as铆 va la pagina

![](

Reto cumplido con tablas

HTML

<section class="main-section-table">
            <img src="./assets/imgs/bitcoin.svg" alt="SVG Batabit/big" class="batabit-img-big">
            <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 class="table-container">
                <span class="table-left-arrow"></span>
                <table>
                    <caption>Corredoras</caption>
                    <tbody>
                        <tr>
                            <td class="table-main-name">Bitrade</td>
                            <td class="table-main-price">$ 12.96</td>
                        </tr>
                        <tr>
                            <td class="table-main-name">Bitprecio</td>
                            <td class="table-main-price">$ 13.07</td>
                        </tr>
                        <tr>
                            <td class="table-main-name">Novadax</td>
                            <td class="table-main-price">$ 13.15</td>
                        </tr>
                        <tr>
                            <td class="table-main-name">Coinext</td>
                            <td class="table-main-price">$14.96</td>
                        </tr>
                        </tbody>
                    </table>   
                <span class="table-right-arrow"></span>
            </div>
        </section>

CSS

.main-section-table {
    padding-bottom: 64px;
}

.main-section-table h2 {
    font-size: 2.4rem;
    line-height: 2.6rem;
    font-weight: bold;
    width: 288px;
    height: 52px;
    text-align: center;
    margin: 0 auto;
    color: var(--black);
}

.main-section-table p {
    width: 288px;
    height: 54px;
    font-size: 1.4rem;
    text-align: center;
    margin: 24px auto 0;
    color: #75757575;
}

.main-section-table .table-container{
    margin-top: 48px;
    display: flex;
    justify-content: space-around;
}

.main-section-table .table-container caption{   
    font-size: 1.8rem;
    color: var(--bitcoin-orange);
    font-weight: bold;
    justify-self: flex-start;
}
.main-section-table .table-container tbody {
    font-size: 1.6rem;
    color: #b5b0AC;
    background-color: var(--just-white);
    border-radius: 5px;
}

.table-container .table-main-name {
    width: 101px;
    height: 39px;
    padding: 10px 12px;
}

.table-container .table-main-price {
    width: 88px;
    height: 39px;
    padding: 11px 12px;
}

.table-container .table-left-arrow{
    display: inline-block;
    align-self: center;
    width: 12px;
    height: 8px;
    background-image: url(./assets/icons/left-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

.table-container .table-right-arrow{
    display: inline-block;
    align-self: center;
    width: 12px;
    height: 8px;
    background-image: url(./assets/icons/right-arrow.svg);
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
}

RESULTADO

Este profesor es tan bueno que le paso los errores en la metodolog铆a BEM.

gracias profe!

Hice el esfuerzo de hacerlo con grid (y aprender un poco de grid porque no tenia ni idea) Y aqui esta

La secci贸n completa de exchange:

<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">
                <span class="arrow right-arrow"></span>
                <span class="arrow left-arrow"></span>
                <div class="main-currency-table main-table">
                <h3>Monedas</h3>
                <div class="table">
                    <div>Bitcoin</div> <div>$ 1.96<span style="background-image: url(./assets/icons/trending-down.svg)"></span></div>
                    <div>Ethereum</div> <div>$ 0.07<span style="background-image: url(./assets/icons/trending-up.svg)"></span></div>
                    <div>Ripple</div> <div>$ 2.15<span style="background-image: url(./assets/icons/trending-down.svg)"></span></div>
                    <div>Stellar</div> <div>$ 4.96<span style="background-image: url(./assets/icons/trending-down.svg)"></span></div>
                </div>
                <p> <b>Actualizado:</b> 19 Julio 23:45</p>
            </div>
            <div class="main-convencion-table main-table">
                <h3>Comisiones</h3>
                <div class="table">
                    <div>Bitrade</div> <div>$ 12.96</div>
                    <div>Bitprecio</div> <div>$ 13.07</div>
                    <div>Novadax</div> <div>$ 13.15</div>
                    <div>Coinext</div> <div>$ 14.96</div>
                </div>
                    <p> <b>Actualizado:</b> 19 Julio 23:48</p>
            </div>
        </section>

Y css me quedo bieeen largo

.main-exchange-container{
    width: 100%;
    padding-top: 60px;
    padding-bottom: 30px;
    height: auto;
    text-align: center;
}
.main-exchange-container .backgroundImg{
    height: 195px;
    width: 195px;
    margin: 0 auto;
    background-image: url("./assets/images/bitcoin.svg");
}
.main-exchange-container--title{
    width: 90%;
    min-width: 280px;
    max-width: 900px;
    margin: 0 auto;
}
.main-exchange-container--title h2{
    color: var(--warm-black);
    font-size: 2.4rem;
    font-weight: bold;
}
.main-exchange-container--title p{
    padding-top: 24px;
    color: #757575;
    font-size: 1.4rem;
    font-weight: 500;
}
.main-tables-container{
    padding-top: 48px;
    height: auto;
    display: flex;
    flex-direction: row;
    width: 100%;
    text-align: left;
    justify-content: center;
}
.main-tables-container .arrow{
    display: inline-block;
    align-self: center;
    height: 15px;
    width: 12px;
    background-repeat: no-repeat;
}
.main-tables-container .right-arrow{
    order:2;
    display: none;
    background-image: url("./assets/icons/arrow-right.svg");
}
.main-tables-container .left-arrow{
    display: block;
    background-image: url("./assets/icons/arrow-left.svg");
}
.main-tables-container h3{
    padding-bottom: 12px;
    align-self: left;
    font-size: 1.8rem;
    font-weight: bold;
}
.main-currency-table h3{
    color: #FF9536;
}
.main-convencion-table h3{
    color: var(--secondary-blue);
}
.main-table{
    margin: 0px 20px;
}
.main-currency-table{
    width: 197px;
    display: block;
}
.main-convencion-table{
    width: 190px;
    display: none;
}
.table{
    height: 159px;
    display: grid;
    grid-template-rows: repeat(3, 39px);
    grid-column-gap: 1px;
    grid-row-gap: 1px;
}
.main-currency-table .table{
    width: 197px;
    grid-template-columns: 101px 95px;
}
.main-convencion-table .table{
    width: 190px;
    grid-template-columns: 101px 88px;
}
.table div{
    padding: 10px 12px;
    text-align: left;
    font-family: 'Inter', sans-serif;
    background-color: var(--just-white);
}
.table div:first-child{
    border-radius: 8px 0px 0px 0px;
}
.table div:nth-child(2){
    border-radius: 0px 8px 0px 0px;
}
.table div:nth-last-child(2){
    border-radius: 0px 0px 0px 8px;
}
.table div:last-child{
    border-radius: 0px 0px 8px 0px;
}
.table div:nth-child(odd){
    font-weight: 500;
    font-size: 1.6rem;
    color: var(--grey);
}
.table div:nth-child(even){
    font-weight: 400;
    font-size: 1.4rem;
    color: #757575;
}
.table span{
    margin-left: 10px;
    display: inline-block;
    height: 12px;
    width: 15px;
    background-repeat: no-repeat;
}
.main-tables-container p{
    width: 173px;
    height: 31px;
    margin: 0 auto;
    margin-top: 16px;
    padding: 8px;
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    text-align: center;
}
.main-currency-table p{
    background-color: var(--soft-orange);
}
.main-convencion-table p{
    background-color: var(--soft-blue);
}

Cualquier sugerencia es bien recibida 馃槂

Segu铆 todos los pasos que describi贸 Diego, incluso regres茅 el video varias veces, pero el texto de Actualizaci贸n con la fecha sigue sin aparecerme centrado, 驴le pas贸 a alguien m谩s?

Por si tuvieron dudas de como usar la metodoligia BEM para nombrar a sus clases.
En la metodolagio BEM se usan 鈥__鈥 antes de declarar un elemento y los 鈥- -鈥 para los modificadores.
No es necesario seguirlo al pie de la letra, pero es bueno ternerlo claro.
PD: en uso de 鈥-鈥 es para cuendo el nombre es muy largo sea bloque, elemento o modificador.

Mi codigo en vez de utilizar tables

<section class="main-container_table">
          <div class="table-container">
            <div class="table-section_one table">
              <p class="tableSectionTitle">Monedas</p>
              <p>Bitcoin</p>
              <p>Etherum</p>
              <p>Ripple</p>
              <p>Stellar</p>
            </div>
            <div class="table-section_two table">
              <p></p>
              <p>$ 1.96 <span class="table-section_icon down"></span></p>
              <p>$ 0.07 <span class="table-section_icon up"></span></p>
              <p>$ 2.15 <span class="table-section_icon down"></span></p>
              <p>$ 4.96 <span class="table-section_icon down"></span></p>
            </div>```
css


.table-container {
display: flex;
width: 100%;
justify-content: center;
}
.table p {
width: 100px;
height: 40px;
display: flex;

align-items: center;
}
.table-section_one p {
color: #b5b0ac;
font-size: 1.6rem;
line-height: 1.9rem;
letter-spacing: -0.01rem;
justify-content: flex-start;
}
.table-section_two p {
color: var(鈥揼reygrey);
font-size: 1.4rem;
}
.main-container_table .tableSectionTitle {
color: var(鈥揵itcoinOrange);
font-size: 1.8rem;
line-height: 2.3rem;
font-weight: 700;
}
.table-section_icon {
width: 15px;
height: 15px;
margin-left: 10px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
.down {
background-image: url("鈥/assets/icons/trending-down.svg");
}
.up {
background-image: url("鈥/assets/icons/trending-up.svg");
}


Duda:
Para evitar poner tantas clases en la tabla, 驴no hubiera sido mejor utilizar las pseudo-clases :first-child o :nth-child(2)?

Yo pens茅 que hab铆a entendido muy mal lo de BEM, me puse a repasarlo nuevamente pues tengo entendido que el -- es para el Modificador.
Clase 14: Vamos a crear el c贸digo para las tablas de nuestro proyecto. Observamos en el dise帽o un total de dos tablas. Mientras que aqu铆 aprender谩s el desarrollo total de una, tu reto ser谩 completar la segunda, 隆con todo y estilos! ## Pasos para hacer la maquetaci贸n * Vamos a la secci贸n que creamos anteriormente con la clase de ***main-tables-container***. * Dentro del ***div***, creamos una etiqueta ***p*** para el texto 鈥**Monedas**鈥. * Abajo creamos otra etiqueta div que contendr谩 la etiqueta ***table***, que la tabla en s铆. * Trabajamos con dos etiquetas m谩s: ***tr*** (table row) para las filas y ***td*** (table data) que va dentro, para la informaci贸n de cada fila. * Agregamos la informaci贸n correspondiente, en base al dise帽o sobre el que trabajamos. ` <section class="main-tables-container">` `
` `

Monedas

` `
` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` `
Bitcoin$1.96
Ethereum$0.07
Ripple$2.15
Stellar$4.96
` `
` `
` ` </section>` Podremos ver que la informaci贸n se organiza como si se tratara de una tabla de excel. Cada celda ocupa un espacio igual y se organiza una sobre otra. ![image.png](https://static.platzi.com/media/articlases/Images/image%28193%29.png) ### C贸mo a帽adir las clases Empezamos a a帽adir las clases para poder aplicar estilos. * Al primer ***div*** lo nombramos ***main-currency-table*** porque se trata de la tabla de valores actuales. * Nombramos ***currency-table鈥搕itle*** a la etiqueta ***p*** como t铆tulo del contenedor. * ***currency-table鈥揷ontainer*** al ***div*** por ser el contenedor directo de la tabla. * No necesitamos agregarle clases a la etiqueta tabla o a las filas, pero s铆 al contenido. Por ejemplo, la primera ser铆a ***table\_\_top left***. Agregamos un doble gui贸n bajo porque seg煤n [la metodolog铆a BEM](https://platzi.com/clases/2030-mobile-first/32306-implementando-bem/), es para diferenciar un elemento (**table**) de un bloque y modificador (**top\_left**). * Al precio le a帽adimos dos clases: ***table\_\_top-right table-right***. Esto es porque tanto la columna de nombres como la de precios tienen estilos distintos. De esta manera podremos llamar una sola clase y aplicar los estilos a todos los que la contienen. * A帽adimos la clase ***table-right*** a todas las celdas con precios de la tabla. A la 煤ltima celda colocamos antes la clase ***table\_\_bottom-right*** por ser la 煤ltima. * A帽adimos la clase ***table\_\_buttom-left*** a la 煤ltima fila de la tabla. Como ves, s贸lo la primera y 煤ltima fila tienen clases adicionales. * Ya s贸lo nos falta el contenedor en el que se actualiza la informaci贸n. Lo creamos fuera del ***div*** que contiene la tabla y le agregamos una etiqueta ***p*** para el texto que contiene. * Resaltamos la palabra mostrada en negritas coloc谩ndola dentro de la etiqueta ***b***. * Por 煤ltimo le a帽adimos la clase ***currency-table鈥揹ate*** al nuevo contenedor creado para poder aplicarle estilos ` <section class="main-tables-container">` `
` `

Monedas

` `
` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` ` `
Bitcoin$1.96
Ethereum$0.07
Ripple$2.15
Stellar$4.96
` `
` `
` `

Actualizado: 19 de julio 23:45

` `
` `
` ` </section>` El resultado renderizado en el navegador mostrar铆a: ![image.png](https://static.platzi.com/media/articlases/Images/image%28194%29.png) 隆Bien! Hemos maquetado la tabla de la primera secci贸n del proyecto. Recuerda que a煤n falta otra que es parte de tu reto. Ahora, 隆vamos por esos estilos para las tablas!

Hola mundo! Por ac谩 les dejo mi soluci贸n del reto鈥 esto lo trabaje con grid y flex.

HTML

<<section class="main-tables-container">
          <div class="main-tables-container_grid">
            <div class="table-title">
              <h2>Monedas</h2>
            </div>
            <div class="table-item-name">
              <h2>Bitcoin</h2>
            </div>
            <div class="table-item-value">
              <div class="item-value">
                <h2>$1.96</h2>
                <img src="./assets/icons/trending-down.svg" alt="" />
              </div>
            </div>
            <div class="table-item-name">
              <h2>Ethereum</h2>
            </div>
            <div class="table-item-value">
              <div class="item-value">
                <h2>$0.07</h2>
                <img src="./assets/icons/trending-up.svg" alt="" />
              </div>
            </div>
            <div class="table-item-name">
              <h2>Ripple</h2>
            </div>
            <div class="table-item-value">
              <div class="item-value">
                <h2>$2.15</h2>
                <img src="./assets/icons/trending-up.svg" alt="" />
              </div>
            </div>
            <div class="table-item-name">
              <h2>Stellar</h2>
            </div>
            <div class="table-item-value">
              <div class="item-value">
                <h2>$4.96</h2>
                <img src="./assets/icons/trending-up.svg" alt="" />
              </div>
            </div>
          </div>
        </section>> 

CSS

.main-tables-container_grid{
    display: grid;
    align-self: center;
    grid-template-columns: 101px 101px;
    grid-template-rows: repeat(4,39px);
    width: 197px;
    height: auto;
    border: none;
    border-radius: 8px;
    background: #FFFFFF;
}

.main-tables-container_grid div{
    border: 1px var(--off-white) solid;
    padding: 12px 10px 12px 10px;
}

.main-tables-container_grid .table-title{
    height: 39px;
    grid-column: 1 / 3;
    padding: 0 0 0 9px;
    background-color: var(--off-white);
}

.main-tables-container_grid .table-title h2{
    width: 81px;
    height: 23px;
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: #FF9536;
}

.table-item-value .item-value{
    display: flex;
    flex-direction: row;
    padding: 0;
    margin: 0;
    column-gap: 5px;
    border: none;
}


.table-item-name h2{
    width: 49px;
    height: 17px;
    margin: 0;
    padding: 0;
    text-align: initial;
    line-height: 19.6px;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: #B5B0AC;

}

.table-item-value .item-value h2{
    width: 49px;
    height: 17px;
    text-align: center;
    margin: 0;
    padding: 0;
    line-height: 16.94px;
    font-family: 'Inter', sans-serif;
    font-size: 14px;
    font-weight: 400;
    color: #757575;
}

Y este es dise帽o final

Yo para la tabla utilic茅 grid, pero creo que tengo un error porque no se visualiza el gap, y lo peor es que no encuentro 馃樋

HTML

<<section class="currency-container_table">
                <p>Monedas</p>
                <div class="currency-table">
                    <div class="table-element">Bitcoin</div>
                    <div class="table-element_value">$ 1.96 <span></span></div>
                    <div class="table-element">Ethereum</div>
                    <div class="table-element_value">$ 0.07 <span class="arrow-up"></span></div>
                    <div class="table-element">Ripple</div>
                    <div class="table-element_value">$ 2.15 <span></span></div>
                    <div class="table-element">Stellar</div>
                    <div class="table-element_value">$ 4.96 <span></span></div>
                </div>
                <div class="date-update"><b>Actualizado:</b> 19 Julio 23:45</div>
            </section>> 

CSS

<.currency-container_table {
    width: 70%;
    height: auto;
    min-width: 320px;
    max-width: 600px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    
}
.currency-container_table p {
    font-size: 1.8rem;
    font-weight: bold;
    line-height: 2.3rem;
    color: #FF9536;
    margin: 0 auto;
    padding: 12px;
}
.currency-table {
    width: 65%;
    min-width: 208px;
    max-width: 700px;
    margin: 0 auto;
    height: auto;
    display: grid;
    grid-template-columns: repeat(2, minmax(101px, 500px));
    grid-template-rows: repeat(4, minmax(39px, 70px));
    text-align: center;
    gap: 5px;
    background-color: #fff;
    place-items: center;
    border-radius: 5px;
}
.table-element {
    font-family: 'Inter';
    font-weight: 500;
    font-size: 1.6rem;
    line-height: 1.9rem;
    color: #B5B0AC;
}
.table-element_value {
    font-family: 'Inter';
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.7rem;
    color: #757575;
    text-align: center;
}

.table-element_value span {
    display: inline-block;
    width: 12px;
    height: 0.8rem;
    margin-left: 2px;
    background-image: url('./assets/assets/icons/trending-down.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}
.table-element_value .arrow-up {
    display: inline-block;
    width: 12px;
    height: 0.8rem;
    margin-left: 2px;
    background-image: url('./assets/assets/icons/trending-up.svg');
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    }
.date-update {
    background-color: var(--primary-soft-color);
	border-radius: 8px;
	color: var(--grey-color);
	font-size: 1.2rem;
	margin: 0 auto;
    margin-top: 10px;
	padding: 8px;
	width: 65%;
    background-color: var(--soft-orange);
}
> 

muy bonito hacerlo con grid, pero no esta demas practicar tablas y mas si nos sirve para otras cosas que son unicas con ese metodo

con grid que seria asi:
display:grid
gird-template-column: 1fr 1fr ;
grid-template-rows: repeat( 4,1fr);
gap:5px;

no se si es asi pero lo hice asi nomas para safar pero nunca use tabla es muy itenresante como lo hacia antes y ahora

Otra forma de colocar la tabla ser铆a la siguiente:

(tr>td*2)*4

Dejo mi soluci贸n a las tablas con Grid.

 <section class="main-table-container">
                <div class="main-table-container--coins">
                    <h3>Monedas</h3>
                    <div class="main-table--grid">
                        <div class="main-table--grid--item">Bitcoin</div>
                        <div class="main-table--grid--price">$ 1.96<span class="trendingDownImg"></span></div>
                        <div class="main-table--grid--item">Ethereum</div>
                        <div class="main-table--grid--price">$ 0.07<span class="trendingUpImg"></span></div>
                        <div class="main-table--grid--item">Ripple</div>
                        <div class="main-table--grid--price">$ 2.15<span class="trendingDownImg"></span></div>
                        <div class="main-table--grid--item">Stellar</div>
                        <div class="main-table--grid--price">$ 4.96<span class="trendingDownImg"></span></div>
                    </div>
                    <p class="main-table-container--update">Actualizado: <span>19 Julio 23:45</span></p>
                </div>
/* Tabla */
.main-table-container {
    width: 100%;
    height: auto;
    padding: 48px 23px 62px 65px ;
    margin: 0;
    text-align: start;


}

.main-table-container h3 {
    margin-left: 12px;
    margin-bottom: 12px;
    font-size: 1.8rem;
    font-weight: bold ;
    line-height: 2.4rem;
    color: #FF9536;
}
.main-table-container .main-table--grid{
    display: grid;
    grid-template-columns: 1fr 1fr ;
    width: 90%;
    height: auto;
    margin-bottom: 16px;
    font-family: 'Inter'; 
    background-color: var(--white);
    border-radius: 8px;
    grid-gap: 1.5px;

}
.main-table-container .main-table--grid--item {
    padding: 10px 12px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: #B5B0AC;
    border-right: 1px solid var(--off-white);
    border-bottom: 1px solid var(--off-white);

}
.main-table-container .main-table--grid--price {
    padding: 12px;
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.7rem;
    color: #757575;
    border-right: 1px solid var(--off-white);
    border-bottom: 1px solid var(--off-white);
}
/* Trending img */
.main-table-container .main-table--grid--price .trendingUpImg {
    display: inline-block;
    width: 14px;
    height: 12px;
    margin-left: 11px ;
    background-image: url('./assets/icons/trending-up.svg');
    background-repeat: no-repeat;
}
.main-table--grid--price .trendingDownImg {
    display: inline-block;
    width: 12px;
    height: 10px;
    margin-left: 11px;
    background-image: url('./assets/icons/trending-down.svg');
    background-repeat: no-repeat;
}
/* Update */

.main-table-container .main-table-container--update {
    width: 80%;
    margin-left: 12px;
    padding: 8px;
    font-size: 1.4rem;
    font-weight: 700;
    line-height: 1.5rem;
    align-self: center;
    color: var(--warm-black);
    background-color: var(--soft-orange);
    border-radius: 8px;
}
.main-table-container .main-table-container--update span {
    font-size: 1.3rem;
    font-weight: 400;
    color: #282623;

}


Utilizando grid y flex:
HTML

<span class="exchange-section__secondary-title">Monedas</span>
        <section class="exchange-section__list">
          <div class="list__grid">
            <div class="card">Bitcoin</div>
            <div class="card money">
              <span>$1.96</span>
              <img
                src="./assets/icons/trending-down.svg"
                alt="trending down image"
              />
            </div>
            <div class="card">Ethereum</div>
            <div class="card money">
              <span>$0.07</span>
              <img
                src="./assets/icons/trending-up.svg"
                alt="trending up image"
              />
            </div>
            <div class="card">Ripple</div>
            <div class="card money">
              <span>$2.15</span>
              <img
                src="./assets/icons/trending-down.svg"
                alt="trending down image"
              />
            </div>
            <div class="card">Stellar</div>
            <div class="card money">
              <span>$4.96</span>
              <img
                src="./assets/icons/trending-down.svg"
                alt="trending down image"
              />
            </div>
          </div>
          <a href="#" class="list__button"><span></span></a>
        </section>

CSS

.exchange-section__list {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    margin-top: 12px;
    margin-bottom: 16px;
}

.list__grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(4, 1fr);
    background-color: var(--white);
    border-radius: 8px;
    font-family: 'Inter', sans-serif;
}

.list__grid .card {
    width: 101px;
    height: 39px;
    border-right: 1px solid var(--off-white);
    border-bottom: 1px solid var(--off-white);
    padding: 10px 12px;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    text-align: start;
    color: #B5B0AC;
}

.list__grid .money {
    width: 95px;
    height: 39px;
    padding: 11px 0 11px 12px;
    border-right: none;
    font-weight: 400;
    font-size: 1.4rem;
    line-height: 1.7rem;

}

.list__grid .money img {
    width: 12px;
    height: 13px;
    margin-left: 15px;
}

.list__button span {
    display: inline-block;
    position: absolute;
    right: 31px;
    width: 8px;
    height: 12px;
    background-image: url('../assets/icons/right-arrow.svg');
}
 <section class="main-exchange-container">
            <div class="backgroundImg"></div>
            <div class="main-exchange-container--title">
                <h2>Lorem ipsum dolor sit amet consectetur adipisicing elit.</h2>
                <p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Veritatis, laborum.</p>
            </div>

            <!-- TABLE -->
            <section class="main-tables-container">

                <!-- option 1 -->
                <div class="main-currency-table">
                    <p class="currency-table-title">monedas</p>
                    <div class="currency-table-container">
                        <table>
                            <tbody>
                                <!-- FILAS - ROWS -->
                                <tr>
                                    <td class="table__top-left">Bitcon</td>
                                    <td class="table__top-right table__right">$1.96 <span></span></td>
                                </tr>

                                <tr>
                                    <td>Ethereum</td>
                                    <td class="table__right">$0.07</td>
                                </tr>

                                <tr>
                                    <td>Ripple</td>
                                    <td class="table__right">2.17</td>
                                </tr>

                                <tr>
                                    <td class="table__bottom-left">Stellar</td>
                                    <td class="table__bottom-right table__right">$4.96</td>
                                </tr>
                            </tbody>
                        </table>
                    </div>

                    <!-- Update Data -->
                    <div class="currecy-table--date">
                        <p><b>Actualizado:</b>19 Julio 23:45</p>
                    </div>
                </div>

                <!-- option 2 -->
                <div class=""></div>

            </section>
            
        </section>

Metodolog铆a BEM 馃ザ馃槹

Nota: Diego usa esta metodolog铆a de manera distinta, pero aqu铆 les dejo la manera en que yo la aprend铆. 馃槉

Qu茅 es BEM?

BEM (Block, Element, Modifier)
Es una metodolog铆a de CSS, que nos ayuda a crear componentes reutilizables, c贸digo claro y mantener la especificidad al m铆nimo.
Esto gracias a su nomenclatura.

-> Mantener la especificidad al m铆nimo.
-> C贸digo modular.
-> C贸digo limpio.
-> Nomenclatura (Bloque, Elemento, Modificador)


Qu茅 es un Block?

Un bloque en BEM, es una entidad independiente, no necesita de nadie m谩s para existir. (Header, Nav, Formulario, Footer, Contenedor)

<h5>C贸mo nombramos a los bloques?</h5>

Se les nombre con la funcionalidad del bloque.

<nav class="nav"></nav>

<header class="header"></header>

<section class="container"></section>

Qu茅 es un Element?

Un elemento en BEM, depende directamente de un Bloque, por lo que este debe estar dentro de un bloque. (Es dependiente a un bloque y est谩 ligado a 茅l.)

<h5>C贸mo nombramos a los elementos?</h5>

Se les nombra con el nombre de su bloque contenedor, dos guiones bajos y la descripci贸n (funcionalidad) del elemento.

<form class="form">
	<input type="text" class="form__input">
	<input type="submit> class="form__send">
</form>

<nav class="nav">
	<a href="#" class="nav__item">Inicio</a>
	<a href="#" class="nav__item">Inicio</a>
</nav>

Qu茅 es un Modifier?

Un modificador en BEM, puede ser un bloque o un elemento, estos indican una modificaci贸n a dicho elemento o bloque.

<h5>C贸mo nombrar a los modificadores?</h5>

Se les nombra, con el nombre que ten铆an anteriormente (bloque o elemento) se le agrega dos guiones medios y la descripci贸n de la modificaci贸n.

<nav class="nav">
	<a href="#" class="nav__link"></a>
	<a href="#" class="nav__link nav__link--disabled"></a>
</nav>

<header class="header header--blue></header>

<input type="text" class="form__input form__input--color-gray">

Curiosidades BEM

<h5>Qu茅 pasa si tengo un hijo dentro de un elemento?</h5>

Se nombran como un elemento

<header class="block">
	<section class="block__elem1">
		<div class="block__elem2">
		</div>
	</section>
	<div class="block__elem3">
	</div>
</header>
<h5>Una etiqueta puede tener 2 clases de un bloque?</h5>

Se le llama mix en BEM y si se puede.

<div class="block1 block2">
</div>
<h5>Podemos usar modificadores globales?</h5>

No se recomienda porque puede generar especificidad extra.

<button class="button disabled"></button>

Ejemplo:

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>BEM</title>
    <link rel="stylesheet" href="./estilos.css">
</head>
<body>
    <header class="header">
        <nav class="nav">
            <div class="nav__logo">
                <img src="./logo-spotify.png" class="nav__img">
            </div>
            <div class="nav__links">
                <a href="#" class="nav__link nav__link--color">Inicio</a>
                <a href="#" class="nav__link">Acerca de</a>
                <a href="#" class="nav__link">Contacto</a>
            </div>
        </nav>
    </header>
    <nav class="nav">
        <div class="nav__logo">
            <img src="./logo-spotify.png" class="nav__img">
        </div>
        <div class="nav__links">
            <a href="#" class="nav__link nav__link--color">Inicio</a>
            <a href="#" class="nav__link">Acerca de</a>
            <a href="#" class="nav__link">Contacto</a>
        </div>
    </nav>
</body>
</html>

estilos.css

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

body{
    font-family: Arial, Helvetica, sans-serif;    
}
.nav{
    background: slateblue;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: space-around;
}

.nav__logo {
    height: 100%;
    background: #fff;
}

.nav__img {
    height: 100%;
}   

.nav__link{
    color: #fff;
}

.nav__link--color{
    color: #000;
}

Despu茅s de aprender Grid css, no puedo dejar de pensarlo todo en grillas. F.

Mi resultado del reto:
Creo que me compliqu茅 con GRID , pero llegue hasta aqu铆 solo me falt贸 el gap. Si alguien sabe como hacer que funcione, please me ayudar铆a mucho dejando un comentario:)

          HTML
            <section class="main__exchange--table">
                <h3>Monedas</h3>
                <div class="main__table">
                    <div class="table">
                        <div class="table__items --text"><span>Bitcoin</span></div>
                        <div class="table__items --text">Ethereum</div>
                        <div class="table__items --text">Ripple</div>
                        <div class="table__items --text">Stellar</div>
                        <div class="table__items --price">$ 1.96 
                            <p class="table__items red-icon"></p>
                        </div>
                        <div class="table__items --price">$ 0.07 
                            <p class="table__items green-icon"></p>
                        </div>
                        <div class="table__items --price">$ 2.15 
                            <p class="table__items red-icon"></p>
                        </div>
                        <div class="table__items --price">$ 4.96 
                            <p class="table__items red-icon"></p>
                        </div>
                    </div>
                    <span class="table__items arrow-icon"></span>
                </div>
                <span class="main__exchange--date"><strong>Actualizado:</strong>
                                 19 Julio 23:45</span>
            </section>
        
.main__table {
    width: 70%;
    display: grid;
    grid-template-columns: 2fr 0.5fr;
    margin: 0 auto;
    align-items: center;
    gap: 20px;
    background-color: #E5E5E5;
}

h3 {
    width: 60%;
    padding-left: 5px;
    padding-bottom: 10px;
    display: flex;
    justify-content: center;
    font-size: 1.8rem;
    font-weight: 700;
    font-family: 'DM Sans', sans-serif;
    line-height: 2.3rem;
    color: #ff9536;
}

.table {
    display: grid;
    grid-template-columns: minmax(101px, auto) minmax(95px, auto) ;
    grid-template-rows: repeat(4, 39px) ;
    grid-auto-flow: column;
    place-items: center;
    padding-left: 10px;
    background-color: var(--white);
    gap: 5px;
    border-radius: 10px;
    
}
.table p {
    display: inline-block;
    margin: 0 5px;
}

.table .red-icon {
    width: 12px;
    height: 12px;
    background-image: url('./Assets/icons/trending-down.png');
    background-repeat: no-repeat;
}
.table .green-icon {
    width: 12px;
    height: 12px;
    background-image: url('./Assets/icons/trending-up.png');
}
.table__items.arrow-icon {
    width: 12px;
    height: 12px;
    background-image: url('./Assets/icons/arrow-secondary-black.svg');
    background-repeat: no-repeat;
    margin: 0 auto;
}

.table__items {
    font-family: 'Inter', sans-serif;
}

.table__items.--text {
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    color: #B5B0AC;
    justify-self: flex-start;
    background-color: var(--white);
}

.table__items.--price {
    font-size: 1.4rem;
    font-weight: 400;
    line-height: 1.6rem;
    color: var(--dark-grey);
}

.main__exchange--date {
    display: inline-block;
    margin: 15px auto;
    padding: 8px;
    font-family: 'Inter', sans-serif;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.9rem;
    background-color: var(--soft-orange);
    color: var(--warm-black);
    border-radius: 8px;
}

Muy interesante el curso. Es verdad que es bastante complejo pensar en todas las clases del css cuando creas el html. Pero de ahi la dferencia entre un profesional y un no profesional jejeje

usar etiqueta <strong> enves de <b>

Hasta el momento no he tomado el curso de grid, pero con el curso pr谩ctico de Front End, pude hacer un intento.

HTML
Agregar tambi茅n 茅ste link para los icons

<head>
<!-- ICONS -->
<script src="https://kit.fontawesome.com/3ffaa30c0f.js" crossorigin="anonymous"></script>
</head>

<body>
	<section class="main-exchange-table">
                <p class="main-exchange-table__title">
                    Monedas
                </p>

                <i class="fa-solid fa-angle-right main-exchange-table__icon"></i>

                <div class="main-table-container">
                    <p class="main-table-currency">Bitcoin</p>
                    <p class="main-table-currency main-table-currency--values">
                        <span class="main-table-currency__money">$ 1.96</span>
                        <span class="main-table-currency__icon main-table-currency__icon--down"></span>
                    </p>

                    <p class="main-table-currency">Ethereum</p>
                    <p class="main-table-currency main-table-currency--values">
                        <span class="main-table-currency__money">$ 0.07</span>
                        <span class="main-table-currency__icon main-table-currency__icon--up"></span>
                    </p>

                    <p class="main-table-currency">Ripple</p>
                    <p class="main-table-currency main-table-currency--values">
                        <span class="main-table-currency__money">$ 2.15</span>
                        <span class="main-table-currency__icon main-table-currency__icon--down"></span>
                    </p>

                    <p class="main-table-currency">Stellar</p>
                    <p class="main-table-currency main-table-currency--values">
                        <span class="main-table-currency__money">$ 4.96</span>
                        <span class="main-table-currency__icon main-table-currency__icon--down"></span>
                    </p>
                </div>

                <p class="main-exchange-updated">
                    <span class="main-exchange-updated__text"> <b>Actualizado:</b> 19 Julio 23:45</span>
                </p>
	</section>
</body>

CSS

.main-exchange-table {
    width: 100%;
}

.main-exchange-table__title {
    position: relative;
    left: calc(50% - 112px);

    margin-top: 48px;
    width: 81px;
    height: 23px;

    font-size: 1.8rem;
    line-height: 2.3rem;
    font-weight: bold;

    color: #FF9536;
}

.main-exchange-table__icon {
    position: relative;
    left: 35.79%;
    right: 14.21%;
    bottom: -112px;

    width: 14px;
    height: 14px;
}

.main-table-container {
    display: grid;
    grid-template-columns: auto auto;
    position: relative;
    left: calc(50% - 112px);

    margin-top: 22px;
    width: 197px;

    border-radius: 8px;
    background-color: var(--light-color);
}

.main-table-currency {
    display: flex;
    flex-direction: row;
    align-items: center;

    padding: 10px 12px;

    font-family: 'Inter';
    font-weight: 500;
    font-size: 16px;
    line-height: 19px;
    letter-spacing: -0.02em;

    border: 1px solid var(--background-color);
    color: #B5B0AC;
}

.main-table-currency--values {
    font-weight: 400;
    font-size: 1.4rem;

    color: #757575;
}

.main-table-currency__icon {
    margin-left: 10px;
    width: 15px;
    height: 10px;

    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}

.main-table-currency__icon--down {
    background-image: url('./assets/icons/trending-down.svg');
}

.main-table-currency__icon--up {
    background-image: url('./assets/icons/trending-up.svg');
}

.main-exchange-updated {
    display: flex;
    justify-content: center;
    align-items: center;

    margin-top: 24px;
    width: 100%;
}

.main-exchange-updated__text {
    display: block;

    /* width: 157px; */
    padding: 8px;

    font-size: 1.2rem;

    border-radius: 8px;
    background-color: var(--soft-primary-color);
    color: var(--dark-color);
}

MI SOLUCI脫N CON GRID

HTML

CSS

.main-tables-container{
    width: min-content;
    margin: 0 auto;
}

.monedas{
    font-family: var(--DM-sans);
    font-size: 1.8rem;
    color: var(--bitcoin-orange);
    font-weight: 500;
    text-align: left;
    padding-left:20px;
    margin-bottom: 10px;
}

.monedas-container{
    width: min-content;
    margin: 0 auto;
    display: grid;
    grid-template-columns: auto auto;
    background-color:var(--just-white);
    align-items: center;
    border-radius: 8px;
}

.monedas-container p{
    color: var(--grey);
}

.nombre-moneda{
    width: max-content;
    height: 40px;
    font-family: var(--inter);
    text-align: left;
    font-size: 1.6rem;
    font-weight: 500;
    padding: 10px 15px 10px 20px;
    margin: 0;
    border-bottom: 1px solid var(--off-white);
}

.monedas-container .nombre-moneda:last-of-type {
    border-bottom: none;
}

.currency{
    border-left: 1px solid var(--off-white);
    border-bottom: 1px solid var(--off-white);
    height: 40px;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    padding: 0 20px;
}

.monedas-container .currency:last-of-type {
    border-bottom: none;
}

.currency img{
    width: 15px;
    height: 15px;
    margin: auto 0;
}

.currency p{
    margin: auto 0 ;
    width: 50px;
    text-align: left;
    font-size: 1.4rem;
    color: rgb(116, 116, 116);
}

.actualizado{
    background-color: #FFE9D4;
    padding: 10px;
    width: max-content;
    margin: 15px auto;
    font-weight: bold;
    color: var(--black);
    font-size: 1.3rem;
    border-radius: 8px;
}

.actualizado span{
    font-weight: 400;
    margin-left: 8px;
}

Buenas noches.

Este es mi aporte con GRID. Todavia queda un largo camino y mejorar las practicas pero tratde aprender lo poco que vimos de Grid con la Profe Teffy en el curso de: Frontend Developer

Y este es mi Codigo:

GITHUB: https://github.com/julian1david/landing-page

HTML

CSS

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茅:

C贸digo:
HTML

            <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:

.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:

Recuerden que pueden usar:

tr*4>td*2

y ya se les generan los elementos

![](

Hecho con display grid!!

<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></span></td>
                            </tr>
                            <tr>
                                <td>Ethereum</td>
                                <td class="table-right">$0.17 <span></span></td>
                            </tr>
                            <tr>
                                <td>Riple</td>
                                <td class="table-right">$2.15 <span></span></td>
                            </tr>
                            <tr>
                                <td class="table__bottom-left">Stellar</td>
                                <td class="table__bottom-right table-right">$4.96</td>
                            </tr>
                        </table>
                    </div>
                    <div class="table-currency--date">
                        <p><b>Actualizado: 19 Julio 23:45</b></p>
                    </div>
                </div>
            </section>

Por que no con flex? Aqu铆 mi aporte usando solo flex para mantener la linea del curso:

(

HML

<section class="main-tables-container">

            <p class="currency-table--title">Monedas</p>

            <div class="table-celdas">

                <div class="celda  radius-left-top">Bitcon</div>
                <div class="celda money  radius-right-top">$1.96 <span></span></div>

            </div>
            <div class="table-celdas">

                <div class="celda ">Ethereum</div>
                <div class="celda money up">$0.07<span></span></div>

            </div>
            <div class="table-celdas">

                <div class="celda ">Riple</div>
                <div class="celda money">$2.15<span></span></div>

            </div>
            <div class="table-celdas">

                <div class="celda  radius-left-bottom">Stellar</div>
                <div class="celda money  radius-right-bottom">$4.96<span></span></div>

            </div>

            <div class=" table-celdas table-celda--date">
                <b>Actualizado:</b> 15 Diciembre 00:00
            </div>

        </section>```

CSS



/SECCION MONEDAS/
.main-tables-container p{
display: flex;
width: 100%;
height: 30px;
justify-content: center;
align-items: center;
padding-right: 130px;
color: #FF9536;
font-weight: 700 ;
font-size: 1.8rem;
margin-bottom: 10px;
}
.table-celdas{

display: flex;
justify-content: center;
align-items: center;

}
.table-celdas .celda{
height: 40px;
width: 120px;
border: 0.1px;
background-color: var(鈥搄ust-white);
margin: 0.5px;
color: #B5B0AC;
font-weight: 500;
font-size: 1.6rem;
padding: 4px;
display: flex;
align-items: center;

}
.table-celdas .money{
display: flex;
justify-content: end;
font-weight: 400;
font-size: 1.4rem;
}
.table-celdas .radius-left-top{
border-top-left-radius: 8px;
}
.table-celdas .radius-right-top{
border-top-right-radius: 8px;
}
.table-celdas .radius-left-bottom{
border-bottom-left-radius: 8px;
}
.table-celdas .radius-right-bottom{
border-bottom-right-radius: 8px;
}

.table-celdas .money span {

    width: 20px;
    height: 15px;
    margin-left: 10px;
    background-repeat: no-repeat;

    /*rutas para gregar icono*/
    background-image: url('./assets/icons/trending-down.svg');
}
.table-celdas .up span{
  
    background-image: url('./assets/icons/trending-up.svg');
}
.table-celda--date{
    background-color: #FFE9D4;
    margin: 20px 40px;
    padding:8px;
    border-radius: 8px;
    font-size: 1.2rem;
}

Aqu铆 mi aporte con Grid y un poco de flex para los div de los precios e imagenes de alzas y bajas

Un atajo para la tabla

table>tr*4>td*2
<div class="divTable">
<div class="divTableBody">
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
<div class="divTableRow">
<div class="divTableCell">&nbsp;</div>
<div class="divTableCell">&nbsp;</div>
</div>
</div>

A pesar de que table es una etiqueta y herramienta del HTML tambien es practico hacerlo basado en DIVs
les dejo este generador online.
https://divtable.com/generator/

Nunca hab铆a hecho una tabla con html
esta la etiqueta de tabla, dentro de estas:
tr: hace referencia a las filas
td: hace referencia a la informaci贸n que va a tener la fila

en que a帽o se hizo este curso? ojala ethereum a 0.07 $ .
todo platzi millonario

Bueno ahora si se empezaron a poner c4br*nas las clases jeje con esto de la estructura del table y las clases

Ingresando:
table>tr4>td2 y presionando tab
se obtiene

<table>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <td></td>
        <td></td>
    </tr>
</table>  

Bien bien

(tr>td*2)*4
asi lo sacan mas rapido

Excellent class! 馃殌

Platzi acaba de actualizar sus cursos de CSS grid y flexbox aqu铆 los cursos
CSS Grid
Flexbox 鉂わ笍

Explicaci贸n de porqu茅 usa "__" para separar los nombres en los modificadores en vez de usar "--" para diferenciar un elemento de un bloque y un modificador. BEM Methodology

los iconosa de sube y baja se podrian hacer si el span con la pseudo clase de after o no?

hace a帽os que no veo usar tables en html, buen dato.

Pues ah铆 vamos 馃槃 Lo importante es no rendirse pese a las adversidades!!!