Semantic HTML Comparison Tables
A native table with proper header cells and body rows, comparing several products or options across the dimensions that matter.
Analogy Mental model
The specification sheet at a car dealership. Nobody reads ten pages about styling when a single table lines up power, fuel use, wheelbase, and price.
In practice What you actually do
Tables are the single most reliably extracted format across every engine, so every comparison, review, and pricing page should carry one in the first two screens. Header cells must name attributes precisely: tool, best for, entry price, key differentiator, rating.
Where people get burned Pitfalls
An image of a table is invisible, and a grid of nested containers pretending to be a table loses its row and column relationships. Only real table markup preserves the pairing of value and attribute.
This entry was written in English from the Chinese original, not machine-translated. Read the Chinese version →