Information This site is moving

The Pattern Library is moving to its new home on the Summit design system site.

Go to the Summit site
Pattern Library (ver. 1.6)

Note

This page is archived under version 1.6 and is available for reference purposes only. The latest version of Pattern Library is 2.

Responsive tables

Default

Staff information details
Full Name Title Email Phone Start Date Location
John Roden Web Designer john.roden@calgary.ca (403) 555-5678 Jun 30, 2014 Calgary Public Building, 4th Floor
Seth Brown Graphic Designer seth.brown@calgary.ca (403) 555-5284 Apr 21, 2014 Calgary Public Building, 3rd Floor
Dorie Dawson Graphic Designer dorie.dawson@calgary.ca (403) 555-2956 Mar 18, 2012 Calgary Public Building, 3rd Floor
Jennifer Tidley Marketing Lead jennifer.tidley@calgary.ca (403) 555-8893 Jan 14, 2013 City Hall, 4th Floor
Sam Wilson Electrical Inspector sam.wilson@calgary.ca (403) 555-4438 Jan 14, 2005 City Hall, 2nd Floor

Code 


<!-- Responsive tables require the `cui` class -->
<table class="cui">
    <caption>Staff information details</caption>
    <thead>
        <tr>
            <th scope="col">Full Name</th>
            <th scope="col">Title</th>
            <th scope="col">Email</th>
            <th scope="col">Phone</th>
            <th scope="col">Start Date</th>
            <th scope="col">Location</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <th scope="row">John Roden</th>
            <td>Web Designer</td>
            <td><a href="your-link-here">john.roden@calgary.ca</a></td>
            <td>(403) 555-5678</td>
            <td>Jun 30, 2014</td>
            <td>Calgary Public Building, 4th Floor</td>
        </tr>
        <!-- Add additional table rows here -->
    </tbody>
</table>

Bordered

Staff information details
Full Name Title Email Phone Start Date Location
John Roden Web Designer john.roden@calgary.ca (403) 555-5678 Jun 30, 2014 Calgary Public Building, 4th Floor
Seth Brown Graphic Designer seth.brown@calgary.ca (403) 555-5284 Apr 21, 2014 Calgary Public Building, 3rd Floor
Dorie Dawson Graphic Designer dorie.dawson@calgary.ca (403) 555-2956 Mar 18, 2012 Calgary Public Building, 3rd Floor
Jennifer Tidley Marketing Lead jennifer.tidley@calgary.ca (403) 555-8893 Jan 14, 2013 City Hall, 4th Floor
Sam Wilson Electrical Inspector sam.wilson@calgary.ca (403) 555-4438 Jan 14, 2005 City Hall, 2nd Floor

Code 


<!-- Responsive tables require the cui class -->
<table class="cui bordered">
    <caption>Staff information details</caption>
    <thead>
        <tr>
            <th scope="col"><!-- TH elements go here --></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- TD elements go here -->
        </tr>
        <!-- Add additional table rows here -->
    </tbody>
</table>

Striped

Staff information details
Full Name Title Email Phone Start Date Location
John Roden Web Designer john.roden@calgary.ca (403) 555-5678 Jun 30, 2014 Calgary Public Building, 4th Floor
Seth Brown Graphic Designer seth.brown@calgary.ca (403) 555-5284 Apr 21, 2014 Calgary Public Building, 3rd Floor
Dorie Dawson Graphic Designer dorie.dawson@calgary.ca (403) 555-2956 Mar 18, 2012 Calgary Public Building, 3rd Floor
Jennifer Tidley Marketing Lead jennifer.tidley@calgary.ca (403) 555-8893 Jan 14, 2013 City Hall, 4th Floor
Sam Wilson Electrical Inspector sam.wilson@calgary.ca (403) 555-4438 Jan 14, 2005 City Hall, 2nd Floor

Code 


<!-- Responsive tables require the cui class -->
<table class="cui striped">
    <caption>Staff information details</caption>
    <thead>
        <tr>
            <th scope="col"><!-- TH elements go here --></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- TD elements go here -->
        </tr>
        <!-- Add additional table rows here -->
    </tbody>
</table>

Striped with dark header

Staff information details
Full Name Title Email Phone Start Date Location
John Roden Web Designer john.roden@calgary.ca (403) 555-5678 Jun 30, 2014 Calgary Public Building, 4th Floor
Seth Brown Graphic Designer seth.brown@calgary.ca (403) 555-5284 Apr 21, 2014 Calgary Public Building, 3rd Floor
Dorie Dawson Graphic Designer dorie.dawson@calgary.ca (403) 555-2956 Mar 18, 2012 Calgary Public Building, 3rd Floor
Jennifer Tidley Marketing Lead jennifer.tidley@calgary.ca (403) 555-8893 Jan 14, 2013 City Hall, 4th Floor
Sam Wilson Electrical Inspector sam.wilson@calgary.ca (403) 555-4438 Jan 14, 2005 City Hall, 2nd Floor

Code 


<!-- Responsive tables require the cui class -->
<table class="cui striped dark-header">
    <caption>Staff information details</caption>
    <thead>
        <tr>
            <th scope="col"><!-- TH elements go here --></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- TD elements go here -->
        </tr>
        <!-- Add additional table rows here -->
    </tbody>
</table>

Bordered and striped with dark header

Staff information details
Full Name Title Email Phone Start Date Location
John Roden Web Designer john.roden@calgary.ca (403) 555-5678 Jun 30, 2014 Calgary Public Building, 4th Floor
Seth Brown Graphic Designer seth.brown@calgary.ca (403) 555-5284 Apr 21, 2014 Calgary Public Building, 3rd Floor
Dorie Dawson Graphic Designer dorie.dawson@calgary.ca (403) 555-2956 Mar 18, 2012 Calgary Public Building, 3rd Floor
Jennifer Tidley Marketing Lead jennifer.tidley@calgary.ca (403) 555-8893 Jan 14, 2013 City Hall, 4th Floor
Sam Wilson Electrical Inspector sam.wilson@calgary.ca (403) 555-4438 Jan 14, 2005 City Hall, 2nd Floor

Code 


<!-- Responsive tables require the cui class -->
<table class="cui bordered striped dark-header">
    <caption>Staff information details</caption>
    <thead>
        <tr>
            <th scope="col"><!-- TH elements go here --></th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <!-- TD elements go here -->
        </tr>
        <!-- Add additional table rows here -->
    </tbody>
</table>

Table displayed as mobile version only

Staff information details
Full Name Title Email Phone Start Date Location
John Roden Web Designer john.roden@calgary.ca (403) 555-5678 Jun 30, 2014 Calgary Public Building, 4th Floor
Seth Brown Graphic Designer seth.brown@calgary.ca (403) 555-5284 Apr 21, 2014 Calgary Public Building, 3rd Floor
Dorie Dawson Graphic Designer dorie.dawson@calgary.ca (403) 555-2956 Mar 18, 2012 Calgary Public Building, 3rd Floor
Jennifer Tidley Marketing Lead jennifer.tidley@calgary.ca (403) 555-8893 Jan 14, 2013 City Hall, 4th Floor
Sam Wilson Electrical Inspector sam.wilson@calgary.ca (403) 555-4438 Jan 14, 2005 City Hall, 2nd Floor