¿Qué diferencia hay entre una tabla y una tabla? Que una es una tabla y la otra no es una tabla pero ambas son tablas.

Parece un galimatias pero es lo que ofrecen algunas propiedades recientes del CSS que tienen algún uso práctico cuando se trata de alinear cosas verticalmente pero que no estoy muy seguro que aporten nada nuevo aunque ya se sabe que en estas cosas, a veces, lo sencillo se complica porque es más cool.

Acá hay dos modelos ¿hay alguna diferencia ente ellos?

esta es una tabla que es tabla
Columna 1 Columna 2 Columna 3
Fila 1 Celda 1 Fila 1 Celda 2 Fila 1 Celda 3
Fila 2 Celda 1 Fila 2 Celda 2 Fila 2 Celda 3
Fila 3 Celda 1 Fila 3 Celda 2 Fila 3 Celda 3

una tabla que no es tabla
Columna 1Columna 2Columna 3
Fila 1 Celda 1Fila 1 Celda 2Fila 1 Celda 3
Fila 2 Celda 1Fila 2 Celda 2Fila 2 Celda 3
Fila 3 Celda 1Fila 3 Celda 2Fila 3 Celda 3

Pocas. Así, sin propiedades extras, dependiendo del navegador, veremos alguna fila centrada en lugar de alineada a la izquierda o una diferencia en la fuente de los textos, tamaños levemente distintos. La primera, es una tabla tabla es decir, está armada con etiquetas HTML:
<table>
  <caption>esta es una tabla que es tabla</caption>
  <tr>
    <th>Columna 1</th>
    <th>Columna 2</th>
    <th>Columna 3</th>
  </tr>
  <tr>
    <td>Fila 1 Celda 1</td>
    <td>Fila 1 Celda 2</td>
    <td>Fila 1 Celda 3</td>
  </tr>
  .......
</table>
La segunda, es un conjunto de DIVs con ciertas propiedades CSS:
<style>
  #tabla {display: table;}
  #tabla .caption {display: table-caption}
  #tabla .fila {display: table-row;}
  #tabla .celda {display: table-cell;}
  #tabla .filatitulo {display: table-row;}
  #tabla .filatitulo .celda {display: table-cell;}
</style>

<div id="tabla">
  <div class="caption">una tabla que no es tabla</div>
  <div class="filatitulo">
    <span class="celda">Columna 1</span>
    <span class="celda">Columna 2</span>
    <span class="celda">Columna 3</span>
  </div>
  <div class="fila">
    <span class="celda">Fila 1 Celda 1</span>
    <span class="celda">Fila 1 Celda 2</span>
    <span class="celda">Fila 1 Celda 3</span>
  </div>
.......
</div>
La propiedad básica que permite "simular" una tabla es display y puede tener estos valores:

table es el equivalente a la etiqueta TABLE
table-row es el equivalente a la etiqueta TR
table-cell es el equivalente a las etiquetas TD y TH
table-caption es el equivalente a la etiqueta CAPTION
table-header-group es el equivalente a la etiqueta THEAD
table-row-group es el equivalente a la etiqueta TBODY
table-footer-group es el equivalente a la etiqueta TFOOT
table-column-group es el equivalente a la etiqueta COLGROUP
table-column es el equivalente a la etiqueta COL

Si bien pueden usarse en cualquier navegador, incluyendo IE8, al igual que su pariente HTML, las tablas con CSS pueden verse de modo diferente en cada uno de ellos.

Más allá de algún uso concreto, el resultado final será similar, unas y otras tienen ventajas y desventajas y las discusiones sobre cual es mejor o peor, hay que dejárselas a lo interesados en estas cuestiones que casi son religiosas; como usuarios, si algo se ve bien y funciona en al mayoría de los navegadores, es que está bien. Podrá mejorarse pero nada más. Mucho más interesante será cuando los navegadores comiencen a soportar el llamado Grid Layout, algo que por ahora, sólo es parte del futuro incierto.

REFERENCIAS:vanseodesign.com

7 comentarios:

Alejandro  

No acabo de ver la utilidad de forzar divs para que se comporten como una tabla. Supongo que para algún caso en concreto puede ser útil, si no, no entiendo que se hayan creado estas reglas css. Aún así creo que si necesitas meter datos en una tabla, lo más fácil es crear una tabla, que para eso están, ahorrando así líneas de css. Gran artículo! un saludo!

Responder
m.p.moreno  

Se me hace enrevesado, un auténtico galimatías. Si alguna vez lo voy a poner en práctica lo estudiaré más despacio.
Feliz semana.

Responder
Lautaro Rodríguez Xavier  

Gracias, ahora ya se que debo hacer para empezar de nuevo. :P

Responder
JMiur  

Tampoco les veo demasida utilidad salvo casos excepcionales. Me imagino que ha sido una forma de tranquilizar a los que odian la tablas comunes, haciéndoles creer que de este modo no las usan aunque las usen :D

Responder
BytesExt  

Ser o no ser (tabla), esa es la pregunta...

Responder
Scarf Girl  

Me leo muchas veces los tutoriales que escribes de vez, en cuando cuando me da la fijación de cambiar el blog jajaja. (A veces se me pone la cabeza como 1 bombo porque realmente si no fuera por ellos (los tutoriales, mi blog se parecería al de una niña de 10 años). El caso es que hace unos días me puse a mirar estas cosas y yo no se si es qu hago cosas mal..q puede ser, pero con las plantillas de blogger no me funcionan algunas y al final pensé- jo pero si esto es lo mismo pero con otros nombres y me he reído porque es verdad, ahora las tablas son "grid" jajaj y todo así, palabritas más fashion , para terminar vendiendo imagino un producto.NO suelo comentar, ni preguntar, si no me sale algo busco opciones de "bricolage" que se amolden a una zurda ajaja. Gracias por compartir tus conocimientos de todo corazón. Menos mal que gente como tú nos enseña a los "negados" de la informática, aunque se nos ponga la cabeza inflada :) jajaja.Te sigo el blog

Responder
JMiur  

Gracias por el comentario, Scarf Girl :D

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR