The style guide tables are meant to be used as the building blocks for building your tables. These tables don't have any mobile functionality by default it is up to the individual use case to dictate the best approach for making the table work on mobile. There are different style modifier classes that you can add to your table to style it the way you need to.
These classes fall into a couple different categories; header styles, borders, striping and size. The different categories of modifiers can be mixed and matched as needed.
Markup:
- Use normal table markup
- All variations require the
.dk-tableclass added to the table element.
Accessibility:
<caption>is required, by default it's visually hidden but available to screen readers. To make the caption visible add the CLASS.dk-show- When using
<table>every column head needs to havescope="col" - When using
<table>every row header needs to havescope="row"
Header Styles
Solid Header
To give your table a solid header add the dk-table__headings--solid class to the <thead> element.
<div class="dk-card">
<table class="dk-table">
<caption>List of users</caption>
<thead class="dk-table__headings--solid">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div>Blue Header
To give your table a Blurple Blue header add the dk-table__headings--solid-blue class to the <thead> element.
<div class="dk-card">
<table class="dk-table">
<caption>List of users</caption>
<thead class="dk-table__headings--solid-blue">
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div>Sortable Icons Header
The following classes can be applied to a column header to add the appropriate icon.
- Classes:
- Show that a column is sortable:
.dk-table__head--sort - Show a column that is sorted ascending:
.dk-table__head--asc - Show that a column is sorted descending:
.dk-table__head--desc
- Show that a column is sortable:
<div class="dk-card">
<table class="dk-table">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th
scope="col"
class="dk-table__head--sort">
First
</th>
<th
scope="col"
class="dk-table__head--asc">
Last
</th>
<th
scope="col"
class="dk-table__head--desc">
Handle
</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
</tbody>
</table>
</div>Size Styles
Sometimes you need tables with different amounts of padding and font sizes. Digit provides three different sizes: sm, md, lg.
The default size is md so you don't need to add any modifiers for this size.
Small Size
Add the dk-table--sm class to the <table> element.
<div class="dk-card">
<table class="dk-table dk-table--sm">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div>Large Size
Add the dk-table--lg class to the <table> element.
<div class="dk-card">
<table class="dk-table dk-table--lg ">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div>Border Styles
Border
Add the dk-table--border class to the <table> element.
<div class="dk-card">
<table class="dk-table dk-table--border">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div>Grid Border
Add the dk-table--border-grid class to the <table> element.
<div class="dk-card">
<table class="dk-table dk-table--border-grid">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div>Striped Styles
To give your table alternating stripes add the dk-table--striped class to the <table> element.
Note: The color of the striping is the same color as the docs background.
<div class="dk-card">
<table class="dk-table dk-table--striped">
<caption>List of users</caption>
<thead>
<tr>
<th scope="col">#</th>
<th scope="col">First</th>
<th scope="col">Last</th>
<th scope="col">Handle</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">1</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">2</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">3</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">4</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
<tr>
<th scope="row">5</th>
<td>Mark</td>
<td>Otto</td>
<td>@mdo</td>
</tr>
<tr>
<th scope="row">6</th>
<td>Jacob</td>
<td>Thornton</td>
<td>@fat</td>
</tr>
<tr>
<th scope="row">7</th>
<td>Larry</td>
<td>the Bird</td>
<td>@twitter</td>
</tr>
<tr>
<th scope="row">8</th>
<td>Dan</td>
<td>the man</td>
<td>@danCave</td>
</tr>
</tbody>
</table>
</div>Div Table
If you need something that looks like a table but it's made full out of DIVS you can use this structure and classes to make that happen. All of the modifier classes can be used the same way with a div table.
<div class="dk-card">
<div class="dk-table">
<div class="dk-table__headings">
<div class="dk-table__head">
#
</div>
<div class="dk-table__head ">
First
</div>
<div class="dk-table__head">
Last
</div>
<div class="dk-table__head">
Handle
</div>
</div>
<div class="dk-table__body">
<div class="dk-table__row">
<div class="dk-table__head">
1
</div>
<div class="dk-table__cell">
Mark
</div>
<div class="dk-table__cell">
Otto
</div>
<div class="dk-table__cell">
@mdo
</div>
</div>
<div class="dk-table__row">
<div class="dk-table__head">
2
</div>
<div class="dk-table__cell">
Jacob
</div>
<div class="dk-table__cell">
Thornton
</div>
<div class="dk-table__cell">
@fat
</div>
</div>
<div class="dk-table__row">
<div class="dk-table__head">
3
</div>
<div class="dk-table__cell">
Larry
</div>
<div class="dk-table__cell">
the Bird
</div>
<div class="dk-table__cell">
@twitter
</div>
</div>
</div>
</div>
</div>Product Highlight Table
If you need something that looks like a table but it's made full out of DIVS you can use this structure and classes to make that happen. All of the modifier classes can be used the same way with a div table.
<div class="product-table">
<div class="product-table__title">
<h3>
Product Highlight Table Example
</h3>
</div>
<div>
<table
class="product-table__table"
rules="all">
<thead>
<tr>
<th scope="col"></th>
<th scope="col">Image</th>
<th
scope="col"
abbr="Manufacturer Part Number">
Manufacturer Part
Number
</th>
<th
scope="col"
abbr="Description">
Description
</th>
<th scope="col">
Available Quantity
</th>
<th scope="col">
View Details
</th>{' '}
</tr>
</thead>
<tbody>
<tr>
<td class="product-table__datasheet">
<a
href="https://abracon.com/datasheets/ASADV.pdf"
target="_blank"
title="ASADV-25.000MHZ-LR-T product page link">
<img
src="//digikeytest.digikey.com/-/media/Images/PartGrid/datasheet.gif?la=en-USts=d3f41333-0026-4a6d-986b-92bdc379531a"
alt=""
/>
</a>
</td>
<td class="product-table__image">
<img
src="//media.digikey.com/Photos/Abracon Corporation Photos/MFG_ASADV-25.000MHZ-LR-T_tmb.jpg"
alt="OSC XO 25.000MHZ CMOS SMD"
/>
</td>
<td>
<a
href="/en/products/detail/abracon-llc/ASADV-25-000MHZ-LR-T/12088669"
class="dk-link">
ASADV-25.000MHZ-LR-T
</a>
</td>
<td>
OSC XO 25.000MHZ CMOS
SMD
</td>
<td>
<span class="partgrid-centered">
1495 - Immediate
</span>
</td>
<td>
<a
href="/en/products/detail/abracon-llc/ASADV-25-000MHZ-LR-T/12088669"
class="dk-btn__primary dk-btn--sm"
title="View ASADV-25.000MHZ-LR-T">
View Details
</a>
</td>{' '}
</tr>
<tr>
<td class="product-table__datasheet">
<a
href="https://abracon.com/datasheets/ASADV.pdf"
target="_blank"
title="ASADV-26.000MHZ-LC-T product page link">
<img
src="//digikeytest.digikey.com/-/media/Images/PartGrid/datasheet.gif?la=en-USts=d3f41333-0026-4a6d-986b-92bdc379531a"
alt=""
/>
</a>
</td>
<td class="product-table__image">
<img
src="//media.digikey.com/Photos/Abracon Corporation Photos/MFG_ASADV-25.000MHZ-LR-T_tmb.jpg"
alt="OSC XO 26.000MHZ CMOS SMD"
/>
</td>
<td>
<a
href="/en/products/detail/abracon-llc/ASADV-26-000MHZ-LC-T/12088695"
class="dk-link">
ASADV-26.000MHZ-LC-T
</a>
</td>
<td>
OSC XO 26.000MHZ CMOS
SMD
</td>
<td>
<span class="partgrid-centered">
1000 - Immediate
</span>
</td>
<td>
<a
href="/en/products/detail/abracon-llc/ASADV-26-000MHZ-LC-T/12088695"
class="dk-btn__primary dk-btn--sm"
title="View ASADV-26.000MHZ-LC-T">
View Details
</a>
</td>{' '}
</tr>
<tr>
<td class="product-table__datasheet">
<a
href="https://abracon.com/datasheets/ASADV.pdf"
target="_blank"
title="ASADV-26.000MHZ-LR-T product page link">
<img
src="//digikeytest.digikey.com/-/media/Images/PartGrid/datasheet.gif?la=en-USts=d3f41333-0026-4a6d-986b-92bdc379531a"
alt=""
/>
</a>
</td>
<td class="product-table__image">
<img
src="//media.digikey.com/Photos/Abracon Corporation Photos/MFG_ASADV-25.000MHZ-LR-T_tmb.jpg"
alt="OSC XO 26.000MHZ CMOS SMD"
/>
</td>
<td>
<a
href="/en/products/detail/abracon-llc/ASADV-26-000MHZ-LR-T/12088686"
class="dk-link">
ASADV-26.000MHZ-LR-T
</a>
</td>
<td>
OSC XO 26.000MHZ CMOS
SMD
</td>
<td>
<span class="partgrid-centered">
0 - Immediate
</span>
</td>
<td>
<a
href="/en/products/detail/abracon-llc/ASADV-26-000MHZ-LR-T/12088686"
class="dk-btn__primary dk-btn--sm"
title="View ASADV-26.000MHZ-LR-T">
View Details
</a>
</td>{' '}
</tr>
</tbody>
</table>
<div></div>
</div>
</div>