Logo de islavisual
Logo de islavisual IslaVisual
imagen de sección

Ultima revisión 27/04/2013

Responsive Design: Tablas CSS3

Una de los problemas más frecuentes que nos encontramos cuando nos metemos en el mundo del Diseño Responsive es el diseño de tablas. Esta tarea podemos hacerla tan complicada como se quiera pero, por ello, hoy vamos a hablar únicamente de este tema.

Como se trata de aprender la metodología Responsive pondremos 2 ejemplos sin demasiadas complicaciones aunque, sin duda, muy útiles y didácticos. Uno con DIV's y otro con TABLE.

Gestionar el número de columnas en función del ancho de la pantalla

Este ejemplo no es en realidad una tabla, aunque, visualmente se parezca, pero, casi seguro que esta forma de crear elementos que se asemejan a las tablas nos resultará útil en alguna ocasión.

Si observamos el código podemos ver que usamos media-queries que interactuan con los elementos cuando el dispositivo del usuario tiene una resolución determinada.

<style>
    div p {margin: 0; padding: .5em; color: #555; background: #f0f0f0}
    div p+p {background: #e0e0e0}
    div p+p+p {background: #d0d0d0}
    div p+p+p+p {background: #c0c0c0}

    div {display: table; width: 100%; table-layout: fixed}


    @media (min-width: 1025px) {
        div.one p {display: table-cell}
    }
    @media (min-width: 641px) and (max-width: 1024px) {
        div.one p:first-child {display: table-cell}
    }    
    @media (max-width: 640px) {
        div.one p {display: block}
    }

    @media (min-width: 1025px) {    
        div.two p {display: table-cell}
    }    
    @media (min-width: 801px) and (max-width: 1024px) {
        div.two p:first-child {display: table-cell}
        div.two p:last-child {display: table-cell}
    }    
    @media (min-width: 641px) and (max-width: 800px) {
        div.two p:first-child {display: table-cell}    
    }    
    @media (max-width: 640px) {
        div.two p {display: block}
    }
</style>
<div class="one">
    <p contenteditable>item 1</p>
    <p contenteditable>item 2</p>
    <p contenteditable>item 3</p>
</div>

<p>Cambia el tamaño de la ventana: bloques en table-cell se ajustan automáticamente para encajar formato de tres columnas, luego dos, y finalmente una sola columna.</p>

<p>O incluso con cuatro.! </p>

<div class="two">
    <p contenteditable>item 1</p>
    <p contenteditable>item 2</p>
    <p contenteditable>item 3</p>
    <p contenteditable>item 4</p>
</div>

El resultado lo podemos ver en el ejemplo Responsive con DIV's.

Tabla con Auto Ajuste en función de la pantalla

En este ejemplo vemos que, mediante media-queries, ocultamos la tercera celda de cada fila cuando la pantalla del disposiivo del usuario menor de 640px y que si, además, es menor a 480px, también se oculta la primera celda de cada fila y se cambian los modos de visualización de los TH y TD de la tabla.

<style>
    table {
        width: 90%;
        font-size: 0.9em;
    }
    table caption {
        color: #555;
        font-style: italic;
        margin-bottom: 8px;
    }
    table tr:last-child {background:#456789; color:#fff}
    th {
        text-align: left;
    }
    td:last-child, th:last-child {
        text-align:right;
    }
    td, th {
        padding: 6px 12px;
    }
    tr:nth-child(odd), tr:nth-child(odd) {
        background: #eee;
    }
    tr:nth-child(even) {
        background: #ddd;
    }
    tr:first-child, tr:first-child {
        background: #283a59;
    color:white;
    }
    table td:empty {
        background:white;
    }

    @media (max-width: 640px) {
         tr :nth-child(3) {display: none;}
    }

    @media (max-width: 480px) {
        tr:first-child {display: none;}
        th {display: block}
        td {display: inline!important;}
    }                             
</style>
<table class="table2">
    <tr>
        <th width="25%"><strong>Propiedad</strong></th>
        <th width="20%"><strong>Valor</strong></th>
        <th width="15%"><strong>Min/Max</strong></th>
        <th width="40%"><strong>Descripción</strong></th>
    </tr>
    <tr>
        <td>width</td>
        <td>Ancho (px)</td>
        <td>Si</td>
        <td>Ancho del área visible</td>
    </tr>
<tr>
        <td>height</td>
        <td>Alto (px)</td>
        <td>Si</td>
        <td>Altura del área visible</td>
    </tr>
    <tr>
        <td>device-width</td>
        <td>Ancho (px)</td>
        <td>Si</td>
        <td>Ancho total del dispositivo</td>
    </tr>
    <tr>
        <td>    device-height</td>
        <td>Alto (px)</td>
        <td>Si</td>
        <td>Altura total del dispositivo</td>
    </tr>
    <tr>
        <td>orientation</td>
        <td>“portrait” o “landscape”</td>
        <td>No</td>
        <td>Orientación del dispositivo</td>
    </tr>
    <tr>
        <td>aspect-ratio</td>
        <td>Relación (w/h)</td>
        <td>Si</td>
        <td>Relación ancho/alto expresado con dos enteros separados por / (ejem: 16/9)</td>
    </tr>
    <tr>
        <td>device-aspect-ratio</td>
        <td>Relación (w/h)</td>
        <td>Si</td>
        <td>Relación ancho/alto del dispositivo, expresado con dos enteros separados por /</td>
    </tr>
    <tr>
        <td>color</td>
        <td>Número entero</td>
        <td>Si</td>
        <td>Número de bits por color (si no hay color valor 0)</td>
    </tr>
    <tr>
        <td>color-index</td>
        <td>Número entero</td>
        <td>Si</td>
        <td>Número de entradas en la tabla de color del dispositivo</td>
    </tr>
    <tr>
        <td>monochrome</td>
        <td>Número entero</td>
        <td>Si</td>
        <td>Número de bits por píxel en la memoria de vídeo monocromo (blanco y negro si no, el valor es 0)</td>
    </tr>
    <tr>
        <td>resolution</td>
        <td>Resolución</td>
        <td>Si</td>
        <td>Densidad de píxeles del dispositivo, se expresa entero seguido de dpi (puntos por pulgada) o dpcm (puntos por centímetro)</td>
    </tr>
    <tr>
        <td>scan</td>
        <td>Progressive o interlace</td>
        <td>No</td>
        <td>Progresivo o entrelazado, Proceso de digitalización utilizada por los dispositivos de TV</td>
    </tr>
    <tr>
        <td>grid</td>
        <td>0 o 1</td>
        <td>No</td>
        <td>Si se establece en 1, el dispositivo está basado en red, tal como un terminal de teletipo o pantalla del teléfono con una sola fuente fija (todos los otros dispositivos son 0)</td>
    </tr>
    <tr>
        <td colspan="4">Listado de propiedades de las media queries</td>
    </tr>
</table>
</body>

El resultado lo podemos ver en el ejemplo Responsive con TABLE.

En una siguiente entrega pondremos más ejemplos de Tablas Responsive.

Sobre el autor

Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.