<table class="o-table " data-o-component="o-table">
<thead>
<tr>
<th>Fruit</th>
<th>Genus</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
</tr>
<tr>
<td>gruyère</td>
<td>sourdough</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">7</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
</tr>
</tbody>
</table>
<table class="o-table " data-o-component="o-table">
<thead>
<tr>
<th>Fruit<span class="o-table__cell--content-secondary">Common Name</span></th>
<th>Genus<span class="o-table__cell--content-secondary">Scientific Name</span></th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
</tr>
</tbody>
</table>
<table class="o-table o-table--compact" data-o-component="o-table">
<thead>
<tr>
<th>Fruit</th>
<th>Genus</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
</tr>
<tr>
<td>gruyère</td>
<td>sourdough</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">7</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
</tr>
</tbody>
</table>
<table class="o-table o-table--compact" data-o-component="o-table">
<thead>
<tr>
<th>Fruit<span class="o-table__cell--content-secondary">Common Name</span></th>
<th>Genus<span class="o-table__cell--content-secondary">Scientific Name</span></th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
</tr>
</thead>
<tbody>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
</tr>
</tbody>
</table>
<table class="o-table" data-o-component="o-table">
<caption class="o-table__caption--top">
Top caption (default)
</caption>
<caption class="o-table__caption--bottom">
Bottom caption
</caption>
<tr>
<th>Fruit</th>
<th>Genus</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(GBP)</span></th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost <span class="o-table__cell--content-secondary">(EUR)</span></th>
</tr>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric"></td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.56</td>
</tr>
</table>
<table class="o-table o-table--row-stripes" data-o-component="o-table">
<thead>
<th>Fruit</th>
<th>Characteristic</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Popularity (%)</th>
</thead>
<tbody>
<tr>
<td>Naseberry</td>
<td>chewy</td>
<td class="o-table__cell--numeric">4</td>
</tr>
<tr>
<td>Dragonfruit</td>
<td>juicy</td>
<td class="o-table__cell--numeric">71</td>
</tr>
<tr>
<td>Durian</td>
<td>smelly</td>
<td class="o-table__cell--numeric">32</td>
</tr>
</tbody>
</table>
<table class="o-table o-table--row-stripes" data-o-component="o-table">
<thead>
<th>Report date</th>
<th data-o-table-heading-disable-sort>Action</th>
</thead>
<tbody>
<tr>
<td class="o-table__cell--vertically-center">Vertically centred</td>
<td class="o-table__cell--vertically-center">
<div><a class="o-typography-link" href="#">View</a></div>
<div><a class="o-typography-link" href="#">Download</a></div>
</td>
</tr>
<tr>
<td class="o-table__cell--vertically-center">with</td>
<td class="o-table__cell--vertically-center">
<div><a class="o-typography-link" href="#">View</a></div>
<div><a class="o-typography-link" href="#">Download</a></div>
</td>
</tr>
<tr>
<td class="o-table__cell--vertically-center">.o-table__cell--vertically-center class</td>
<td class="o-table__cell--vertically-center">
<div><a class="o-typography-link" href="#">View</a></div>
<div><a class="o-typography-link" href="#">Download</a></div>
</td>
</tr>
</tbody>
</table>
This is a flat responsive version
<table class="o-table o-table--responsive-flat" data-o-component="o-table" data-o-table-responsive="flat">
<thead>
<tr>
<th>Fruit</th>
<th>Genus</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (GBP)</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (EUR)</th>
<th>Characteristic</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
<td>juicy</td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
<td>smelly</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
<td>chewy</td>
</tr>
</tbody>
</table>
This is an overflow responsive version
<table class="o-table o-table--responsive-overflow" data-o-component="o-table">
<thead>
<tr>
<th>Fruit</th>
<th>Genus</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (GBP)</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (EUR)</th>
<th>Characteristic</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
<td>juicy</td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
<td>smelly</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
<td>chewy</td>
</tr>
</tbody>
</table>
This is a scrolling responsive version
<table class="o-table o-table--responsive-scroll" data-o-component="o-table">
<thead>
<tr>
<th>Fruit</th>
<th>Genus</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (GBP)</th>
<th data-o-table-data-type="numeric" class="o-table__cell--numeric">Cost (EUR)</th>
<th>Characteristic</th>
</tr>
</thead>
<tbody>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
<td>juicy</td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
<td>smelly</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
<td>chewy</td>
</tr>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
<td>juicy</td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
<td>smelly</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
<td>chewy</td>
</tr>
<tr>
<td>Dragonfruit</td>
<td>Stenocereus</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">3</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2.72</td>
<td>juicy</td>
</tr>
<tr>
<td>Durian</td>
<td>Durio</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.75</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.33</td>
<td>smelly</td>
</tr>
<tr>
<td>Naseberry</td>
<td>Manilkara</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">2</td>
<td data-o-table-data-type="numeric" class="o-table__cell--numeric">1.85</td>
<td>chewy</td>
</tr>
</tbody>
</table>