Always make sure a table is the right tool for the job before using one. Consider whether a simple list, headings, accordion, or content blocks might do the job better before using a table.

When using tables, it's important to remember the mobile experience. Keep data as short as possible, and if the table isn't tidy and easy to read on a mobile device, look to the various responsive solutions presented below.

Examples

Default Variant

Default tables contract fluidly to match the width of the viewport, and may have a maximum width at which they stop expanding on larger screens. Default table behavior is sufficient on small screens when there are few columns and the data is small enough to fit neatly on the screen with minimal wrapping.

Always make sure a table is the right tool for the job before using one. Consider whether a simple list, headings, accordion, or content blocks might do the job better before using a table.

When using tables, it's important to remember the mobile experience. Keep data as short as possible, and if the table isn't tidy and easy to read on a mobile device, look to the various responsive solutions presented below.

View by Screen Size

Plan Category Plan Pays You Pay
Bronze 1 55% 45%
Bronze 2 60% 40%
Silver 1 65% 35%
Silver 2 70% 30%
Gold 1 75% 25%
Gold 2 80% 20%
Platinum 85% 15%
Diamond 90% 10%
Crown 95% 5%

Scrollable Variant

Use this approach for tables that display a large set of items where users need to see the data in all columns on all size screens. When screen real estate allows, a scrollable frame table is like a default table, with its full width of columns visible. When the screen is narrower than the width of the table, users see the first few columns of data and can scroll horizontally within the frame to see the rest. Use a border to cue users that they can scroll/swipe horizontally to view more data. Try to prioritize so the first few columns are the most useful.

View by Screen Size

HMO PPO EPO
PCP Required Yes No Often, not always
Out-of-Network Coverage For medical Emergencies only Yes, at a higher cost For medical emergencies only
Referrals Needed Yes No Often, not always
Preventive Services Waiting Period N/A N/A N/A

Column Stacker Variant

On small screen devices, each column becomes a section that stacks vertically. Use this approach when putting data in columns will help users absorb the information, but they don't need to compare structured data across rows.

View by Screen Size

Costs that count toward deductible Out-of-Network
  • Bills for hospitalization
  • Surgery
  • Lab tests
  • MRIs and CAT scans
  • Physical therapy and chiropractic care
  • Mental health care
  • Medical devices such as pacemakers
  • Copays (typically)
  • Premiums

Row Stacker Variant

On small screen devices, each row becomes a section that stacks vertically. Use this approach if users are likely to want to read or skim through all of the data, but don't necessarily need a table layout when screen real estate is limited. If comparing across rows is critical, consider the scrollable table approach above. If users are likely to be searching for just one or a few of the rows, consider the accordion row stacker table below.

View by Screen Size

Benefit DPPO Advantage Network Out-of-Network
Preventive/Diagnostic Services Waiting Period N/A N/A
Preventive Diagnostic Services (Oral exams, cleanings, x-rays, fluoride application, sealants, non-orthodontic space maintainers) You pay 0% You pay the difference between the provider's standard fee and 100% of the Maximum Allowable Charge (MAC)*

Accordion Row Stacker Variant

Similar to the regular row stacker approach, the accordion stacker allows users to scan the heading for each row and open any entries that are relevant. Use this approach if users are likely to be searching for just one or a few of the rows. If users are likely to want to see all rows, use the non-accordion version.

View by Screen Size

What to Consider What it Means How to Decide
Out of Pocket Costs The amount you pay before your insurance plan covers costs for medical services. If you're likely to have a surgery or a lot of medical care, you may want a lower deductible, which is the amount you pay before your insurance plan covers costs.
Network Providers who are covered by an insurance plan. If you travel often, you may want to choose a plan where you can find in-network care outside of your local area of with out-of-network coverage.
Providers Your doctors — both primary care and specialists. You may want to choose a plan where your provider is in-network to avoid extra costs.
Prescriptions Any drugs you take. Different plans offer different copays for drugs. Make sure your prescriptions are covered at the best price for you.
Extra Benefits Any extra things your insurance plan provides for you, such as access to mobile apps or discounts. While you may not choose a plan for the extras, it's nice to know if your plan includes 24/7 customer service or gym benefits.

Summary Variant

Numeric Field and Circle Chart Example

Text Field with Optional "Met" Icon Example

File Variant