{"id":14254,"date":"2025-11-04T22:32:00","date_gmt":"2025-11-04T21:32:00","guid":{"rendered":"https:\/\/monodes.com\/predaelli\/?p=14254"},"modified":"2025-11-04T22:32:01","modified_gmt":"2025-11-04T21:32:01","slug":"abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api","status":"publish","type":"post","link":"https:\/\/monodes.com\/predaelli\/2025\/11\/04\/abandonware-of-the-web-do-you-know-that-there-is-an-html-tables-api\/","title":{"rendered":"Abandonware of the web: do you know that there is an HTML tables API?"},"content":{"rendered":"\n

Abandonware of the web: do you know that there is an HTML tables API?<\/a><\/h2>\n\n\n\n\n\n\n\n\n\n\n\n
\n

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<\/a> ? 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<\/a> to see how you can create a table from a nested array:<\/p>\n\n\n\n

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; }) });<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

You can then access each table cell with an index (with t being a reference to the table):<\/p>\n\n\n\n

console.log(t.rows[1].cells[1]); \/\/ => <td>five<\/td><\/em><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

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:<\/p>\n\n\n\n

t.insertRow(-1); t.rows[2].insertCell(0); t.rows[2].cells[0].innerText = ‘foo’;<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n

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

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\u2019d finally get the status as data structures and not a hack to layout content on the web.<\/p>\n<\/blockquote>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Abandonware of the web: do you know that there is an HTML tables API?<\/p>\n

Read more →<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"federated","footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[72,50,46],"tags":[],"class_list":["post-14254","post","type-post","status-publish","format-standard","hentry","category-documentations","category-javascript","category-web"],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"jetpack_shortlink":"https:\/\/wp.me\/p6daft-3HU","jetpack-related-posts":[{"id":12034,"url":"https:\/\/monodes.com\/predaelli\/2024\/11\/13\/12034\/","url_meta":{"origin":14254,"position":0},"title":"Underscore is a JavaScript library\u2026","author":"Paolo Redaelli","date":"2024-11-13","format":false,"excerpt":"Underscore is a JavaScript library that provides a whole mess of useful functional programming helpers without extending any built-in objects. It\u2019s the answer to the question: \u201cIf I sit down in front of a blank HTML page, and want to start being productive immediately, what do I need?\u201d \u2026 and\u2026","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":3778,"url":"https:\/\/monodes.com\/predaelli\/2018\/02\/10\/3778\/","url_meta":{"origin":14254,"position":1},"title":"OpenSC2K","author":"Paolo Redaelli","date":"2018-02-10","format":false,"excerpt":"OpenSC2K OpenSC2K - An Open Source remake of SimCity 2000 written in JavaScript using HTML5 Canvas API, SQLite and built on Electron.","rel":"","context":"In "Fun"","block_context":{"text":"Fun","link":"https:\/\/monodes.com\/predaelli\/category\/fun\/"},"img":{"alt_text":"","src":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2018\/02\/OpenSC2K.png?resize=350%2C200&ssl=1","width":350,"height":200,"srcset":"https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2018\/02\/OpenSC2K.png?resize=350%2C200&ssl=1 1x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2018\/02\/OpenSC2K.png?resize=525%2C300&ssl=1 1.5x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2018\/02\/OpenSC2K.png?resize=700%2C400&ssl=1 2x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2018\/02\/OpenSC2K.png?resize=1050%2C600&ssl=1 3x, https:\/\/i0.wp.com\/monodes.com\/predaelli\/wp-content\/uploads\/sites\/4\/2018\/02\/OpenSC2K.png?resize=1400%2C800&ssl=1 4x"},"classes":[]},{"id":6263,"url":"https:\/\/monodes.com\/predaelli\/2019\/11\/18\/cell-editable-vue-table\/","url_meta":{"origin":14254,"position":2},"title":"cell-editable vue table","author":"Paolo Redaelli","date":"2019-11-18","format":false,"excerpt":"It seems time has come for me to learn Chinese or to heavily rely on translators: vue table \u7ec4\u4ef6 \u5f3a\u5927\u3001\u7075\u6d3b\uff0c\u652f\u6301 \u5355\u5143\u683c\u5408\u5e76\u3001\u5355\u5143\u683c\u7f16\u8f91\u3001\u591a\u8868\u5934\u56fa\u5b9a\u3001\u591a\u5217\u56fa\u5b9a\u3001\u5217\u62d6\u52a8\u3001\u6392\u5e8f\u3001\u81ea\u5b9a\u4e49\u5217\u3001\u5206\u9875\u3001\u5355\u5143\u683c\u7f16\u8f91\u3001\u5168\u9009\u3001\u884c\u5c55\u5f00\u3001\u6761\u4ef6\u8fc7\u6ee4\u3001footer \u6c47\u603b\u3001\u5bfc\u51faexcel\u3001\u6c47\u603b Vue2.x flexible table components, support for cell edit,multi-head fixed, multi-column fixed, clumn drag, sort, custom column,Cell Editing, Support cell merge (colSpan and rowSpan),Support checkbox selection Source: vue table\u2026","rel":"","context":"In "Javascript"","block_context":{"text":"Javascript","link":"https:\/\/monodes.com\/predaelli\/category\/javascript\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":8217,"url":"https:\/\/monodes.com\/predaelli\/2021\/03\/01\/a-table-with-both-a-sticky-header-and-a-sticky-first-column\/","url_meta":{"origin":14254,"position":3},"title":"A table with both a sticky header and a sticky first column","author":"Paolo Redaelli","date":"2021-03-01","format":"link","excerpt":"https:\/\/css-tricks.com\/a-table-with-both-a-sticky-header-and-a-sticky-first-column\/","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":11412,"url":"https:\/\/monodes.com\/predaelli\/2024\/03\/05\/css-for-printing-to-paper\/","url_meta":{"origin":14254,"position":4},"title":"CSS for printing to paper","author":"Paolo Redaelli","date":"2024-03-05","format":false,"excerpt":"CSS for printing to paper I do like articles explaining how to use CSS for printing! CSS for printing to paper Introduction Sample files @page @media print Width, height, margin, and padding Element positioning Multi-page documents with repeating elements Portrait \/ Landscape mode Data source Essentials cheatsheet Introduction At work,\u2026","rel":"","context":"In "HTML"","block_context":{"text":"HTML","link":"https:\/\/monodes.com\/predaelli\/category\/html\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":988,"url":"https:\/\/monodes.com\/predaelli\/2016\/02\/02\/buildingsmart-house-of-bim\/","url_meta":{"origin":14254,"position":5},"title":"buildingSMART, house of BIM","author":"Paolo Redaelli","date":"2016-02-02","format":"link","excerpt":"buildingSMART, the house of BIM The worldwide authority driving transformation of the built\u00a0asset economy\u00a0through creation & adoption of open, international standards. The worldwide authority driving transformation of the built\u00a0asset economy\u00a0through creation & adoption of open, international standards. Shall get those standards to generate classes for Eiffel, as it seems that\u2026","rel":"","context":"In "Documentations"","block_context":{"text":"Documentations","link":"https:\/\/monodes.com\/predaelli\/category\/documentations\/"},"img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]}],"jetpack_likes_enabled":true,"_links":{"self":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/14254","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/comments?post=14254"}],"version-history":[{"count":1,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/14254\/revisions"}],"predecessor-version":[{"id":14257,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/posts\/14254\/revisions\/14257"}],"wp:attachment":[{"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/media?parent=14254"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/categories?post=14254"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/monodes.com\/predaelli\/wp-json\/wp\/v2\/tags?post=14254"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}