2 Practical Uses for HTML Tables on Websites

Jul 27

Tables are a timeless layout used to organize often complicated data in a more digestible way, but sometimes it can be difficult to know if a set of data should or shouldn’t be displayed in a table. In this article, we’ll learn about 2 practical and very common uses for tables.

The two most common and practical uses for tables are data tables for organizing detailed data into rows and columns and comparison tables for displaying similarities and differences between items, products or services.

1. Data Tables

What is a data table?

Data tables consist of a series of columns and rows that intersect in cells, plus a header row at the top in which the names of the columns are stated, to make the content of the table more comprehensive. They give users the ability to view large and/or detailed data with little cognitive load.

When to use a data table on your website

You should use a data table when you need users to understand detailed and/or large patterns of data that cannot be easily explained using plain text.

Data tables can be used in all sorts of scenarios, including but not limited to sizing guides for clothing items, the amount of food to feed different-sized dogs, the enrollment numbers for each major in a university, or the density of different substances.

Examples of data tables on websites

SavageXFenty sizing guide data table — Macy’s uses a data table to display a sizing guide for their clothing items.

Purina dog feeding table — Purina uses a data table to display the correct feeding amounts for different-sized dogs.

Data table showing sugar cookie serving amounts — CookForFolks uses a data table to display the amount of sugar cookies to make for different sized crowds.

2. Comparison Tables

What is a comparison table?

A comparison table is a tool used to compare a small number of different items or services in the columns, based on the attributes being compared in the row headers. The table data includes an indicator icon or text that signifies if the attribute is included in a corresponding offering. Comparison tables that are well-designed have proven to be the superior method for comparing products, plans, services, locations, and a multitude of other things, but even still, a comparison table is better suited for certain scenarios than others.

When to use a comparison table on your website

Comparison tables can work for a lot of different scenarios, but generally, comparison tables are optimal when you want users to compare no more than 5 offerings, and/or you want users to way the pros and cons of items in a comprehensive way. If you want to learn more about the reasoning behind these two scenarios, you might enjoy my article When to Use a Product Comparison Table on Your Website.

How to create a comparison table

Because of their irregularity, responsive comparison tables can be difficult to construct using HTML and CSS, but if you are a developer and are comfortable dealing with code, you can learn how to create a responsive and web-accessible comparison table by reading my article How to Create a Responsive Product Comparison Table with HTML & CSS. If you are not a developer, or maybe you are a developer and just don’t want to deal with the grimy details of comparison table code, you might enjoy using the Comparison Table Generator, which allows anyone to create a comparison table without having to write any code.