Skip to main content

Tables

Version: 0.9.0
Edit

Tables are used to display tabular data within rows and columns. There are several styling options that are available to fit the size and complexity of the data table.

All tables need a unique <caption>. Table captions can be visuallyhidden if there is an appropriate heading immediately preceding the table. This option might make sense if there explanatory text to go along with the table, however care should be taken to ensure the heading and table are in close enough proximity to be associated with each other.

Table Headers (th) should have <b><code>scope="col"</code></b> and be within a Table Head (thead).

Table

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L9

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- table -->
<table class="c-table">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Full-Width Table

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L72

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- full-width table -->
<table class="c-table c-table--full-width">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Small Table

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L113

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- small table -->
<table class="c-table c-table--sm">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Large Table

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L154

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- large table -->
<table class="c-table c-table--lg">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Compact Table

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L195

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- compact table -->
<table class="c-table c-table--compact">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Comfy Table

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L238

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- comfy table -->
<table class="c-table c-table--comfy">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Table with Borders

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L281

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- table with borders -->
<table class="c-table c-table--borders">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Table - No Borders

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L332

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- table - no borders -->
<table class="c-table c-table--no-borders">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Table - No Borders Body

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L375

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- table - no borders body -->
<table class="c-table c-table--no-borders-body">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Zebra Table

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L420

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- zebra table -->
<table class="c-table c-table--zebra">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Table with Columns

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L480

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- table with columns -->
<table class="c-table c-table--columns">
   <caption class="c-table__caption">
     <h3 class="c-table__heading">Table Heading</h3>
 </caption>
 <thead class="c-table__head">
   <tr class="c-table__row">
     <th scope="col" class="c-table__header c-table__cell">Header 1</th>
     <th scope="col" class="c-table__header c-table__cell">Header 2</th>
     <th scope="col" class="c-table__header c-table__cell">Header 3</th>
   </tr>
 </thead>

 <tbody class="c-table__body">
   <tr class="c-table__row">
     <td class="c-table__cell">Row 1, Cell 1</td>
     <td class="c-table__cell">Row 1, Cell 2</td>
     <td class="c-table__cell">Row 1, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 2, Cell 1</td>
     <td class="c-table__cell">Row 2, Cell 2</td>
     <td class="c-table__cell">Row 2, Cell 3</td>
   </tr>
   <tr class="c-table__row">
     <td class="c-table__cell">Row 3, Cell 1</td>
     <td class="c-table__cell">Row 3, Cell 2</td>
     <td class="c-table__cell">Row 3, Cell 3</td>
   </tr>
 </tbody>
</table>

Responsive Table

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L587

Port Results
Jack ID VLAN Name VLAN Active Link Speed MACs Switch Interface MAC Address Polled
320-125-1-1-27 ou128as02 16 1G 0 ou128as02 Gi5/13 5 minutes ago
320-125-1-1-27 ou128as02 16 1G 0 ou128as02 Gi5/13 5 minutes ago
320-125-1-1-27 ou128as02 16 1G 0 ou128as02 Gi5/13 5 minutes ago
320-125-1-1-27 ou128as02 16 1G 0 ou128as02 Gi5/13 5 minutes ago
320-125-1-1-27 ou128as02 16 1G 0 ou128as02 Gi5/13 5 minutes ago 
<!-- responsive table -->
<div class="o-resp-table__wrap c-table__wrap u-space-stack-expanded">
 <div class="c-fade c-fade--right">
   <table class="o-resp-table c-table c-table--resp c-table--full-width u-space-stack" tabindex="0" role="table" aria-labelledby="a-table-caption">
     <caption id="a-table-caption" class="visuallyhidden c-table__caption"><h2 class="c-table__heading">Port Results</h2></caption>
     <thead class="o-resp-table__head c-table__head">
       <tr class="o-resp-table__row c-table__row">
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Jack ID</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">VLAN Name</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell c-table__cell--align-right">VLAN</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell c-table__cell--align-center">Active</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell c-table__cell--align-center">Link</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Speed</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell c-table__cell--align-right">MACs</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Switch</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Interface</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">MAC Address</th>
         <th scope="col" class="o-resp-table__header o-resp-table__cell c-table__header c-table__cell">Polled</th>
       </tr>
     </thead>

     <tbody class="o-resp-table__body c-table__body">
       <tr class="o-resp-table__row c-table__row c-table__row">
           <td class="o-resp-table__cell c-table__cell">
             <span>320-125-1-1-27</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>16</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-link u-icon--before u-color--disable"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>1G</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>0</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>Gi5/13</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>5 minutes ago</span>
           </td>
       </tr>
       <tr class="o-resp-table__row c-table__row c-table__row">
           <td class="o-resp-table__cell c-table__cell">
             <span>320-125-1-1-27</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>16</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-link u-icon--before u-color--disable"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>1G</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>0</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>Gi5/13</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>5 minutes ago</span>
           </td>
       </tr>
       <tr class="o-resp-table__row c-table__row c-table__row">
           <td class="o-resp-table__cell c-table__cell">
             <span>320-125-1-1-27</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>16</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-link u-icon--before u-color--disable"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>1G</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>0</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>Gi5/13</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>5 minutes ago</span>
           </td>
       </tr>
       <tr class="o-resp-table__row c-table__row c-table__row">
           <td class="o-resp-table__cell c-table__cell">
             <span>320-125-1-1-27</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>16</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-link u-icon--before u-color--disable"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>1G</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>0</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>Gi5/13</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>5 minutes ago</span>
           </td>
       </tr>
       <tr class="o-resp-table__row c-table__row c-table__row">
           <td class="o-resp-table__cell c-table__cell">
             <span>320-125-1-1-27</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>16</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-success-stroke u-icon--before u-fg-color-success"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-center">
             <span><i class="icon-link u-icon--before u-color--disable"></i></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>1G</span>
           </td>
           <td class="o-resp-table__cell c-table__cell c-table__cell--align-right">
             <span>0</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>ou128as02</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>Gi5/13</span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span></span>
           </td>
           <td class="o-resp-table__cell c-table__cell">
             <span>5 minutes ago</span>
           </td>
       </tr>
     </tbody>
   </table>
 </div>
</div>

Table with Wrap

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L933

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- table with wrap -->
<span class="c-table__wrap u-display-inline-block">
  <table class="c-table c-table--borders">
    <caption class="c-table__caption">
      <h3 class="c-table__heading">Table Heading</h3>
  </caption>
  <thead class="c-table__head">
    <tr class="c-table__row">
      <th scope="col" class="c-table__header c-table__cell">Header 1</th>
      <th scope="col" class="c-table__header c-table__cell">Header 2</th>
      <th scope="col" class="c-table__header c-table__cell">Header 3</th>
    </tr>
  </thead>

  <tbody class="c-table__body">
    <tr class="c-table__row">
      <td class="c-table__cell">Row 1, Cell 1</td>
      <td class="c-table__cell">Row 1, Cell 2</td>
      <td class="c-table__cell">Row 1, Cell 3</td>
    </tr>
    <tr class="c-table__row">
      <td class="c-table__cell">Row 2, Cell 1</td>
      <td class="c-table__cell">Row 2, Cell 2</td>
      <td class="c-table__cell">Row 2, Cell 3</td>
    </tr>
    <tr class="c-table__row">
      <td class="c-table__cell">Row 3, Cell 1</td>
      <td class="c-table__cell">Row 3, Cell 2</td>
      <td class="c-table__cell">Row 3, Cell 3</td>
    </tr>
  </tbody>
  </table>
</span>

Table with Top Bottom Wrap

Author: Mary Ditchen
Since: 0.9.0
Source: /source/patterns/components/tables.scss#L1074

Table Heading
Header 1 Header 2 Header 3
Row 1, Cell 1 Row 1, Cell 2 Row 1, Cell 3
Row 2, Cell 1 Row 2, Cell 2 Row 2, Cell 3
Row 3, Cell 1 Row 3, Cell 2 Row 3, Cell 3 
<!-- table with top and bottom wrap -->
<span class="c-table__wrap c-table__wrap--top-bottom-border u-display-inline-block">
  <table class="c-table">
    <caption class="c-table__caption">
      <h3 class="c-table__heading">Table Heading</h3>
  </caption>
  <thead class="c-table__head">
    <tr class="c-table__row">
      <th scope="col" class="c-table__header c-table__cell">Header 1</th>
      <th scope="col" class="c-table__header c-table__cell">Header 2</th>
      <th scope="col" class="c-table__header c-table__cell">Header 3</th>
    </tr>
  </thead>

  <tbody class="c-table__body">
    <tr class="c-table__row">
      <td class="c-table__cell">Row 1, Cell 1</td>
      <td class="c-table__cell">Row 1, Cell 2</td>
      <td class="c-table__cell">Row 1, Cell 3</td>
    </tr>
    <tr class="c-table__row">
      <td class="c-table__cell">Row 2, Cell 1</td>
      <td class="c-table__cell">Row 2, Cell 2</td>
      <td class="c-table__cell">Row 2, Cell 3</td>
    </tr>
    <tr class="c-table__row">
      <td class="c-table__cell">Row 3, Cell 1</td>
      <td class="c-table__cell">Row 3, Cell 2</td>
      <td class="c-table__cell">Row 3, Cell 3</td>
    </tr>
  </tbody>
  </table>
</span>