Christian Heilmann

You are currently browsing the Christian Heilmann blog archives for October, 2025.

Archive for October, 2025

Abandonware of the web: do you know that there is an HTML tables API?

Wednesday, October 8th, 2025

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;  
  })
});

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>

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';

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.

Call for Papers is open for the WeAreDevelopers Berlin and San Jose events 2026 – here’s what we’re looking for…

Wednesday, October 1st, 2025

Red rubber ducky with a megaphone stating call for papers

Alright folks, the call for papers is open for two of the WeAreDevelopers events 2026, so if you want to speak at any of them, activate the following links and enter your details and the ones of your session(s):

Here are some points on how to write a talk description that will be likely to be picked by us:

  • Talk titles we pick tell something about the topic – not just be open question clickbait
  • Good talks tell stories and describe experiences that can be repeated – not just show a solution
  • Great talks offer technology in context: “Intro to X” is good, “how we used X to achieve Y” is much better
  • Talks that are based on research are excellent, don’t just show a solution, share the journey how you got there
  • If you use ChatGPT to create your talk title and description, we invite ChatGPT and not you.
  • Avoid clichés: we had enough “from zero to hero” and “everything you know about x is wrong”
  • Describe your talk in the description, don’t describe the current landscape. “In the fast paced world of…” is a tired ChatGPT cliché.
  • Answer the WIIFM (What is in it for me) for the audience, explain what people will get away with
  • It is OK to recycle talks, it is not OK to bombard us with your backlog. Submit 2-3 talks, not your portfolio
  • Most talks are half an hour – try to focus on one topic and deliver this with context
  • Hands-on talks are great – a good code recording that works is better than live code that fails
  • Speak about what excites you – not what you think the market needs you to cover right now
  • Make it your talk – not a sales pitch for your product or service

Looking forward to your submissions!