Use Case Tutorial: When to use a table instead of a div

Anne clarifies when to use what, table or div? And did you know we have a Tables Block so you can dynamically display table data?

A pen rests on top of a stylized table grid with the HTML tag prominently displayed in bold white text, symbolizing the structure of tabular data in web development.

Portrait of Anne-Mieke Bovelett, a woman wearing long blonde dreads in a ponytail, big rounded silver rimmed glasses, a black shirt, with a subtle smirk on her face.

Anne-Mieke Bovelett /

09.09.2024


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.


Portrait of Anne-Mieke Bovelett, a woman wearing long blonde dreads in a ponytail, big rounded silver rimmed glasses, a black shirt, with a subtle smirk on her face.

By Anne-Mieke Bovelett

Besides being an avid accessibility advocate, web designer and public speaker, Anne-Mieke Bovelett is a passionate copywriter. She’s a well-known member of the WordPress community and can regularly be found at WordCamps and meetups all over the world.

Recent in Learn

What To Do, When Your WordPress Site Got Hacked

Read more

greyd sustainable websites blog

10 Tips for Sustainable Websites

Read more

Scaling Content Operations (with WordPress)

Read more

an old pc showing a futuristic wordpress logo

Let’s talk about the Future of WordPress

Read more

Using WordPress for a Digital Experience Platform

Read more