Tables
Styled table components with striped rows, borders, compact sizing, dark headers, hover states, and responsive wrapping.
Default Table
Default table
| Name | Location | Established |
|---|---|---|
| Yellowstone | Wyoming | 1872 |
| Yosemite | California | 1890 |
| Grand Canyon | Arizona | 1919 |
<table class="ug-table">
<thead>
<tr><th>Name</th><th>Location</th><th>Established</th></tr>
</thead>
<tbody>
<tr><td>Yellowstone</td><td>Wyoming</td><td>1872</td></tr>
<tr><td>Yosemite</td><td>California</td><td>1890</td></tr>
<tr><td>Grand Canyon</td><td>Arizona</td><td>1919</td></tr>
</tbody>
</table> Striped Table
Striped rows
| Name | Location | Established |
|---|---|---|
| Yellowstone | Wyoming | 1872 |
| Yosemite | California | 1890 |
| Grand Canyon | Arizona | 1919 |
| Zion | Utah | 1919 |
<table class="ug-table ug-table--striped">
<thead>
<tr><th>Name</th><th>Location</th><th>Established</th></tr>
</thead>
<tbody>
<tr><td>Yellowstone</td><td>Wyoming</td><td>1872</td></tr>
<tr><td>Yosemite</td><td>California</td><td>1890</td></tr>
<tr><td>Grand Canyon</td><td>Arizona</td><td>1919</td></tr>
<tr><td>Zion</td><td>Utah</td><td>1919</td></tr>
</tbody>
</table> Bordered Table
Bordered cells
| Name | Area (acres) | Visitors (M) |
|---|---|---|
| Great Smoky Mountains | 522,427 | 12.1 |
| Grand Canyon | 1,218,375 | 5.9 |
| Zion | 147,242 | 4.5 |
<table class="ug-table ug-table--bordered">
<thead>
<tr><th>Name</th><th>Area (acres)</th><th>Visitors (M)</th></tr>
</thead>
<tbody>
<tr><td>Great Smoky Mountains</td><td>522,427</td><td>12.1</td></tr>
<tr><td>Grand Canyon</td><td>1,218,375</td><td>5.9</td></tr>
<tr><td>Zion</td><td>147,242</td><td>4.5</td></tr>
</tbody>
</table> Compact Table
Compact sizing
| Code | Name | State |
|---|---|---|
| YELL | Yellowstone | WY |
| YOSE | Yosemite | CA |
| GRCA | Grand Canyon | AZ |
| ZION | Zion | UT |
| GLAC | Glacier | MT |
<table class="ug-table ug-table--compact">
<thead>
<tr><th>Code</th><th>Name</th><th>State</th></tr>
</thead>
<tbody>
<tr><td>YELL</td><td>Yellowstone</td><td>WY</td></tr>
<tr><td>YOSE</td><td>Yosemite</td><td>CA</td></tr>
<tr><td>GRCA</td><td>Grand Canyon</td><td>AZ</td></tr>
<tr><td>ZION</td><td>Zion</td><td>UT</td></tr>
<tr><td>GLAC</td><td>Glacier</td><td>MT</td></tr>
</tbody>
</table> Dark Header
Dark header variant
| Name | Type | Length |
|---|---|---|
| Bright Angel Trail | Out and back | 12 mi |
| Half Dome | Out and back | 14 mi |
| Angels Landing | Out and back | 5.4 mi |
<table class="ug-table ug-table--dark">
<thead>
<tr><th>Name</th><th>Type</th><th>Length</th></tr>
</thead>
<tbody>
<tr><td>Bright Angel Trail</td><td>Out and back</td><td>12 mi</td></tr>
<tr><td>Half Dome</td><td>Out and back</td><td>14 mi</td></tr>
<tr><td>Angels Landing</td><td>Out and back</td><td>5.4 mi</td></tr>
</tbody>
</table> Hover Table
Hover rows
| Name | Location | Elevation |
|---|---|---|
| Mount Rainier | Washington | 14,411 ft |
| Denali | Alaska | 20,310 ft |
| Mount Whitney | California | 14,505 ft |
<table class="ug-table ug-table--hover">
<thead>
<tr><th>Name</th><th>Location</th><th>Elevation</th></tr>
</thead>
<tbody>
<tr><td>Mount Rainier</td><td>Washington</td><td>14,411 ft</td></tr>
<tr><td>Denali</td><td>Alaska</td><td>20,310 ft</td></tr>
<tr><td>Mount Whitney</td><td>California</td><td>14,505 ft</td></tr>
</tbody>
</table> Responsive Table
Responsive wrapper
| Name | State | Established | Area | Visitors | Highlights |
|---|---|---|---|---|---|
| Yellowstone | Wyoming | 1872 | 2,219,791 ac | 4.9M | Geysers, hot springs |
| Yosemite | California | 1890 | 761,748 ac | 3.3M | Granite cliffs, waterfalls |
| Grand Canyon | Arizona | 1919 | 1,218,375 ac | 5.9M | Canyon, Colorado River |
<div class="ug-table-responsive">
<table class="ug-table ug-table--striped">
<thead>
<tr><th>Name</th><th>State</th><th>Established</th><th>Area</th><th>Visitors</th><th>Highlights</th></tr>
</thead>
<tbody>
<tr><td>Yellowstone</td><td>Wyoming</td><td>1872</td><td>2,219,791 ac</td><td>4.9M</td><td>Geysers, hot springs</td></tr>
<tr><td>Yosemite</td><td>California</td><td>1890</td><td>761,748 ac</td><td>3.3M</td><td>Granite cliffs, waterfalls</td></tr>
<tr><td>Grand Canyon</td><td>Arizona</td><td>1919</td><td>1,218,375 ac</td><td>5.9M</td><td>Canyon, Colorado River</td></tr>
</tbody>
</table>
</div> Combined Modifiers
Striped, bordered, hover
| Name | Location | Year |
|---|---|---|
| Acadia | Maine | 1919 |
| Rocky Mountain | Colorado | 1915 |
| Olympic | Washington | 1938 |
<table class="ug-table ug-table--striped ug-table--bordered ug-table--hover">
<thead>
<tr><th>Name</th><th>Location</th><th>Year</th></tr>
</thead>
<tbody>
<tr><td>Acadia</td><td>Maine</td><td>1919</td></tr>
<tr><td>Rocky Mountain</td><td>Colorado</td><td>1915</td></tr>
<tr><td>Olympic</td><td>Washington</td><td>1938</td></tr>
</tbody>
</table> Class Reference
| Class | Description |
|---|---|
.ug-table | Base table styling |
.ug-table--striped | Alternating row backgrounds |
.ug-table--bordered | Borders on all cells |
.ug-table--compact | Reduced cell padding |
.ug-table--dark | Dark header row |
.ug-table--hover | Highlight rows on hover |
.ug-table-responsive | Scrollable wrapper for wide tables |