Tables
Last updated
Last updated
Too often publishers resort to creating a table in a spreadsheet or word processor then including a screenshot of that in their post—which creates a poor user experience. By building tables directly into your posts, you can make sure the text is searchable and the table looks good on all devices.
Replace style id `stk-theme_00000` with yours before adding it to your Style Manager. For more info, please go to the Introduction page.
You can also adjust border width and color in the component CSS.
By building tables directly into your posts using components, you can ensure that the text is searchable (which wouldn’t be the case if you dropped in a screenshot of the table), which improves navigation by allowing the user to quickly search for the information they’re looking for on the page. Since all of Setka’s tools are completely responsive, this also ensures your table will look good on any device, whereas an image might be too small to read on mobile phones or otherwise not scale well.
Visually distinguish your column and row headers in some way, either giving them a different background color and/or using a bolded or slightly larger font.
Make sure your column and row headers are easily viewable by the reader as they scroll through your table, either “freezing” them so they stay visible at the top of the page as the reader scrolls or re-inserting them at regular intervals throughout the table so the user can see them no matter what view they’re in.
Make it easy to scan your rows and columns by ensuring they have obvious divisions between cells, whether that’s using a thick line as a divider or making each column a different color. For rows, you can also do this by alternating the background color.
Don’t feel like you have to include every bit of data or information in your table—that might overwhelm the reader. Be discerning and consider what they will care most about.
Don’t make a table that is so big and full of information that it doesn’t fit well on the page or has tiny text that’s hard to read. If you have so much information that you need more than about five columns, consider whether there’s a better way to represent that information, like with a data visualization or well-organized list block.
Comparison Tables for Products, Services, and Features Nielsen Norman Group
The Ultimate Guide to Designing Data Tables Design with Figma
