HTML Concepts: Indicators for Layout Tables
Published on September 13, 2021, filed under Web Development (RSS feed for all categories).
You use tables for data, and therefore not for layout purposes (as was popular in the past). But how would you recognize a layout table? That’s what we’re looking at today in “HTML Concepts.”
While it may be easy for you and me to tell when a table is used inappropriately, it’s a different story for a user agent. The HTML specification covers this problem in its section on the table
element.
First, the spec notes how in order to navigate a table, user agents “are encouraged to find heuristics to determine which tables actually contain data and which are merely being used for layout.”
Then it offers a few heuristics, but not without making clear that these are not precise, how they are merely “suggested as possible indicators.” Keep this in mind when looking at what are deemed technical indicators for layout tables:
Code Characteristic(s) | Interpretation |
---|---|
role attribute with a value of presentation |
Probably a layout table |
border attribute with a value of 0 (non-conforming) |
Probably a layout table |
cellspacing and cellpadding attributes with a value of 0 (non-conforming) |
Probably a layout table |
caption , thead , or th elements |
Probably a non-layout table |
headers and scope attributes |
Probably a non-layout table |
border attribute (non-conforming) with a value other than 0 |
Probably a non-layout table |
Visible borders set using CSS | Probably a non-layout table |
summary attribute |
Unclear, as “both layout and non-layout tables have historically been given this attribute” |
While we can tell by its contents whether a table is used for layout, these are ways to tell from the code. Fortunately, layout tables are largely a thing from the past, and for a modern web developer, knowledge of technical layout table indicators is of little practical value. But—now you know.
About Me
I’m Jens, and I’m an engineering lead and author. I’ve worked as a technical lead for companies like Google and as an engineering manager for companies like Miro, I’m close to W3C and WHATWG, and I write and review books for O’Reilly and Frontend Dogma.
With my current move to Spain, I’m open to a new remote frontend leadership position. Feel free to review and refer my CV or LinkedIn profile.
I love trying things, not only in web development, but also in other areas like philosophy. Here on meiert.com I share some of my views and experiences.
Read More
Maybe of interest to you, too:
- Next: Not Releasing Late on Fridays, a Matter of Courtesy
- Previous: 5 Eleventy Tweaks That Make My Sites Better (and Maybe Yours)
- More under Web Development
- More from 2021
- Most popular posts
Looking for a way to comment? Comments have been disabled, unfortunately.
Get a good look at web development? Try WebGlossary.info—and The Web Development Glossary 3K (2023). With explanations and definitions for thousands of terms of web development, web design, and related fields, building on Wikipedia as well as MDN Web Docs. Available at Apple Books, Kobo, Google Play Books, and Leanpub.