Creación de Tablas HTML con Estilos y Actualización de Datos

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.

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–title a la etiqueta p como título del contenedor.
• currency-table–container 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–date 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:

¡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).