Criar tabela usando JavaScript

Crie uma tabela HTML a partir de dados JavaScript construindo seus elementos com document.createElement(), definindo o texto das células com textContent e adicionando a tabela pronta a um contêiner da página com appendChild(). Essa abordagem é útil quando as linhas vêm de dados que mudam enquanto a página está em execução.

Estrutura de uma tabela HTML e elementos necessários

Uma tabela usa elementos aninhados para descrever seu conteúdo. O elemento table contém linhas (tr); cada linha contém células de cabeçalho (th) ou células de dados (td). Use th para uma célula que identifica uma linha ou coluna, e td para dados comuns. As células de cabeçalho não se limitam a thead: elas também podem identificar linhas no corpo da tabela.

Os elementos thead e tbody agrupam, respectivamente, as linhas de cabeçalho e as linhas do corpo. Eles facilitam a organização de tabelas maiores, mas não são obrigatórios em todas as tabelas. Um grupo tfoot pode conter linhas de resumo ou rodapé quando necessário. Em uma tabela pequena, a estrutura essencial é um table com suas linhas e células; acrescente elementos de agrupamento quando eles deixarem a estrutura mais clara.

Crie e preencha uma tabela com JavaScript

O exemplo abaixo cria uma linha de cabeçalho e duas linhas de dados. Ele monta uma tabela com três colunas — número, nome e empresa — e insere texto comum em cada célula usando textContent. Assim, os valores são tratados como texto, em vez de serem interpretados como HTML, o que é a opção mais segura por padrão para dados que podem incluir conteúdo fornecido pelo usuário.

O exemplo para navegador usa o DOM nativo e adiciona a tabela pronta a um elemento #table-container já existente. A demonstração separada em Node.js que vem depois usa um pequeno modelo semelhante ao DOM para mostrar a lógica de criação das linhas e suas contagens; ela não cria uma tabela visível no navegador.

Exemplo de página para navegador (salve como uma página HTML e abra-a em um navegador):

O código e os rótulos ou saídas exibidos nesta seção permanecem em 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>

Execute este exemplo JavaScript autocontido:

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() recebe o nome de um elemento como string e retorna um novo elemento. O código cria um tr para cada linha e, em seguida, adiciona células th ou td a ela. Cada célula é preenchida antes de sua linha ser inserida em thead ou tbody. Por fim, os grupos são inseridos na tabela, e a tabela é adicionada ao contêiner criado no início do exemplo.

Em uma página sob seu controle, o contêiner pode ser tão simples quanto <div id="table-container"></div>. No código do navegador, selecione esse elemento existente com document.getElementById("table-container") e adicione a ele a tabela pronta. Coloque o script depois do contêiner na página ou execute-o depois que o documento for carregado, para garantir que o elemento de destino já exista. Aplique a apresentação separadamente com CSS, por exemplo, definindo bordas e espaçamento interno para table, th e td; o JavaScript cria a estrutura e o conteúdo, enquanto o CSS controla a aparência.

Adicione a tabela ao DOM e verifique o resultado

Adicione a tabela pronta ao contêiner selecionado com container.appendChild(table). Isso insere a tabela dentro do contêiner e mantém o restante da página. Se a tabela precisar substituir o conteúdo existente, limpe esse conteúdo de forma explícita antes de adicioná-la; caso contrário, cada execução acrescentará outra tabela.

Para conferir o resultado, abra as ferramentas de desenvolvedor do navegador e inspecione o contêiner no painel Elements. Ele deve conter um table, com um thead contendo uma linha de três células th e um tbody contendo duas linhas com três células td cada. A tabela renderizada deve mostrar os cabeçalhos “No.”, “Name” e “Company”, seguidos de James Clerk / Netflix e Adam White / Microsoft. Esses rótulos e nomes permanecem em inglês no exemplo. Se a tabela não aparecer, confira o ID do contêiner e o momento em que o script é executado. Para valores de texto simples, continue usando textContent em vez de atribuir dados a innerHTML.