Tables are ideal for displaying information that doesn’t require a lot of words. Although tables are somewhat responsive on mobile, users may miss information if the table is too wide, which requires scrolling to the side.
Use a table if you have limited text and your information is best displayed in chart or table form.
Do not use a table if you have a significant amount of text that will be hard for users to read on mobile.
Do not use a table to layout a page.
Tip: Always check how the table looks on a mobile device. If it requires horizontal scrolling, choose a different design element.
Table Example
| Header 1, Cell 1 | Header 1, Cell 2 |
|---|---|
| Row 1, Cell 1 | Row 1, Cell 2 |
| Row 2, Cell 1 | Row 2, Cell 2 |
| Row 3, Cell 1 | Row 3, Cell 2 |