Tables are useful when a collection of data requires vertical alignment through columns for quick scanning and discovery of information. COUNTRY Financial® uses two table styles, a default and a 'simple' table for all tabular data needs.
Creating a table is straight-forward. Simply declare a <table> element to create the most basic table.
All tables are made responsive by adding a small JavaScript file to handle re-arranging the tabular data. Once the page is loaded, JavaScript will add a data-th data attribute to each <td>, which then gets displayed as the header for each row in the mobile view.
For more information on how the JavaScript handles responsive tables, please refer to the JavaScript page in the Developer Notes section.
The default is a standard table with minimal styling. Zebra striping is used to help the user quickly identify content within the rows and columns of data.
The default table should be used for displaying legal information and privacy policy information that needs to be displayed in a tabular format. Some additional examples are, but not limited to: claims data information, insurance policy data, investment and financial data, contest timelines, and contest prizing charts.
| Entry/Event Period | Start Date | Ends Date | Drawing Date |
|---|---|---|---|
| Event 1 | 1/10/2016 | 2/14/2016 | 2/20/2016 |
| Event 2 | 6/19/2016 | 7/20/2016 | 7/26/2016 |
| Event 3 | 8/19/2016 | 9/2/2016 | 9/10/2016 |
| Event 4 | 9/15/2016 | 9/30/2016 | 10/5/2016 |
| Event 5 | 10/20/2016 | 11/5/2016 | 11/15/2016 |
The simple table has more visual styling than the default table. There are no zebra stripes with this table style, but there are more brand colors used. These tables should be used for marketing and client facing projects, as they are more easy on the eyes.
To create a simple style table, add the .table-simple class on the <table> element.
<table class="table-simple">...
This table example has a header for each column:
| Table Header 1em Bold | Table Header | Table Header | Table Header |
|---|---|---|---|
| Table Body 0.875em (small) | Table Body | Table Body | Table Body |
| Table Body | Table Body | Table Body | Table Body |
| Table Body | Table Body | Table Body | Table Body |
This table uses the same .simple class, but does not have a heading for each column:
| Column Header 1em Bold | Column Header | Column Header | |
|---|---|---|---|
| Row Header 0.875em Bold | Table Body | Table Body | Table Body |
| Row Header | Table Body | Table Body | Table Body |
| Row Header | Table Body | Table Body | Table Body |
The following table shows an example of a .simple table, but with no <thead>:
| Row Header 0.875em Bold | Table Body | Table Body | Table Body |
|---|---|---|---|
| Row Header | Table Body | Table Body | Table Body |
| Row Header | Table Body | Table Body | Table Body |
The dot leader table is used for displaying transactional datasets. A simple example is simulating a bill concept for the web. Each row has dotted lines between two text elements to show a corrleation betwen the two.
To create a simple style table, add the .dot-leader class on the <table> element.
| PA1234456789 (Auto) | $161.00 |
| Madison Country Farm Bureau/Illinois Farm Bureau® Membership Dues | $20.00 |
| Payment Plan Fee | $3.00 |