CSS de tabla Creación de hermosas tablas HTML con CSS

Es fácil hacer que sus tablas HTML se vean geniales; en la publicación de hoy, vamos a echar un vistazo a alrededor de 30 líneas de CSS para hacer precisamente eso.

Tutorial en video

Antes de entrar en él, si prefiere este tutorial en forma de video, puede verlo en mi canal de YouTube, dcode, justo debajo.

Escribiendo el HTML

Escribamos un código HTML repetitivo para la tabla.

<table class="styled-table">
    <thead>
        <tr>
            <th>Name</th>
            <th>Points</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Dom</td>
            <td>6000</td>
        </tr>
        <tr class="active-row">
            <td>Melissa</td>
            <td>5150</td>
        </tr>
        <!-- and so on... -->
    </tbody>
</table>

Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Observe que tenemos dos clases:

  • .styled-table para que no manipulemos cada <table> en el sitio
  • .active-row que será la fila «activa» – esta clase se usa para resaltar una fila específica y obtendrá su propio CSS como veremos pronto

Diseñando la mesa

Apuntemos a la principal <table> elemento primero:

.styled-table {
    border-collapse: collapse;
    margin: 25px 0;
    font-size: 0.9em;
    font-family: sans-serif;
    min-width: 400px;
    box-shadow: 0 0 20px rgba(0, 0, 0, 0.15);
}

Entrar en el modo de pantalla completa Salir del modo de pantalla completa

La mayoría de estos se explican por sí mismos, pero echemos un vistazo a los principales:

  • box-shadow para agregar una sombra transparente sutil alrededor de la mesa
  • border-collapse para asegurarse de que no haya espacio entre los bordes de la celda

Diseñando el encabezado

Para el encabezado, simplemente podemos cambiar el color de fondo y aplicar algunos estilos básicos al texto:

.styled-table thead tr {
    background-color: #009879;
    color: #ffffff;
    text-align: left;
}

Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Pasando a las celdas de la tabla

Vamos a espaciar un poco las cosas:

.styled-table th,
.styled-table td {
    padding: 12px 15px;
}

Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Y las filas de la mesa …

Para estos, queremos hacer 3 cosas:

  1. Agregue un borde inferior a cada fila para separarlos
  2. Agregue un fondo más claro a cada segunda fila para mejorar la legibilidad
  3. Agregue un borde oscuro a la última fila para indicar el final de la tabla
.styled-table tbody tr {
    border-bottom: 1px solid #dddddd;
}

.styled-table tbody tr:nth-of-type(even) {
    background-color: #f3f3f3;
}

.styled-table tbody tr:last-of-type {
    border-bottom: 2px solid #009879;
}

Entrar en el modo de pantalla completa Salir del modo de pantalla completa

Por último, hagamos que la fila activa se vea diferente

Para esto, solo vamos a hacer cambios en el texto:

.styled-table tbody tr.active-row {
    font-weight: bold;
    color: #009879;
}

Entrar en el modo de pantalla completa Salir del modo de pantalla completa

¡Y eso es! Si tiene alguna sugerencia de mejora, hágamelo saber en las respuestas a continuación 😁

Deja una respuesta 0

Your email address will not be published. Required fields are marked *