Tables

A table presents data as a scrolling, single-column list of rows that can be divided into sections or groups. Use a table to display large or small amounts of information cleanly and efficiently in the form of a list. Generally speaking, tables are ideal for text-based content, and often appear as a means of navigation on one side of a split view, with related content shown on the opposite side. See Split Views.

Apple TV Table layout

Scale tables for readability. Narrow tables can cause truncation and wrapping, making them hard to read and scan quickly at a distance. Wide tables can also be difficult to read and scan, and can take away space from content.

Begin showing table content quickly. Don’t wait for extensive table content to load before showing something. Fill onscreen rows with textual data immediately and show more complex data—such as images—as it becomes available. This technique gives people useful information right away and increases the perceived responsiveness of your app. In some cases, showing stale, older data may make sense until fresh, new data arrives.

Communicate progress as content loads. If a table’s data takes time to load, show a progress bar or spinning activity indicator to reassure people that your app is still running.

For developer guidance, see UITableViewController.

Table Cells

You can use standard table cell styles to define how content appears in table rows.

Default. An optional image on the left side of the row, followed by a left-aligned title. It’s a good option for displaying items that don’t require supplementary information. For developer guidance, see UITableViewCellStyleDefault.

Subtitle. A left-aligned title on one line and a left-aligned subtitle on the next. This style works well in a table where rows are visually similar. The additional subtitle helps distinguish rows from one another. For developer guidance, see UITableViewCellStyleSubtitle.

Value 1. A left-aligned title with a right-aligned subtitle in a lighter font on the same line. For developer guidance, see UITableViewCellStyleValue1.

Value 2. A right-aligned title, followed by a left-aligned subtitle in a lighter font on the same line. For developer guidance, see UITableViewCellStyleValue2.

All standard table cell styles also allow graphical elements, such as a checkmark or disclosure indicator. Of course, adding these elements decreases the space available for titles and subtitles.

Keep text succinct to avoid clipping. Truncated words and phrases are hard to scan and decipher. Text truncation is automatic in all table cell styles, but it can present more or less of a problem depending on which cell style you use and where truncation occurs.

Test the appearance of rows in a focused state. A table row becomes highlighted and enlarged when in focus. A row’s corners also become rounded, which can affect the appearance of images appearing on the left or right side of the row. Account for this effect appropriately when preparing images, and don’t add your own rounded corner masks.

Consider whether your table really needs to be editable. Deleting and reordering table rows takes longer on Apple TV than it does on iOS, so consider whether it’s worth providing this feature.

Design a custom table cell style for nonstandard table rows. Standard styles are great for use in a variety of common scenarios, but your content may require greater control. It’s better to create a custom table cell style than to significantly alter a standard one. To learn how to create your own cells, see Customizing Cells in Table View Programming Guide for iOS.

For developer guidance, see UITableViewCell.