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.5)

Note

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

Tables

Responsive Table - Default

Responsive Table Production Ready SharePoint Available
The details of staff's information
Full Name Title Email Phone Start Date Location
Full Name: 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>The details of staff's information</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>

Responsive Table with Borders

Responsive Table Production Ready SharePoint Available
The details of staff's information
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>The details of staff's information</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>

Responsive Table with Stripes

Responsive Table Production Ready SharePoint Available
The details of staff's information
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>The details of staff's information</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>

Responsive Table with Stripes and Dark Header

Responsive Table Production Ready SharePoint Available
The details of staff's information
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>The details of staff's information</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>

Responsive Table with Borders, Stripes, and Dark Header

Responsive Table Production Ready SharePoint Available
The details of staff's information
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>The details of staff's information</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>

Responsive Table - displayed as mobile version only

Responsive Table Production Ready SharePoint Available
The details of staff's information
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