css - example - Tabla real vs. Tabla Div

table html

Question

Esta

<table>
<tr>
<td>Hello</td>
<td>World</td>
</tr>
</table>

Se puede hacer con esto:

<div>
<div style="display: table-row;">
<div style="display: table-cell;">Hello</div>
<div style="display: table-cell;">World</div>
</div>
</div>

Ahora, ¿hay alguna diferencia entre estos dos en términos de rendimiento y / o velocidad de renderizado o son exactamente iguales?

Answer 1

En mi opinión, la única razón para usar divs es para diseñar y ajustar el diseño según el tamaño del navegador. Si no está roto, no lo arregles. Las divisiones son más fáciles de diseñar aunque con CSS.

Tablas: profesionales: puede obtener un diseño muy complicado exactamente como lo desee. Más confiable. A veces, las consideraciones se vuelven un poco raras con un estilo css complicado. no es bueno para sitios web responsables.

Divs: se puede ajustar en función de la entrada del navegador, más flexible y más fácil de diseñar.

Answer 2

En primera instancia, no me preocuparía el rendimiento, sino más sobre la semántica. Si se trata de datos tabulares, use una <table> . Si solo son elementos de bloque que representan un elemento de diseño, use <div> .

Si realmente te preocupas por el rendimiento, la respuesta dependerá del cliente utilizado. Por ejemplo, se sabe que MSIE es lenta en el procesamiento de tablas. Al menos debería probarse en diferentes navegadores.

Si esta inquietud es causada por datos grandes, entonces consideraría introducir paginación / filtrado de los datos que está a punto de mostrar.

Answer 3

Es semánticamente incorrecto simular tablas de datos con divs y, en general, irrelevante para el rendimiento, ya que la representación es instantánea. El cuello de la botella proviene de JavaScript o páginas extremadamente largas con una gran cantidad de elementos anidados que, por lo general, en los viejos tiempos son 100 tablas anidadas para crear diseños.

Usa tablas para lo que deben y div''s para lo que deben. Las propiedades de la celda de la tabla de visualización y de la celda deben utilizar distribuciones div más que crear tablas para representaciones de datos. Mírelos como un diseño de columnas y filas iguales a las que puede encontrar en un periódico o una revista.

En cuanto al rendimiento, tienes un par de bytes más con el ejemplo div, lol :)

Answer 4

Hay muchas discusiones sobre esto y la tabla de div generalmente se lleva la palma por su flexibilidad en el diseño. Aquí hay un enlace: http://css-discuss.incutio.com/wiki/Tables_Vs_Divs

Answer 5

La tabla no se representará hasta que se haya descargado todo su marcado. Mientras que los divs individuales se procesarán tan pronto como se descargue su marcado. Supongo que el tiempo total será el mismo, pero los divs darán una percepción de mejor rendimiento y más capacidad de respuesta.

Answer 6

No debería preocuparse por las interpretaciones en la representación de tablas. Incluso si hay uno, no lo notará hasta que haya cientos (miles?) De tablas para mostrar. Usa lo que sientas que es más cómodo para ti.

Answer 7

Quería mencionar que si usa una estructura de tabla en lugar de div, los usuarios pueden mantener CMD (o ALT en Windows) para seleccionar un área de datos determinada de la tabla para copiar. Esa información también se pega fácilmente en Excel y otros programas similares de libros de trabajo.

Answer 8

Si está presentando datos tabulares, entonces debe usar una tabla - it, y los elementos relacionados, tienen toda la semántica necesaria para representar una tabla de datos. Un desorden de divs no tiene ninguno.

Answer 9

Solo lanzando mis dos centavos sobre el tema del rendimiento. Para tablas pequeñas (menos de 100 filas, por ejemplo), el uso de DIVs no representaría una gran diferencia en cuanto al rendimiento.

Si desea generar conjuntos de datos muy largos, por otro lado, sin duda debe utilizar tablas HTML tradicionales.

Breve explicacion:

Todo esto surgió del proyecto de mi empresa, donde escribí una clase de Javascript para generar tablas de procedimientos basados ​​en datos de SQL (es un tipo de módulo de informes). De todos modos, me gustan los DIV, así que escribí que estaba basado en DIV, al igual que el ejemplo OP.

Después de un rendimiento horrendo (en IE8 en particular), decidí volver a escribirlo usando solo tablas, ya que, en general, se trata de datos tabulares bastante simples. Las tablas son, por el motivo que sea, aproximadamente el doble de rápidas en mi máquina en Chrome. Lo mismo es cierto para Safari.

Dicho esto, dado que no puedo proporcionar el código de mi trabajo, escribí un pequeño artículo de referencia que me permite probar cualquiera de ellos o la metodología. Verás que son casi idénticos, solo uno usa divs con estilo para imitar el comportamiento estándar de una mesa, y el otro es solo una mesa de la vieja escuela.

La única diferencia real es el tipo de elemento que se genera, por lo que es lo único que puedo explicar en el delta del tiempo. Estoy seguro de que varía según el navegador, pero me parece que los elementos de la tabla son más rápidos.

<script type="text/javascript">
var time_start = new Date().getTime();
var NUM_ROWS = 5000;
var NUM_CELLS = 8;
var OLD_STYLE = 1; // toggle 0/1, true/false
if(OLD_STYLE)
{
var table = document.createElement(''table'');
document.body.appendChild(table);
for(var a = 0; a < NUM_ROWS; a++)
{
var row = document.createElement(''tr'');
for(var b = 0; b < NUM_CELLS; b++)
{
var cell = document.createElement(''td'');
cell.innerHTML = ''cell'';
row.appendChild(cell);
}
table.appendChild(row);
}
}
else
{
var table = document.createElement(''div'');
document.body.appendChild(table);
for(var a = 0; a < NUM_ROWS; a++)
{
var row = document.createElement(''div'');
row.setAttribute(''style'',''display: table-row; padding: 2px;'')
for(var b = 0; b < NUM_CELLS; b++)
{
var cell = document.createElement(''div'');
cell.setAttribute(''style'',''display: table-cell; padding: 2px'');
cell.innerHTML = ''cell'';
row.appendChild(cell);
}
table.appendChild(row);
}
}
var dt = (new Date().getTime() - time_start)/1000;
console.log( dt + '' seconds'' );
</script>