BehaveRespectfully LookDistinctly MovePurposefully SpeakAuthentically ThinkSimply heart_icon

Tables

Tables let users quickly scan, compare and understand large amounts of information. Analysis on the appropriate table pattern should be conducted by UX and Development teams.

Comparison Table

These tables let users compare sets of data across columns. The example below shows how to apply components like links and buttons.

View Example: HTML

Sample desktop view only. Not to scale.

table type 1
HideShow CSS
                         
        
        .ml-table {
        	display: -ms-flexbox;
        	display: -webkit-flex;
        	display: flex;
        	-webkit-flex-flow: row wrap;
        	font-size: 14px;
        	line-height: 1.6;
        	width: 100%;
        	border: solid 1px #9B9B9B;
        }
        .ml-table-col {
        	border-right: solid 1px #9B9B9B;
        	-webkit-flex: 1;
        	-ms-flex: 1;
        	flex: 1;
        	min-width: 200px;
        }
        .ml-table-col-header {
        	padding: 20px;
        	text-align: center;
        	background: #D1D1D1;
        	min-height: 200px;
        }
        .ml-table-col-header-title {
        	font-size: 20px;
        	color: #007abc;
        	line-height: 26px;
        }
        .ml-table-col-header-callout {
        	font-size: 26px;
        }
        .ml-table-col-row {
        	padding: 20px;
        	text-align: center;
        }
        .ml-table-col:last-child {
        	border-right: 0;
        }
        .ml-table-footer {
        	padding: 20px;
        	font-size: 12px;
        	text-align: center;
        }
        
        @media screen and (max-device-width: 959px) {
        .ml-table {
        	display: block;
        }
        }
        
        
        
                            
HideShow HTML
                        
        <div class="ml-table">
            <div class="ml-table-col">
              <div class="ml-table-col-header">
                <a href="" class="ml-table-col-header-title">Simplified Issue Term</a><br />
                <strong><span class="ml-table-col-header-callout">$4.75</span>/mo*</strong><br />
                for $10,000 of coverage<br />
                (30 year old female)
              </div>
              <div class="ml-table-col-row">Coverage Lasts <br /><strong>To age 90</strong></div>
              <div class="ml-table-col-row">Available Online<br /><strong>Yes</strong></div>
              <div class="ml-table-col-row">Medical Exam Required<br /><strong>No</strong></div>
              <div class="ml-table-col-row">Coverage Amounts<br /><strong>$5,000-$100,000</strong></div>
              <div class="ml-table-col-row"><a href="" class="ml-button-primary">Learn More</a></div>
              <div class="ml-table-col-row"><a href="" class="ml-link">Apply Online</a></div>
            </div>
            <div class="ml-table-col">
              <div class="ml-table-col-header">
                <a href="" class="ml-table-col-header-title">Legal Term</a><br />
                <strong><span class="ml-table-col-header-callout">$16.00</span>/mo*</strong><br />
                for $10,000 of coverage<br />
                (30 year old female)
              </div>
              <div class="ml-table-col-row">Coverage Lasts <br /><strong>To age 90</strong></div>
              <div class="ml-table-col-row">Available Online<br /><strong>Yes</strong></div>
              <div class="ml-table-col-row">Medical Exam Required<br /><strong>No</strong></div>
              <div class="ml-table-col-row">Coverage Amounts<br /><strong>$5,000-$100,000</strong></div>
              <div class="ml-table-col-row"><a href="" class="ml-button-primary">Learn More</a></div>
              <div class="ml-table-col-row"><a href="" class="ml-link">Apply Online</a></div>
            </div>
            <div class="ml-table-col">
              <div class="ml-table-col-header">
                <a href="" class="ml-table-col-header-title">Guaranteed Acceptance Whole</a><br />
                <strong><span class="ml-table-col-header-callout">$4.75</span>/mo*</strong><br />
                for $10,000 of coverage<br />
                (30 year old female)
              </div>
              <div class="ml-table-col-row">Coverage Lasts <br /><strong>To age 90</strong></div>
              <div class="ml-table-col-row">Available Online<br /><strong>Yes</strong></div>
              <div class="ml-table-col-row">Medical Exam Required<br /><strong>No</strong></div>
              <div class="ml-table-col-row">Coverage Amounts<br /><strong>$5,000-$100,000</strong></div>
              <div class="ml-table-col-row"><a href="" class="ml-button-primary">Learn More</a></div>
              <div class="ml-table-col-row"><a href="" class="ml-link">Apply Online</a></div>
            </div>
            <div class="ml-table-col">
              <div class="ml-table-col-header">
                <a href="" class="ml-table-col-header-title">Universal</a><br />
                <strong><span class="ml-table-col-header-callout">$10.75</span>/mo*</strong><br />
                for $10,000 of coverage<br />
                (30 year old female)
              </div>
              <div class="ml-table-col-row">Coverage Lasts <br /><strong>To age 90</strong></div>
              <div class="ml-table-col-row">Available Online<br /><strong>Yes</strong></div>
              <div class="ml-table-col-row">Medical Exam Required<br /><strong>No</strong></div>
              <div class="ml-table-col-row">Coverage Amounts<br /><strong>$5,000-$100,000</strong></div>
              <div class="ml-table-col-row"><a href="" class="ml-button-primary">Learn More</a></div>
              <div class="ml-table-col-row"><a href="" class="ml-link">Apply Online</a></div>
            </div>
            <div class="ml-table-col">
              <div class="ml-table-col-header">
                <a href="" class="ml-table-col-header-title">Whole</a><br />
                <strong><span class="ml-table-col-header-callout">$42.75</span>/mo*</strong><br />
                for $10,000 of coverage<br />
                (30 year old female)
              </div>
              <div class="ml-table-col-row">Coverage Lasts <br /><strong>To age 90</strong></div>
              <div class="ml-table-col-row">Available Online<br /><strong>Yes</strong></div>
              <div class="ml-table-col-row">Medical Exam Required<br /><strong>No</strong></div>
              <div class="ml-table-col-row">Coverage Amounts<br /><strong>$5,000-$100,000</strong></div>
              <div class="ml-table-col-row"><a href="" class="ml-button-primary">Learn More</a></div>
              <div class="ml-table-col-row"><a href="" class="ml-link">Apply Online</a></div>
            </div>
          </div>
          <div class="ml-table-footer">
              *Sample monthly rates are based on lorem itsum dolor sit amet Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
          </div>             
                        
                      

Data Table: Alternating Row Table

Tables are used to display many record sets in structured format that is easy to scan by users. Pagination should be included with the table when record sets are greater than 25.

View Example: HTML

Sample desktop view only. Not to scale.

table type 2

Click here for examples on pagination rules.

Data Table: Expandable Data Table

This table can be used when there are more data points to show than the page width allows. Each row has an expand-collapse feature that shows more details.

Any data points that user would want to be able to sort by should be columns. Other data points can be displayed within the expanded section.This expanded section can accommodate containing more complex content such as donut charts, dropdowns and buttons.

Pagination should be included with the table when record sets are greater than 25.

View Example: HTML

  • Download Associated Jquery Files:Zip

Sample desktop view only. Not to scale.

table type 2

Click here for examples on pagination rules.

Data Table: Nested Data Table

Use for multiple page results. Each row has an expand-collapse feature that shows more details.This expanded section can accommodate smaller tabular information along with basic data points.

Pagination should be included with the table when record sets are greater than 25.

View Example: HTML

  • Download Associated Jquery Files:Zip


Sample desktop view only. Not to scale.

table type 4

Click here for examples on pagination rules.