Mostrar capas con formato de tabla


Este artículo explica como hacer mediante estilos que cualquier etiqueta se comporte como los elementos de las tablas.

Antes de nada, comentar que por regla general el comportamiento de las tablas, representar datos de forma tabulada en filas y columnas, debe ser realizado con las etiquetas correspondientes de HTML table, tr, td, etc. siempre que se pueda. Ya que para ello fueron creadas estas etiquetas.

Debido a esto, la utilidad de este artículo puede estar en documentos XML, o en algún caso en donde se tengan que modificar apariencias o estructuras de elementos mediante JavaScript.

Debido a que la filosofía del CSS, es definir toda la apariencia visual de los documentos a los que acompaña, se han ido añadiendo propiedades y valores para poder definir cualquier comportamiento, entre ellos los de la representación de tabla. Para ello se añadieron al estilo display todos los valores posibles para las tablas.

A continuación se muestran los valores de la propiedad display para tablas, seguido de la etiqueta HTML relacionada y su descripción.

Valor<HTML>Descripción
table<table>La caja contenedora de la tabla mostrada como bloque
inline-table<table>La caja contenedora de la tabla mostrada como elemento en línea
table-caption<caption>Título de tabla
table-column-group<colgroup>Agrupación de columnas de tabla. Sólo sirve para asignar atributos. El contenido de la etiqueta no se presentará.
table-column<col>Columna de tabla. Sólo sirve para asignar atributos. El contenido de la etiqueta no se presentará.
table-header-group<thead>Agrupación de cabeceras de tabla.
table-row-group<tbody>Agrupación de filas de tabla.
table-footer-group<tfoot>Agrupación de filas de pie de tabla.
table-row<tr>Fila de tabla
table-cell<td> / <th>Celda de tabla

En el ejemplo, se muestran 2 tablas iguales, la primera realizada mediante etiquetas HTML (table, tr, td, ...) y la segunda realizada con div´s asignándoles las diferentes estilos de tabla.

Se puede ver que el resultado es el mismo. Las diferencias que puedan aparecer serán debido a como representan las tablas los diferentes navegadores, caption centrada, tabla con espaciado, etc.

En todo caso, todos esos efectos, pueden ser modificados también mediante estilos (text-align, border, border-collapse, etc.).

Para dejar lo más limpio posible el ejemplo, sólo se ha añadido la negrita al th.


Código:
<!-- Copyright © McAnam.com -->
<!-- http://www.mcanam.com/articulos/Estilos.php?id=8 -->


<style type="text/css">
    
    .table        {display: table;}
    .caption    {display: table-caption;}
    .colgroup    {display: table-column-group;}
    .col        {display: table-column;}
    .thead        {display: table-header-group;}
    .tbody        {display: table-row-group;}
    .tfoot        {display: table-footer-group;}
    .tr            {display: table-row;}
    .th            {display: table-cell; font-weight:bold;}
    .td            {display: table-cell;}

</style>
    
<table>
    <caption>Tabla realizada con etiquetas HTML</caption>
    <colgroup>
        <col style="background-color:yellow" />
        <col style="background-color:blue" />
        <col style="background-color:green" />
        <col style="background-color:red" />
    </colgroup>
    <thead>
        <tr>
            <th>Cabecera 1</th>
            <th>Cabecera 2</th>
            <th>Cabecera 3</th>
            <th>Cabecera 4</th>
        </tr>
    </thead>
    <tfoot>
        <tr>
            <td>Pie 1</td>
            <td>Pie 2</td>
            <td>Pie 3</td>
            <td>Pie 4</td>
        </tr>
    </tfoot>
    <tbody>
        <tr>
            <td>Campo 1</td>
            <td>Campo 2</td>
            <td>Campo 3</td>
            <td>Campo 4</td>
        </tr>
    </tbody>
</table>

<br />
<br />


<div class="table">
    <div class="caption">Tabla realizada con estilos</div>
    
    <div class="colgroup">
        <div class="col" style="background-color:yellow"></div>
        <div class="col" style="background-color:blue"></div>
        <div class="col" style="background-color:green"></div>
        <div class="col" style="background-color:red"></div>
    </div>
    
    <div class="thead">
        <div class="tr">
            <div class="th">Cabecera 1</div>
            <div class="th">Cabecera 2</div>
            <div class="th">Cabecera 3</div>
            <div class="th">Cabecera 4</div>
        </div>
    </div>
    <div class="tfoot">
        <div class="tr">
            <div class="td">Pie 1</div>
            <div class="td">Pie 2</div>
            <div class="td">Pie 3</div>
            <div class="td">Pie 4</div>
        </div>
    </div>
    <div class="tbody">
        <div class="tr">
            <div class="td">Campo 1</div>
            <div class="td">Campo 2</div>
            <div class="td">Campo 3</div>
            <div class="td">Campo 4</div>
        </div>
    </div>
</div>

Demostración:
Tabla realizada con etiquetas HTML
Cabecera 1 Cabecera 2 Cabecera 3 Cabecera 4
Pie 1 Pie 2 Pie 3 Pie 4
Campo 1 Campo 2 Campo 3 Campo 4


Tabla realizada con estilos
Cabecera 1
Cabecera 2
Cabecera 3
Cabecera 4
Pie 1
Pie 2
Pie 3
Pie 4
Campo 1
Campo 2
Campo 3
Campo 4

Links relacionados:
Controlar el desbordamiento en una etiqueta
Maquetación con divs y CSS (margin y position absolute)
Maquetación con divs y CSS (float)
Como usar los estilos
HTML, Controlar el margen de las tablas


Para cualquier duda, consulta, sugerencia, opinión, colaboración, etc; no dude en ponerse en contacto con nosotros

Copyright © 2002-2017 [McAnam]. Reservados todos los derechos.
www.mcanam.com