Tables

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.

Examples

Standard table

Table with borders

<h3 data-ce-tag="paragraph" class="stk-reset stk-theme_00000__style_medium_header">Height of seedlings for germinated seeds</h3>
<table data-responsive-type="cards" class="stk-snippets-table stk-reset stk-table--bordered_hv">
  <colgroup>
    <col class="stk-reset" data-stk-id="1284" data-stk-css="stkxBdzx">
    <col class="stk-reset" data-stk-id="1285">
    <col class="stk-reset" data-stk-id="1286">
    <col class="stk-reset" data-stk-id="1287">
    <col class="stk-reset" data-stk-id="1288">
    <col class="stk-reset" data-stk-id="1289">
  </colgroup>
  <thead class="stk-reset">
  <tr class="stk-reset">
    <th data-cell-header="Height of seedlings for germinated seeds" class="stk-reset stk-table-cell stk-theme_00000__style_small_text"><span class="stk-reset">Water Type</span></th>
    <th class="stk-reset stk-table-cell stk-theme_00000__style_small_text">Trial</th>
    <th class="stk-reset stk-table-cell stk-theme_00000__style_small_text">Trial average of seedling height / mm +/- 0.5mm</th>
    <th class="stk-reset stk-table-cell stk-theme_00000__style_small_text">Trial Standard  Deviation</th>
    <th class="stk-reset stk-table-cell stk-theme_00000__style_small_text">Overall average  height / mm<br>+/- 0.5mm</th>
    <th class="stk-reset stk-table-cell stk-theme_00000__style_small_text">Overall standard deviation</th>
  </tr>
  </thead>
  <tbody class="stk-reset">
  <tr class="stk-reset">
    <td data-cell-header="Height of seedlings for germinated seeds" class="stk-reset stk-table-cell stk-theme_00000__style_small_header"><span class="stk-reset">DE-IONIZED</span></td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">1</td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">13.0</td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">13.4</td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">23.4</td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">13.6</td>
  </tr>
  <tr class="stk-reset">
    <td data-cell-header="Height of seedlings for germinated seeds" class="stk-reset stk-table-cell stk-theme_00000__style_small_header"><span class="stk-reset">SMOKED</span></td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">2</td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">61.0</td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">22.44</td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">59.5</td>
    <td class="stk-reset stk-table-cell stk-theme_00000__style_small_header align-center">12.4</td>
  </tr>
  </tbody>
</table>
<p class="stk-reset"></p>

<style data-stk-css="stkxBdzx" media="all">
  [data-stk-css="stkxBdzx"]:not(#stk):not(#stk):not(style) {
    width: 20%
  }
</style>

.stk-snippets-table {
  border: 1px solid black;
}

.stk-snippets-table .stk-table-cell::after {
  border: 1px solid black;
}

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.

Content Experience Impact

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.

Dos

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'ts

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.

Learn More

Comparison Tables for Products, Services, and Features Nielsen Norman Group

The Ultimate Guide to Designing Data Tables Design with Figma

Extra Inspiration

PreviousData Highlights NextTips

Last updated 4 years ago

Was this helpful?