Tables are used to display tabular data in rows and columns.
Usage
To apply this component, add the .gls-table
class to a <table>
element.
<table class="gls-table">
<caption></caption>
<thead>
<tr>
<th></th>
</tr>
</thead>
<tfoot>
<tr>
<td></td>
</tr>
</tfoot>
<tbody>
<tr>
<td></td>
</tr>
</tbody>
</table>
-
Table Caption Table Heading Table Heading Table Heading Table Footer Table Footer Table Footer Table Data Table Data Table Data Table Data Table Data Table Data <table class="gls-table"> <caption>Table Caption</caption> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tfoot> <tr> <td>Table Footer</td> <td>Table Footer</td> <td>Table Footer</td> </tr> </tfoot> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table>
Guidelines
When to use
If you’re wrangling a lot of data, tables can help you visualize that content. They’re much easier to scan than long paragraphs cluttered with numbers or dates.
When to consider something else
- Consider using a definition list when your data only has two dimensions.
- Don’t use tables to structure web pages
Microcopy notes
- Keep labels short. For best scannability, use just two to three words.
- Limit the data or information in each cell. Make repetitive information, like the properties of the data, part of the label.
- Sort the information or data logically, using alphabetical or numerical order
Accessibility notes
- Use a
<caption>
tag inside of the<table>
body when you need to add a title to a table. - When using multiple levels of headers (
<th>
) in a table each header cell should also have ascope="col"
orscope="row"
attribute.
Divider modifier
Add the .gls-table-divider
class to display a divider between table rows.
<table class="gls-table gls-table-divider">...</table>
-
Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data <table class="gls-table gls-table-divider"> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table>
Striped modifier
Add zebra-striping to a table by adding the .gls-table-striped
class.
<table class="gls-table gls-table-striped">...</table>
-
Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data <table class="gls-table gls-table-striped"> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table>
Hover modifier
Add the .gls-table-hover
class to display a hover state on table rows.
<table class="gls-table gls-table-hover">...</table>
-
Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data <table class="gls-table gls-table-hover gls-table-divider"> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table>
Size modifiers
Add the .gls-table-small
or .gls-table-large
class to a table to make it smaller or larger.
<table class="gls-table gls-table-small">...</table>
-
Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data <table class="gls-table gls-table-small gls-table-divider"> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table>
Justify modifier
To remove the outer padding of the first and last column so that they are flush with the table, add the .gls-table-justify
class.
<table class="gls-table gls-table-justify">...</table>
-
Table Heading Table Heading Table Heading Table Data Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Table Data Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <table class="gls-table gls-table-justify gls-table-divider"> <thead> <tr> <th class="gls-width-small">Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td><button class="gls-button gls-button-default" type="button">Button</button></td> </tr> <tr> <td>Table Data</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td><button class="gls-button gls-button-default" type="button">Button</button></td> </tr> </tbody> </table>
Alignment modifier
To vertically center table content, just add the .gls-table-middle
class. You can also apply the class to <tr>
or <td>
elements for a more specific selection.
<table class="gls-table gls-table-middle">...</table>
-
Table Heading Table Heading Table Heading Table Data Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Table Data Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. <table class="gls-table gls-table-middle gls-table-divider"> <thead> <tr> <th class="gls-width-small">Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td><button class="gls-button gls-button-default" type="button">Button</button></td> </tr> <tr> <td>Table Data</td> <td>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td> <td><button class="gls-button gls-button-default" type="button">Button</button></td> </tr> </tbody> </table>
Responsive table
If your table happens to be wider than its container element or would eventually get too big on a specific viewport width, just wrap it inside a <div>
element and add the .gls-overflow-auto
class from the Utility component. This creates a container that provides a horizontal scrollbar whenever the elements inside it are wider than the container itself.
<div class="gls-overflow-auto">
<table class="gls-table">...</table>
</div>
-
Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data <div class="gls-overflow-auto"> <table class="gls-table gls-table-small gls-table-divider"> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table> </div>
Stack on small viewports
If you want table columns to stack on small screens, add the .gls-table-responsive
class.
<table class="gls-table gls-table-responsive">...</table>
-
Table Heading Table Heading Table Heading Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data Table Data <table class="gls-table gls-table-responsive gls-table-divider"> <thead> <tr> <th>Table Heading</th> <th>Table Heading</th> <th>Table Heading</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table>
Note Resize the browser window to see the columns stack.
Column width modifier
To modify the column width or content, you can use one of the following classes. You just need to add this class to one of the column cells. It’s recommended on the header cell.
Class | Description |
---|---|
.gls-table-shrink |
Add this class to a <th> or <td> element to reduce the column width to fit its content. |
.gls-table-expand |
Add this class to a <th> or <td> element to expand the column width to fill the remaining space and apply a min-width. |
.gls-width-* |
Add one of these classes from the Width component to a <th> or <td> element to modify the column width. |
<th class="gls-table-shrink"></th>
-
Shrink Expand Width Small Table Data Table Data Table Data Table Data Table Data Table Data <table class="gls-table gls-table-divider"> <thead> <tr> <th class="gls-table-shrink">Shrink</th> <th class="gls-table-expand">Expand</th> <th class="gls-width-small">Width Small</th> </tr> </thead> <tbody> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> <tr> <td>Table Data</td> <td>Table Data</td> <td>Table Data</td> </tr> </tbody> </table>
Utilities
To optimize the display of table cells and their specific content, you can add one of the following classes.
Class | Description |
---|---|
.gls-table-link |
To link an entire cell, add this class to a <th> or <td> element and insert an <a> element. Add the .gls-link-reset class from the Link component to reset the default link styling. |
.gls-preserve-width |
Since images are responsive by default in Gloss, using an image inside a table cell with the .gls-table-shrink class would reduce the image width to 0. To prevent this behavior, add the .gls-preserve-width class from the Base component to the <img> element. |
.gls-text-truncate |
When applying a fixed width to a table cell, you might want to add this class from the Text component to the <td> element to truncate the text. |
.gls-text-nowrap |
Add this class from the Text component to keep text from wrapping, for example when using the .gls-table-shrink class. |
<!-- Table link -->
<td class="gls-table-link">
<a class="gls-link-reset" href=""></a>
</td>
<!-- Preserve width -->
<td>
<img class="gls-preserve-width" src="" width="" height="" alt="">
</td>
<!-- Text truncate -->
<td class="gls-text-truncate"></td>
<!-- Text nowrap -->
<td class="gls-text-nowrap"></td>
-
Preserve Expand + Link Truncate Shrink + Nowrap Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor. Lorem ipsum dolor <div class="gls-overflow-auto"> <table class="gls-table gls-table-hover gls-table-middle gls-table-divider"> <thead> <tr> <th class="gls-table-shrink"></th> <th class="gls-table-shrink">Preserve</th> <th class="gls-table-expand">Expand + Link</th> <th class="gls-width-small">Truncate</th> <th class="gls-table-shrink gls-text-nowrap">Shrink + Nowrap</th> </tr> </thead> <tbody> <tr> <td><input class="gls-checkbox" type="checkbox"></td> <td><img class="gls-preserve-width gls-border-circle" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="40" height="40" alt=""></td> <td class="gls-table-link"> <a class="gls-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a> </td> <td class="gls-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td> <td class="gls-text-nowrap">Lorem ipsum dolor</td> </tr> <tr> <td><input class="gls-checkbox" type="checkbox"></td> <td><img class="gls-preserve-width gls-border-circle" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="40" height="40" alt=""></td> <td class="gls-table-link"> <a class="gls-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a> </td> <td class="gls-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td> <td class="gls-text-nowrap">Lorem ipsum dolor</td> </tr> <tr> <td><input class="gls-checkbox" type="checkbox"></td> <td><img class="gls-preserve-width gls-border-circle" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="40" height="40" alt=""></td> <td class="gls-table-link"> <a class="gls-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a> </td> <td class="gls-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td> <td class="gls-text-nowrap">Lorem ipsum dolor</td> </tr> <tr> <td><input class="gls-checkbox" type="checkbox"></td> <td><img class="gls-preserve-width gls-border-circle" src="https://utahhealthcare.github.io/gloss-docs/images/avatar.jpg" width="40" height="40" alt=""></td> <td class="gls-table-link"> <a class="gls-link-reset" href="">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</a> </td> <td class="gls-text-truncate">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor.</td> <td class="gls-text-nowrap">Lorem ipsum dolor</td> </tr> </tbody> </table> </div>