Tables

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.

Responsive

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.

Default

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

Simple

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

Dot Leader

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