Rendering speed of table as table vs table as div

Benchmark created on

Preparation HTML

<style>
/* styles for rendering table as table */
table {
    border-collapse: collapse;
}

td {
    border: 1px solid;
    padding: 5px;
}

/* styles for rendering table as div */
.table {
    display: table;
    border-collapse: collapse;
}

.tr {
    display: table-row;
}

.td {
    display: table-cell;
    border: 1px solid;
    padding: 5px;
}
</style>

<div id="ctr"></div>

Setup

ROW_COUNT = 10;
  COL_COUNT = 10;
  DATA = [];
    
  for (var r = 0; r < ROW_COUNT; r++) {
    var row = [];
    for (var c = 0; c < COL_COUNT; c++) {
      var text = String.fromCharCode(65 + c) + r; // A0, B1, C33, ...
      row.push(text);
    }
    DATA.push(row);
  }

Teardown



            document.getElementById("ctr").innerHTML = "";

Test runner

Ready to run.

Testing in
TestOps/sec
Rendering table as table
var html = [];
html.push("<table>");
for (var r = 0; r < ROW_COUNT; r++) {
  html.push("<tr>");
  for (var c = 0; c < COL_COUNT; c++) {
    html.push("<td>");
    html.push(DATA[r][c]);
    html.push("</td>");
  }
  html.push("</tr>");
}
html.push("</table>");

document.getElementById("ctr").innerHTML = html.join("");
ready
Rendering table as div
var html = [];
html.push("<div class='table'>");
for (var r = 0; r < ROW_COUNT; r++) {
  html.push("<div class='tr'>");
  for (var c = 0; c < COL_COUNT; c++) {
    html.push("<div class='td'>");
    html.push(DATA[r][c]);
    html.push("</div>");
  }
  html.push("</div>");
}
html.push("</div>");

document.getElementById("ctr").innerHTML = html.join("");
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.