Get help on Discord

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

12 replies
Last updated: Dec 6, 2022
HTML wise how would y'all mark this up? Would you use a 
<table />
or a `&lt;ul /&gt;`&gt;
AI Update

Hey there! This question seems to be about general HTML markup practices rather than anything specific to Sanity. This community focuses on Sanity.io - the composable content cloud platform - so questions about content modeling, GROQ queries, Studio customization, API usage, and other Sanity-specific topics.

For general HTML and web development questions like choosing between <table> and <ul> elements, you'd get better help in communities like:

  • Stack Overflow
  • r/webdev on Reddit
  • Frontend development Discord servers
  • HTML/CSS specific forums

If you have a Sanity-related question though - like how to structure a schema for tabular data, how to render Portable Text content, or how to query and display list-based content from your Content Lake - feel free to ask! We're here to help with anything Sanity-related.

Show original thread
12 replies
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
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.

Sanity – 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.

Get started for freeExplore the demo

Was this answer helpful?