- How to fit a wide data table on mobile screens without losing its purpose and readability?
- How should data table be aligned?
- What some alternative ways to present tabular data instead of the standard table in the UI?
How to fit a wide data table on mobile screens without losing its purpose and readability?
Use Smaller Type
Using smaller text should actually make tables more readable because it provides enough room for the content to fit well. Many try to get as much content into a table as possible, but if you use large text, you'll have to take that space from margins and padding, which would reduce readability.
How should data table be aligned?
Generally, you should align text left and numbers right. This way it's easier to differentiate between the two and numbers are easier to compare. In addition to that, you should align the table headers according to their column data as that makes your table more structural.
What some alternative ways to present tabular data instead of the standard table in the UI?
In nutshell, it follows the principle of 'Less is more' by removing colors, removing grid lines, aligning items based their types (Numbers or String) etc. Also another method would be to use graphical elements like Pie Charts, graph bars etc.