Every data table is comprised of one or more headers, rows, columns, cells and the occasional footer.

Cell size is informed by content size. Consider view density and the amount of content when choosing between the four available options.

In some cases, like a very dense and/or long table, use styling to break up the content and make things more digestible.

While the data itself is static, the table can be manipulated to make consumption a little easier.

Uniform data tables should only be used on desktops. Instead, when designing for mobile use the table view to accurately display information if it makes sense. Data tables will be displayed in single-column views, so in cases when it is important to display more than one column of information at a time, consider designing a separate view with the information in a different presentation, like a list.

Data table content should never be centered. For all names, titles and other text, align left. Numbers stay on the right.

Centered content becomes more difficult to scan as the table becomes more dense. Give the user a line, however (in)visible, to track alongside.

Don'tcenter the content in every cell, regardless of table size.

Doalign left or right depending on content type.

It's important for accessibility purposes that we always include a title that describes the content of the table. It is okay to use a different text element, rather than the table title component in Figma, as long as the developer knows to connect that element to the table using aria-describedby.

Don'tuse a data table without a title or caption.

Doadd concise titles to describe the data table content.

Numbers and text may be linked to connect content within Hudl, like a video, playlist or highlight. Use any type except button.

Just don’t go too crazy with linked content. Wherever you take the user should tie directly to the table they’re studying. Don’t totally change context with the option to check a tutorial or contact support.

Don'tlink to several external sources and interrupt the experience.

Dolink to any Hudl content feeding that specific table.

Bold text is reserved for headers, nothing in the cells. Aside from that, you shouldn’t have to format the text at all. Too many different styles and the whole table becomes illegible.

Don'tmix formats in an effort to call out key information.

Dofeature data that exists well on its own.

Wrapping may happen, but never force a line break. Stick to the microcopy guidelines below and you should be safe with a single line.

Don'tuse line breaks to put tons of content in a single cell.

Dokeep things brief to avoid natural breaks.

Should your table include selectable content, the select mark will indicate the user may take action on multiple items.

Selectable content is the only time a hover state should be applied to the data table.

Like other UI labels, table headers should adhere to title case, no complete sentences and definitely no punctuation.

Abbreviations are encouraged in the case of a tight squeeze—again, no periods. Just stick to the first three letters of the word itself. If the full meaning is lost, use the three letters that makes things most clear.

Don'tget too detailed with what’s in the table.

Dokeep things tight and tidy.

Each cell should only contain one piece of data. Default to spelling things out, but if space becomes an issue, feel free to abbreviate.

Numbers should always be cardinal, no 1st, 2nd, etc. Use whole numbers whenever possible, and be sure to include % anytime it is a true percentage.

Display all phone numbers with hyphens to make the full string more legible.

Complete sentences should never appear as cell data.

If a null state appears because the user didn’t complete that information, leave the entire cell blank. It’s the clearest way to indicate nothing has been added.

Should a null state be the result of an incomplete calculation—numbers only—use a double hyphen. If the calculation would be a percentage, include that symbol, as well.

Don'tcreate a null state that could be confused for content.

Doprovide appropriate clues for what content belongs.

If the cell is simply not applicable to that user or their current workflow, opt for “n/a”.

Only use the number 0 for that actual sum.

See our full accessibility audit for more information about these results.