Discussion on how to mark up tabular data for accessibility and responsiveness

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

<table />

or a `<ul />`>

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 <table>, 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

This is how it looks on mobile

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

Gotcha, 🤔 now I just gotta figure out how to use tailwind for all this 😅

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

Yeah I was looking at the actual page and I noticed they use

grid-template-areas

and some custom

grid-template-columns

😅 last I checked Tailwind doesn't allow

grid-template-areas

, at least built in

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: https://miro.medium.com/max/720/1*WM6Gy53YMJ0WE-Xd9ebTCg.gif (originally covered here under "transformed" )

Getting there 😅 the mobile view could use some work...

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.