Components
Table
Displays tabular data. Basic tables with row and column headers, and optional captions and footers.
Full support Supported since v125. Full support Supported since v128. Full support Supported since v18.
Variants
Default
Toggle between different padding densities for the table using the controls below.
| Band | Name | Instrument |
|---|---|---|
| Radiohead | Ed O'Brien | Guitar/Vocals |
| Korn | Jonathan Davis | Vocals |
| Broken Bells | James Mercer | Vocals/Guitar |
| Pink Floyd | David Gilmour | Guitar/Vocals |
| All great bands! | ||
<table> <caption>Band Members</caption> <thead> <tr> <th>Band</th> <th>Name</th> <th>Instrument</th> </tr> </thead> <tbody> <tr> <td>Radiohead</td> <td>Ed O'Brien</td> <td>Guitar/Vocals</td> </tr> <tr> <td>Korn</td> <td>Jonathan Davis</td> <td>Vocals</td> </tr> <tr> <td>Broken Bells</td> <td>James Mercer</td> <td>Vocals/Guitar</td> </tr> <tr> <td>Pink Floyd</td> <td>David Gilmour</td> <td>Guitar/Vocals</td> </tr> </tbody> <tfoot> <tr> <td colspan="3">All great bands!</td> </tr> </tfoot></table>Advanced
An advanced table showcasing the use of colgroup, rowspan, and colspan.
| Country | Major Cities | Nature | |||
|---|---|---|---|---|---|
| Capital | 2nd Largest | 3rd Largest | National Animal | National Bird | |
| Norway | Oslo | Bergen | Trondheim | Elk | White-throated Dipper |
| Sweden | Stockholm | Göteborg | Malmö | Elk | Common Blackbird |
| Denmark | København | Aarhus | Odense | Mute Swan | Mute Swan |
| Finland | Helsinki | Espoo | Tampere | Brown Bear | Whooper Swan |
| Iceland | Reykjavík | Kópavogur | Hafnarfjörður | Gyrfalcon | Gyrfalcon |
| Scandinavia != The Nordics | |||||
<table> <caption> Nordic Countries Overview </caption> <colgroup> <col /> <col /> <col /> </colgroup> <thead> <tr> <th rowspan="2">Country</th> <th colspan="3">Major Cities</th> <th colspan="2">Nature</th> </tr> <tr> <th>Capital</th> <th>2nd Largest</th> <th>3rd Largest</th> <th>National Animal</th> <th>National Bird</th> </tr> </thead> <tbody> <tr> <td>Norway</td> <td>Oslo</td> <td>Bergen</td> <td>Trondheim</td> <td>Elk</td> <td>White-throated Dipper</td> </tr> <tr> <td>Sweden</td> <td>Stockholm</td> <td>Göteborg</td> <td>Malmö</td> <td>Elk</td> <td>Common Blackbird</td> </tr> <tr> <td>Denmark</td> <td>København</td> <td>Aarhus</td> <td>Odense</td> <td>Mute Swan</td> <td>Mute Swan</td> </tr> <tr> <td>Finland</td> <td>Helsinki</td> <td>Espoo</td> <td>Tampere</td> <td>Brown Bear</td> <td>Whooper Swan</td> </tr> <tr> <td>Iceland</td> <td>Reykjavík</td> <td>Kópavogur</td> <td>Hafnarfjörður</td> <td>Gyrfalcon</td> <td>Gyrfalcon</td> </tr> </tbody> <tfoot> <tr> <td colspan="6">Scandinavia != The Nordics</td> </tr> </tfoot></table>API
| Type | Modifiers | Default | Description |
|---|---|---|---|
| Dense | .dense | - | When applied the table will appear denser. |
| Spacious | .spacious | - | When applied the table will appear more spacious. |
Browser support
Full support Supported since v125. Full support Supported since v128. Full support Supported since v18.
See also the full browser support guide.