New Tutorial Offers Help With Building Well-Designed Web Tables

A silent video tutorial uploaded by Darkhorse Analytics demonstrates how the common adage "Less is More" holds quite true when designing web tables meant to be visually grasped by audiences at a glance. Assuming the table in question is posted on a white background on either a web page or a printed document, there are many stylistic elements that might seem helpful enough in giving the table a sense of structure and orderliness that all of them should be included by default. Surprisingly, the video shows that virtually none of the value this dense styling might have in preventing issues like unclear row alignment is lost when a more minimalist design is pursued.

Web tables, such as the column-oriented one shown in the demonstration, do not need to be enclosed in borders to be perfectly legible. The table in the video comprises six named columns, the former three of which consist of words and the latter three of which contain only numerical data. To help distinguish these two groups of columns from each other, the contents of each group's columns are aligned differently, and the column titles above are aligned accordingly. The left-most column's contents initially consist of the same "roles" repeated for the sake of contextualizing swaths of rows as collectively associated with individual roles. The demonstration only has a given role entered once, opting instead to have an extra gap vertically separating each role's corresponding swath of rows to make it clear which group is associated with which role.

The video demonstration does not necessarily offer the best possible method of styling web tables for all websites, and some projects may find it important to have more of an indicator separating each row from its neighbors. Early in the video, the removal of the gridlines arguably makes the table easier to look at, but the different background shades still in between each row nonetheless makes it clear that the rows' contents are separate. Some designers may end up creating tables much like what the video ends up with while retaining a subtler version of the alternating row colors. For more information click here http://i.imgur.com/ZY8dKpA.gifv.