Grid semantics examples
This page contains supplementary examples for the Grids part 2: Semantics blog post.
A palette cleanser and example of a normal table using normal table elements.
Example 1: non-table nodes
Example 1, fixed
Note: there are obviously better ways to fix this table code, e.g. by rewriting it with
<table> elements, or at minimum just removing the extra
<section> element. This is just an exercise in repairing the table's semantics with as few HTML changes as possible.
Multi-column header example
Example 2: out-of-order rows
There is no "fixed" version of this table, since the only fix is to re-order the HTML.