Tablas HTML responsive mediante media queries de CSS

En el mundo moderno del desarrollo web es muy importante que todas las páginas procuren tener un diseño responsive. ¿Qué significa tener un diseño responsive? Pues hablamos de diseño responsive cuando el diseño de una web se ve correctamente en todos los dispositivos y en todas las resoluciones. Es decir, el sitio web se debe mostrar de manera útil en ordenadores de sobremesa, portátiles, tablets, así como smartphones.

Una de las técnicas para llevar a cabo esta tarea es utilizar las media queries de CSS3.

Las media queries son un módulo de CSS3 que te brindan la posibilidad de renderizar el HTML para que funcione en todas las resoluciones de pantalla (por ejemplo, en la pantalla de un smartphone y en la pantalla del ordenador). Por decirlo de alguna manera, esta tecnología es la piedra angular del diseño responsive.

Mi objetivo en este proyecto es que mi pequeño sitio web soporte diferentes resoluciones de pantalla: 1024px, 768px, 480px. Osea, la resolución de 1024px para los ordenadores de escritorio, 768px para iPad y 480px para los smartphones.

El código

Comencemos creando una sencilla tabla HTML en el Index.cshtml, la primera página que se cargará cuando se ejecute la web.

<table border="1">
    <tr>
        <th class="un_first">
            First Name
        </th>
        <th>
            Last Name
        </th>
        <th>
            Company
        </th>
        <th class="un_age">
            Age
        </th>
        <th class="un_address">
            Address
        </th>
    </tr>
    <tr>
        <td class="un_first">
            Bill
        </td>
        <td class="un">
            Gates
        </td>
        <td class="un">
            Microsoft
        </td>
        <td class="un_age">
            60
        </td>
        <td class="un_address">
            Washington, United States
        </td>
</tr>
    <tr>
        <td class="un_first">
            Steve
        </td>
        <td>
            Jobs
        </td>
        <td>
            Apple
        </td>
        <td class="un_age">
            56
        </td>
        <td class="un_address">
            2101 Waverley Street, Palo Alto
        </td>
    </tr>
    <tr>     
        <td class="un_first">
            Mark
        </td>
        <td>
            Zuckerberg
        </td>
        <td>
            Facebook
        </td>
        <td class="un_age">
            31
        </td>
        <td class="un_address">
            1 Hacker Way, Menlo Park, CA 94025, US
        </td>
    </tr>
</table>

Después de esto, necesitamos crear el archivo .css con la definición de las media queries:

@media (max-width:1024px) {
	.un_address{
		display:none;
	}

}

@media (max-width:768px) {
	.un_age{
		display:none;
	}

}

@media (max-width:500px) {
	.un_first{
		display:none;
	}

}

Si no habéis entendido nada del CSS, no os preocupéis, os lo explico a continuación:

  • Primera regla @rule: Si la pantalla del navegador es más pequeña que 1024px, se aplicará la clase css un_address.
  • Segunda regla @rule: Si la pantalla del navegador es más pequeña que 768px, se aplicará la clase css un_age.
  • Tercera regla @rule: Si la pantalla del navegador es más pequeña que 500px, se aplicará la clase css un_first.

La definición display:none en el CSS significa que los elementos HTML no se mostrarán.

He definido la primera columna de la tabla html con la clase css un_first:

<td class="un_first">

la columna age de la tabla HTML con la clase css un_age:

<td class="un_age">

la columna address con la clase css un_address:

<td class="un_address">

¿Qué conclusión podemos sacar con esto?

  • Si la resolución de la pantalla es de 1024px o más, el usuario verá todas las columnas de la tabla.
  • Si la resolución de la pantalla es más pequeña que 1024px, se ocultará la columna address
  • Si la resolución de pantalla es más pequeña que 768px, la columna age se ocultará.
  • Si la resolución de pantalla es más pequeña que 500px, la columna first se ocultará.

Y este ha sido el artículo en el que trataba explicaros cómo crear tablas HTML responsive mediante media queries de CSS, esperamos que te haya gustado y sepas aplicarlo en tus futuros proyectos. Muchas gracias a la autora del código, Alexandra Gren, por cedernos la publicación del mismo.

Ya sabes que si nos quieres proponer un tema que quieres ver reflejado como un tutorial o como una práctica, solo tienes que hacer uso del área de comentarios de un poco más abajo. Por el contrario, si quieres enviarnos tus propios tutoriales, puedes hacerlo a través de la intranet de usuarios que está habilitada para ello, a través del menú Enviar Tutorial. Ya sabes, ayúdanos a crecer con tus conocimientos. ¡Un saludo y feliz código!

 

COMPARTE ESTE ARTÍCULO

COMPARTIR EN FACEBOOK
COMPARTIR EN TWITTER
COMPARTIR EN LINKEDIN
COMPARTIR EN WHATSAPP