Cursos Empresas Blog Live Conf Eventos Precios

0:0010:50

Recursos

Resumen

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

Cómo agregar estilos

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

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

Este sería el resultado:

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

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

Estilos CSS para Tablas y Herencia de Fuentes

Curso de Responsive Design: Maquetación Mobile First

Clase 17 de 32

Clase 17 / 32

Evelia Lopez Rueda

Hace 6 años

Asi quedo mi segunda tabla

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

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


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

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

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

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

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

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

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

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

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


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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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


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

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

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

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

.currency--table--container .down
{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url(../assets/icons/trending-down.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

.currency--table--container .up
{
    display: inline-block;
    width: 15px;
    height: 15px;
    margin-left: 10px;
    background-image: url(../assets/icons/trending-up.svg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Juan Christopher

Hace 6 años

Buena.

Comentarios (402)402 comentarios

Marianna Guedez

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

Juan Cruz

Te quedo muy bueno!!

Gracias jjuantech

Leonardo de los angeles Espinoza Hernandez

Eduardo Pérez Suárez

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

Fabio Gomez

Gracias por la ayuda amigo!

Camilo Andrés Páez Escobar

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

Esta molona :D

Luis Blas

Hace 5 años

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

Luis José Cruz Martínez

Reto logrado, todo con Puro CSS

Never stop learning :)

Nicolas Conde Salazar

¿Cómo lo hiciste?

Andrés Gómez

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

Ivan Daniel Cuevas

Reto cumplido con CSS GRID.

HTML

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

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

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

Victor Andres Castillo Zambrano

genial

Exelente.

Jesus Federico David Herrera

Reto cumplido usando CSS GRID

Juan Jose Hernandez Garcia

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

Luis E. Gama Ramirez

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

Jhonatan Guerrero

Agustina Corvo

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

Josué David Coreas Paiz

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

Sebastian Felipe Díaz Guevara

lo tienes como reto, asi como generar otra tabla

Abril Darynka Tapia Sosa

Nicolás Acuña Niampira

Hace un año

Para un mejores prácticas de HTML semántico sería bueno usar la etiqueta time, con el atributo datetime:

<time class="badge-updated" datetime="2025-07-19T23:45">Actualizado: 19 Julio 23:45</time>

Samuel Steven Bernal Martínez

Brutal!, hecho con grid:

Seba Cardoso

Hace 4 meses

Muy Bueno!

Abel Areiza

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

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

Gracias de antemano

John Cardenas

¡Hola, Abel!

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

Antonio Mora

Les comparto mi resultado

Alejandro Adain Navarro Gorraiz

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

Jaime Isaí Orellana Mejia

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

Reto cumplido gracias profe!

Nicolás Martín González Sosa

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

Muchas gracias!

Sebastian Mauricio Perez Roa

Julio Cesar Pechene Rodas

Gueyli Yanalith Velásquez López

Reto cumplido, por agregar botones de navegación entre tablas:

Recursos

Resumen

Estilos CSS para Tablas y Herencia de Fuentes

Progreso del curso

Bienvenida al curso

Setup inicial

Sección de Header

Sección de Intercambios

Sección de Beneficios

Sección de Planes

Sección de Footer

Media Queries

Lighthouse

Próximos pasos