https://christianheilmann.com/2025/10/08/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api/

Skip to content
Christian Heilmann
Search the archives: [                    ]
Abandonware of the web: do you know that there is an HTML tables API?

Wednesday, October 8th, 2025 at 3:08 pm

The demo code further down as an image

When people turn data into HTML tables using JavaScript, they either
use the DOM methods (createElement() and the likes), but most of the
time just append a huge string and use innerHTML, which always is a
security concern. However, did you know that HTML tables also have an
old, forgotten API ? Using this one, you can loop over tables, create
bodies, rows, cells, heads, footers, captions an summaries (yes, HTML
tables have all of those) and access the table cells. Without having
to re-render the whole table on each change. Check out the Codepen to
see how you can create a table from a nested array:

let table = [
  ['one','two','three'],
  ['four','five','six']
];
let b = document.body;
let t = document.createElement('table');
b.appendChild(t);
table.forEach((row,ri) => {
  let r = t.insertRow(ri);
  row.forEach((l,i) => {
    let c = r.insertCell(i);
    c.innerText = l;
  })
});

let table = [ ['one','two','three'], ['four','five','six'] ]; let b =
document.body; let t = document.createElement('table'); b.appendChild
(t); table.forEach((row,ri) => { let r = t.insertRow(ri); row.forEach
((l,i) => { let c = r.insertCell(i); c.innerText = l; }) });

You can then access each table cell with an index (with t being a
reference to the table):

console.log(t.rows[1].cells[1]);
// => <td>five</td>

console.log(t.rows[1].cells[1]); // => <td>five</td>

You can also delete and create cells and rows, if you want to add a
row to the end of the table with a cell, all you need to do is:

t.insertRow(-1);
t.rows[2].insertCell(0);
t.rows[2].cells[0].innerText = 'foo';

t.insertRow(-1); t.rows[2].insertCell(0); t.rows[2].cells
[0].innerText = 'foo';

There are a few things here that are odd - adding a -1 to add a row
at the end for example - and there seems to be no way to create a TH
element instead of a TD. All table cells are just cells.

However, seeing how much of a pain it is to create tables, it would
be fun to re-visit this API and add more functionality to it. We did
add a lot of things to HTML forms, like formData and the change
event, so why not add events and other features to tables. That way
they'd finally get the status as data structures and not a hack to
layout content on the web.

Share on Mastodon (needs instance)

Share on BlueSky

Newsletter

Check out the Dev Digest Newsletter I write every week for
WeAreDevelopers. Latest issues:

160: Graphs and RAGs explained and VS Code extension hacks Graphs and
RAG explained, how AI is reshaping UI and work, how to efficiently
use Cursor, VS Code extensions security issues. 159: AI pipelines,
10x faster TypeScript, How to interview How to use LLMs to help you
write code and how much electricity does that use? Is your API
secure? 10x faster TypeScript thanks to Go! 158: [?] Super Mario AI 
API keys in LLMs  Vibe Coding Why is AI playing Super Mario? How is
hallucinating the least of our worries and what are rules for
developing Safety Critical Code? 157: CUDA in Python, Gemini Code
Assist and back-dooring LLMs We met with a CUDA expert from NVIDIA
about the future of hardware, we look at how AI fails and how to play
pong on 140 browser tabs. 156: Enterprise dead, all about Bluesky and
React moves on! Learn about Bluesky as a platform, how to build a
React App and how to speed up SQL. And play an impossible game in the
browser.

My other work:

  * The Developer Advocacy Handbook
      + Buy it on Amazon
      + Buy it on Leanpub
  * Skillshare Classes:
      + Tools and Tips to Optimize Your Workflow as a Developer
      + Tools for Improving Product Accessibility
      + The JavaScript Toolkit: Write Cleaner, Faster & Better Code
      + Demystifying Artificial Intelligence: Understanding Machine
        Learning

Skip to search

  * Christian Heilmann Avatar
  * About this
  * Archives

  *  
  *  
  *  
  *  
  *  


Christian Heilmann is the blog of Christian Heilmann
chris@christianheilmann.com (Please do not contact me about guest
posts, I don't do those!) a Principal Program Manager living and
working in Berlin, Germany.

Theme by Chris Heilmann. SVG Icons by Dan Klammer . Hosted by
MediaTemple. Powered by Coffee and Spotify Radio.

Get the feed, all the cool kids use RSS!