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.