Las tablas que no son tablas siguen siendo tablas

¿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