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