Yes, we all hate working with them, but tables are often still the best way to present information about complex products on your website . This article explores some guidelines when working with coded tables.
Fixed Header
If your user has to scroll on a table, keep your headers fixed to the top of the table so they can follow along within the rows and columns.
Plain Font Style & Distinct Row Style
Keep your tables font styles simple to maintain optimum legibility. Small row effects like alternating white and light gray can help add row clarity as well.
Hover Actions
Rather than having a lot of icons for actions like downloading a row, keep the action hidden behind a hover for interface simplicity.
Horizontal Scroll
As your table responds, rather than trying to shrink the width of the table, utilize a horizontal scroll so users can still access all the data but can consume it more easily.
Pagination
If your table has hundreds of row, utilize pagination so that users can control how many rows they wish to see at a time.
Flexible Column Widths
For added user experience, let users change their own column widths so they can hide information that is less important to them.
Basic Filtering & Sorting
Having basic filtering and sorting within a table can go a long way. For example, a football roster could be sorted alphabetically, numerically, or by position.
