Let’s end the confusion about when to use a real HTML table (as in semantic) and when divs and columns can do the job.
The distinction to make
It’s essential to understand, both for developers and users who create pages and posts which contain information whether it’s truly tabular data on display, or not.
For developers (technical)
A <table> should be used when the data you are presenting is inherently tabular, like a spreadsheet or structured grid of information where there is a clear relationship between rows and columns. For example, if you’re showing a list of products with attributes like price, stock status, and ratings, this is perfect for a table because each row represents a different product, and each column represents specific attributes.
I know I may come across as Captain Obvious here, but I will say this out loud: A <div> is a digital chameleon. It can be made to look like many things, but it still is a generic block-level element primarily used for layout and structuring content. It doesn’t convey any semantic meaning, so it’s unsuitable for representing tabular data. While you might use it to build sections, headers, or other layout components, attempting to mimic table structures using <div> elements can break accessibility. This approach hinders screen readers and other assistive technologies, as they rely on semantic HTML to accurately interpret relationships between data.
For Content Creators (non-technical)
Think of a <table> like an actual table you might see at a restaurant. Each row is a customer, and each column might list things like their order or the time they arrived. Tables are perfect for information that needs to be structured in rows and columns, where each item is clearly related to another.
A <div>, however, is more like a box you can use to organize or group items on a webpage. It’s like putting things in different boxes in your room to make it neat—it helps with organization, but it doesn’t imply that the things in one box relate to the things in another box, like a table would. If you try to make a table out of boxes (or divs), it will look like a table, but it won’t function properly when someone who is visually impaired is using special software to navigate the page.
When to use a table:
Use a table when you have data that needs to be structured in rows and columns, like comparing products, financial figures, or schedules.
When to use a div:
Use a <div> when you’re organizing content that doesn’t have a clear row-and-column relationship, like paragraphs of text, images, or other elements for layout purposes.
In short: tables for data, divs for layout. Using the wrong one can make your site harder for everyone to use, especially for people using screen readers.
Displaying data in a table in Greyd.Suite
The Suite offers a Table Block, which is a variant of the Post Overview and allows you to display post content in table form. Here’s a tutorial about how to use that Table Block.
A great podcast episode about tables and accessibility
There’s a wonderful podcast called Accessibility Craft. It’s a combination of some light-hearted banter at the start about craft drinks, before the serious and always educational talk begins about an aspect of accessibility. They have a magnificent episode about tables. It does get a bit technical here and there, but there’s a lot of context for less tech-savvy content creators.
In this episode the craft part ends at 10:15 and from there they talk about the tables.
Would you like to see how Greyd.Suite works?
