comparte el articulo 

Hacer tablas con HTML y CSS

Actualizado el 20/10/2011 < > 1 Comentario

Resumen: Estudiamos cómo hacer tablas en HTML y darles estilo mediante el uso de propiedades CSS.

Debemos admitir que la mayor parte del tiempo que utilizamos las palabras CSS y Tablas en una misma oración es para demeritar a esta estructura y mostrar los beneficios de utilizar estilos en su lugar al momento de llevar acabo la maquetación de nuestro sitio, pero en esta ocasión nos encargaremos de plantear una alternativa que nos permitirá combinar estos dos elementos, es decir tener una estructura de tabla formada utilizando CSS.

El desuso de las tablas como herramienta de diseño se ha venido promoviendo desde hace años, diseñadores y desarrolladores han decidió no seguir utilizando esta clase de estructura por el simple hecho de no respetar los estándares, pero ¿Esto cambia si utilizamos CSS?, y si es así ¿Cuándo es que debemos utilizar dichas tablas CSS?.

Creación de tablas CSS

Tenemos que aclarar que el modelo que utilizaremos para crear tablas con CSS está basado en la manera que HTML4 crea dichas estructuras. Este modelo cuenta con soporte en una gran cantidad de navegadores, pudiéndose utilizar en cualquiera de los navegadores actuales.

Si trabajaste con tablas anteriormente no te costará ningún problema empezar a desarrollarlas con CSS, ambos modelos son muy parecidos, las filas siguen siendo el elemento primario, se especifican de forma explícita y las columnas se dereivan de la forma en que las filas y celdas se establezcan.

Cada elemento de la tabla HTML tiene un valor equivalente en la propiedad display de CSS. La única diferencia real es que no hay distinción entre td y th. A continuación mostramos los elementos de una tabla HTML y su correspondiente valor de display en CSS.

&lt;br /&gt;table     { display: table }&lt;br /&gt;tr        { display: table-row }&lt;br /&gt;thead     { display: table-header-group }&lt;br /&gt;tbody     { display: table-row-group }&lt;br /&gt;tfoot     { display: table-footer-group }&lt;br /&gt;col       { display: table-column }&lt;br /&gt;colgroup  { display: table-column-group }&lt;br /&gt;td, th    { display: table-cell }&lt;br /&gt;caption   { display: table-caption }&lt;br /&gt;

También podemos hacer cambios de posición, como los títulos “caption” que se pueden colocar encima o debajo de la tabla utilizando la propiedad “caption-side”, los valores pueden ser “top” o “bottom” según la posición que deseas.

Conociendo esto y con la experiencia que tuvimos anteriormente con estas estructuras, ya no nos debe resultar difícil establecer nuestra primera tabla con CSS, para ello plantemos un código HTML como el siguiente:

&lt;br /&gt;&amp;lt;div id="tabla"&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;  &amp;lt;div class="fila" id="fila1"&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;    &amp;lt;span class="celda" id="celdaA1"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;    &amp;lt;span class="celda" id="celdaA2"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;  &amp;lt;/div&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;  &amp;lt;div class="fila" id="fila2"&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;    &amp;lt;span class="celda" id="celdaB1"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;    &amp;lt;span class="celda" id="celdaB2"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;  &amp;lt;/div&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;  &amp;lt;div class="fila" id="fila3"&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;    &amp;lt;span class="celda" id="celdaC1"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;    &amp;lt;span class="celda" id="celdaC2"&amp;gt;&amp;lt;/span&amp;gt;&lt;br /&gt;&lt;%%KEEPWHITESPACE%%&gt;  &amp;lt;/div&amp;gt;&lt;br /&gt;&amp;lt;/div&amp;gt;&lt;br /&gt;

Y finalmente con un estilo CSS como este:

&lt;br /&gt;#tabla {display: table;}&lt;br /&gt;.fila  {display: table-row;}&lt;br /&gt;.celda {display: table-cell;}&lt;br /&gt;

Se establece la estructura simplemente utilizando elementos tipo “div” y “span”, sin necesidad de recurrir a etiquetas obsoletas. Simplemente con leer el código anterior podemos deducir rápidamente la estructura que tendrá la tabla.

Uso de las tablas CSS

Si ya tenemos la estructura y sabemos como representarla con CSS, llega el momento de definir en qué casos utilizar tablas para presentar contenido.

Tal como sucede con las tablas hechas con código HTML4, su uso se debe limitar a desplegar únicamente datos que realmente merezcan ser representados de manera tabular. Si decides utilizar para dar orden y posicionamiento a un sitio sabemos que existen mejores maneras así que resulta mejor ahorrarnos su uso para esto.

Si su función es la misma, y no podemos sacarle ventaja para el posicionamiento, entonces ¿Qué marca la diferencia con las tablas normales? Siendo honestos son pocos los casos de tablas hechas con CSS que se pueden observar a lo largo de la web, generalmente si quieres representar datos estadísticos o tabulares utilizas tablas normales y si quieres diseñar un sitio utilizas otras técnicas.

La ventaja por la que muchos pudieran abogar es que el CSS es un lenguaje más sencillo para realizar cambios, que es menos rígido, pero al final en la práctica ambas estructuras lucirán igual de rígidas. Lo que si se puede considerar una ventaja, es el hecho de que escribir algo más semánticamente aceptado en estos días, ya que estamos utilizando elementos que describen mejor el contenido que estamos exponiendo.

Otra ventaja que se le puede dar es el uso de identificadores para cada celda, o cada fila y columna, de esta manera se puede hacer una mayor especificación de los estilos que queremos para la tabla.

Quizás sea difícil encontrar una verdadera razón de peso para elegir utilizar tablas CSS sobre las tablas normales, al final el desarrollador optará por aquella que le resulte más sencillo utilizar o comprender, y que claro cumpla con los requerimientos de su proyecto.

Al final tenemos que entender que las tablas CSS cumplen más con una función visual, una representación de la estructura que comúnmente teníamos que utilizar a través de la etiqueta “table”.

Conclusión

Las tablas CSS son muy fáciles de comprender y de utilizarse, simplemente basta con recordar la propiedad display de CSS que corresponde a cada etiqueta de la tabla que comúnmente utilizamos.

Existen muchas buenas funcionalidades que nos ofrecen las tablas CSS, como es el caso de la habilidad para colapsar mediante la propiedad “visibility: collapse”, las cuales pueden ser utilizadas como solución para algunos problemas específicos, sin embargo no proveen de una ventaja relevante sobre sus antecesoras y actualmente existen mejores formas de lograr un orden y posicionamiento en un sitio.

A pesar de esto existe la opción de utilizarlas, y como tal se tiene que conocer la manera de declararlas, ese fue el propósito de este artículo.

Publicado el 20/10/2011, última actualización 20/10/2011.

Contenido exclusivo de LaWebera.es. Prohibida su copia.

Autor: Daniel Ernesto Navarro Herrera

URL: LaWebera.es :: Diseño Paginas Web

Añadir Comentario (Subir al texto)

1 Comentario

  1. caronte

    la pagina no se ve bien

    Domingo, 17 de agosto 2014

(Subir al texto)

Añadir Comentario

* Campos obligatorios

Meneame Bitacoras