TablesLesson 163Free preview

Comparison Table

This lesson is part of How To · All levels

Summary

This lesson discusses comparison tables to compare several product or package options. Columns usually represent options, whereas rows contain comparative features. A good design highlights flagship columns, keeps the header legible, and provides a horizontal scroll on a narrow screen.

Key points

Use semantic tables with clear captions, thead, and th scope
Mark the recommendation column with a special class, not just a random color
Freeze the feature column using position: sticky to keep it visible when rotated
Prepare overflow-x wrappers for the narrow screen

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.