Grid semantics examples
This page contains supplementary examples for the Grids part 2: Semantics blog post.
Basic table
A palette cleanser and example of a normal table using normal table elements.
| Species | Number | Type |
|---|---|---|
| Sea Otter | 3 | Mammal |
| River Otter | 2 | Mammal |
| Harbor Seal | 3 | Mammal |
Example 1: non-table nodes
Species
Number
Sea Otter
3
River Otter
2
Harbor Seal
3
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.
Species
Number
Sea Otter
3
River Otter
2
Harbor Seal
3
Multi-column header example
Animal
Tracking
Species
Type
Number
Location
Sea Otter
Mammal
3
Main level
River Otter
Mammal
2
Pier 60
Harbor Seal
Mammal
3
Main level
Example 2: out-of-order rows
Animal type
Number
River Otter
2
Sea Otter
3
Harbor Seal
3
There is no "fixed" version of this table, since the only fix is to re-order the HTML.