 – Build the way you think, not the way your CMS thinks

Sanity is the developer-first content operating system that gives you complete control. Schema-as-code, GROQ queries, and real-time APIs mean no more workarounds or waiting for deployments. Free to start, scale as you grow.

How to mark up a list or table structure in HTML?

HTML wise how would y'all mark this up? Would you use a 

Looks like tabular data, but then you have those update-parts that spans the whole row, and as such would probably use a row of itself, and thus break the table (e.g. for screen readers).

My guess is to use &lt;table&gt;, but make sure to describe the tr- and td-elements (the latter using rowspan) containing the update with a ARIA role that differs it from the rest of the table. But don't know exactly how that would be done.

It would be interesting to see what the layout is for mobile and other variants as working with tables responsively can be really painful

With the advancements with css grid and flex support table may only suit large screens etc, so wouldn’t rule out a list tbh

Yeah, this makes it function more as a list. Tables and small screens are notoriously hard. It seems like you're hiding the head columns as well on smaller screens? If so, I would mark it as a list, and then display/hide using media query. You probably also want to use ARIA roles for accessibility, check out 

https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/Table_Role

thinking_face

 now I just gotta figure out how to use tailwind for all this 

sweat_smile

Check out the section on responsive design, should be helpful. Also the section on Screen Readers wrt allowing you to hide head columns for non-screen readers on smaller screens

If it's helpful, I had to do a big convoluted table and collapsing each row into its own card, where the former headers get represented on  each row, which itself becomes stacked, can have some advantages. Not as interesting and designy but it's an option: 

But for just throwing something together quickly... Not too bad

If the idea of the table is a transfer between schools, you might be able to get away with a double arrow between the school logos and not even have to keep the squishy header labels. You can always have a key/legend explain the icon use. But I think people might catch on pretty quickly especially if they keep using the site.

How to mark up a list or table structure in HTML?

Sanity – Build the way you think, not the way your CMS thinks

Was this answer helpful?