How to style table headers?

Question

Default styling in popular CSS framework such as Bootstrap styles headers with title case and bold text.

Question

• Is there any proof to sustains this choices as it makes the headers more salient than the content itself ?
• Would it be better to use lowercase and normal font weight ?

Answer 1

1. Headers serve a different purpose from content

This seems like an obvious statement, but it animates the reason why table headers are emphasized (title case, bold, colored, underlined, etc).

While the user ultimately needs to read the content of a table, the headers provide users with:

• A crucial entry point into the table (i.e. the starting point for visually processing the table contents).
• A summary of what data is contained in the table, before the user reads the cells.
• Orientation around where to find structured data in the table. Users don't always read every item in the table: a common micro-workflow is looking up data in a table...so the headers provide a clear orientation for users to perform that task.

---

2. Important content doesn't always need to be highlighted

Tables often contain dense data. That data may be very important (e.g. stock prices or medical records), but that doesn't mean it should be highlighted.

• With dense data, it's often better UX to provide harmony, order, and calmness in the data to assist the user in reading dense information.
• To illustrate the point, here is a table with bold headers and light content, and another with the fonts reversed. Most users will find the first table much easier to read than the second:

Answer 2

Headers are essentially metadata and you need some way to indicate that they are separate from your content, but related to it.

I would recommend against lowercase and normal weight text as it will make that row visually similar to the rest of the content.

Title case is the most common, though you might be able to use small caps or uppercase headers. However, these are often less aesthetically pleasing.

If you want something other than bold headers you can use any number of variations including color, alignment, images, borders, etc. as long as the header row is distinct from the content in some way.

The common usage of title case and bold text is a way to make the header row visually distinct with the least amount of visual clutter or interference.

There are many examples of ways to improve tables, but if you look at the ones on pages like http://uxmovement.com/content/9-design-techniques-for-user-friendly-tables/ they all have very obvious headers that are not easily confused for the content.