Skip to main content
etiquetas editadas
Enlace
Rubén
  • 11.5k
  • 7
  • 41
  • 85
Origen Enlace
hubman
  • 2.7k
  • 13
  • 44
  • 96

tabla html con javascript

Quiero obtener una tabla como el de la imagen, pero los titulos EFR y EFA no se acomodan bien, y como obtener la ultima fila con un poco de espacio?

Tambien quisiera mejorar el codigo, es mucho codigo para una simple tabla

introducir la descripción de la imagen aquí

var table = document.createElement('table');
table.class = "display";
table.id = "example";
var thead = document.createElement('thead');
var tr = document.createElement('tr');
var th1 = document.createElement('th');
var th2 = document.createElement('th');
var th3 = document.createElement('th');

var texto1 = document.createTextNode("usuario");
var texto2 = document.createTextNode("EFA");
var texto3 = document.createTextNode("EFR");
th1.appendChild(texto1);
th2.appendChild(texto2);
th3.appendChild(texto3);
tr.appendChild(th1);
tr.appendChild(th2);
tr.appendChild(th3);
thead.appendChild(tr);
table.appendChild(thead);

var tbody = document.createElement('tbody');

for (var indice = 0; indice < 5; indice++) {

  var tr = document.createElement('tr');
  var td = document.createElement('td');
  var texto1 = document.createTextNode('hola');
  td.appendChild(texto1);
  td.className = "info";
  tr.appendChild(td);

  var td = document.createElement('td');
  var td11 = document.createElement('td');
  var td12 = document.createElement('td');

  var elLink = document.createTextNode('datos');
  var elLink2 = document.createTextNode('datos');
  td11.appendChild(elLink);
  td12.appendChild(elLink2);
  tr.appendChild(td11);
  tr.appendChild(td12);

  var td = document.createElement('td');
  var td11 = document.createElement('td');
  var td12 = document.createElement('td');

  var elLink = document.createTextNode('datos');
  var elLink2 = document.createTextNode('datos');
  td11.appendChild(elLink);
  td12.appendChild(elLink2);
  tr.appendChild(td11);
  tr.appendChild(td12);

  tbody.appendChild(tr);
}
tbody.appendChild(tr);
table.appendChild(tbody);
document.getElementById("tabla").appendChild(table);
<div id="tabla"></div>