Crear tabla usando JavaScript

Crea una tabla HTML a partir de datos de JavaScript construyendo sus elementos con document.createElement(), estableciendo el texto de las celdas con textContent y añadiendo la tabla terminada a un contenedor de la página con appendChild(). Este enfoque resulta útil cuando las filas proceden de datos que cambian mientras la página está en ejecución.

Estructura de una tabla HTML y elementos necesarios

Una tabla describe su contenido mediante elementos anidados. El elemento table contiene filas (tr); cada fila contiene celdas de encabezado (th) o celdas de datos (td). Usa th para una celda que identifica una fila o una columna, y td para los datos ordinarios. Las celdas de encabezado no se limitan a thead: también pueden identificar filas del cuerpo de la tabla.

Los elementos thead y tbody agrupan, respectivamente, las filas de encabezado y las filas del cuerpo. Facilitan la organización de tablas grandes, pero no son obligatorios en todas las tablas. El grupo tfoot puede contener filas de resumen o de pie cuando la tabla lo necesite. En una tabla pequeña, la estructura esencial es un table con sus filas y celdas; añade elementos de agrupación cuando ayuden a aclarar la estructura.

Crear y rellenar una tabla con JavaScript

El ejemplo siguiente crea una fila de encabezado y dos filas de datos. Construye una tabla de tres columnas —número, nombre y empresa— y coloca texto normal en cada celda mediante textContent. Así, los valores se tratan como texto en vez de interpretarse como HTML, una opción predeterminada más segura para datos que podrían incluir entradas del usuario.

El ejemplo para el navegador usa el DOM nativo y añade la tabla terminada a un elemento #table-container ya existente. La demostración independiente de Node.js que aparece después usa un modelo sencillo con forma de DOM para mostrar la lógica de creación de filas y sus recuentos; no crea una tabla visible en el navegador.

Ejemplo de página para el navegador (guárdalo como una página HTML y ábrelo en un navegador):

El código y las etiquetas o salidas visibles de esta sección se mantienen en inglés.

<!doctype html>
<html lang="en">
  <body>
    <div id="table-container"></div>
    <script>
      const container = document.getElementById("table-container");
      const table = document.createElement("table");
      const thead = document.createElement("thead");
      const tbody = document.createElement("tbody");
      const headings = ["No.", "Name", "Company"];
      const records = [
        ["1", "James Clerk", "Netflix"],
        ["2", "Adam White", "Microsoft"]
      ];

      const headerRow = document.createElement("tr");
      for (const heading of headings) {
        const cell = document.createElement("th");
        cell.textContent = heading;
        headerRow.appendChild(cell);
      }
      thead.appendChild(headerRow);

      for (const record of records) {
        const row = document.createElement("tr");
        for (const value of record) {
          const cell = document.createElement("td");
          cell.textContent = value;
          row.appendChild(cell);
        }
        tbody.appendChild(row);
      }

      table.appendChild(thead);
      table.appendChild(tbody);
      container.appendChild(table);
    </script>
  </body>
</html>

Ejecuta este ejemplo de JavaScript autocontenido:

class Element {
  constructor(name) {
    this.name = name;
    this.children = [];
    this.textContent = "";
  }

  appendChild(child) {
    this.children.push(child);
    return child;
  }
}

const document = {
  createElement(name) {
    return new Element(name);
  },
  body: new Element("body")
};

const container = document.createElement("div");
container.id = "table-container";
document.body.appendChild(container);

const table = document.createElement("table");
const thead = document.createElement("thead");
const tbody = document.createElement("tbody");
const headings = ["No.", "Name", "Company"];
const records = [
  ["1", "James Clerk", "Netflix"],
  ["2", "Adam White", "Microsoft"]
];

const headerRow = document.createElement("tr");
for (const heading of headings) {
  const cell = document.createElement("th");
  cell.textContent = heading;
  headerRow.appendChild(cell);
}
thead.appendChild(headerRow);

for (const record of records) {
  const row = document.createElement("tr");
  for (const value of record) {
    const cell = document.createElement("td");
    cell.textContent = value;
    row.appendChild(cell);
  }
  tbody.appendChild(row);
}

table.appendChild(thead);
table.appendChild(tbody);
container.appendChild(table);

const tableElement = container.children[0];
const headerCells = tableElement.children[0].children[0].children;
const bodyRows = tableElement.children[1].children;
console.log(`${headerCells.length} headings, ${bodyRows.length} data rows`);

3 headings, 2 data rows

document.createElement() recibe el nombre de un elemento como cadena y devuelve un elemento nuevo. El código crea un tr por cada fila y después le añade celdas th o td. Rellena cada celda antes de colocar su fila en thead o tbody. Por último, incorpora los grupos a la tabla y añade esta al contenedor creado al inicio del ejemplo.

En una página que controlas, el contenedor puede ser tan sencillo como <div id="table-container"></div>. En el código del navegador, selecciona ese elemento existente con document.getElementById("table-container") y añádele la tabla terminada. Coloca el script después del contenedor en la página o ejecútalo cuando el documento ya se haya cargado, para asegurarte de que el elemento de destino exista. Aplica el estilo por separado con CSS; por ejemplo, añade bordes y relleno a table, th y td. JavaScript crea la estructura y el contenido, mientras que CSS controla su aspecto.

La demostración de Node.js muestra los recuentos de la lógica para construir las filas; no representa una tabla visible en el navegador. Sus etiquetas de salida permanecen en inglés, igual que en el ejemplo original.

Añadir la tabla al DOM y verificarla

Añade la tabla terminada al contenedor seleccionado con container.appendChild(table). Así la tabla queda dentro del contenedor y el resto de la página permanece intacto. Si quieres que la tabla sustituya el contenido existente, bórralo de forma deliberada antes de añadirla; de lo contrario, cada ejecución agregará otra tabla.

Para verificar el resultado, abre las herramientas para desarrolladores del navegador e inspecciona el contenedor en el panel Elements. Debería contener un table, con un thead que incluya una fila de tres celdas th y un tbody con dos filas de tres celdas td cada una. La tabla mostrará los encabezados “No.”, “Name” y “Company” —número, nombre y empresa; las etiquetas permanecen en inglés—, seguidos de James Clerk / Netflix y Adam White / Microsoft. Si la tabla no aparece, comprueba el ID del contenedor y el momento en que se ejecuta el script. Para los valores de texto sin formato, sigue usando textContent en lugar de asignar los datos a innerHTML.