Responsive DataTables through Card UI Design for Email

‘If you could just add these 3 extra tables and animated gifs and the entire website into the email … that would be great!’
A datatable from a claim summary email
The same information as the claim summary, in a HTML card
An example of stacked cards, with a summary card to show totals

It’s more readable

It’s more understandable

It’s more accessible

In this restructured card, each of the three dated sections are in their own table, so they will be read sequentially (if they were in rows, it would read “Serviced Invoice …”).

Other examples

An example of a datatable in a typical shareplan email
Visualised timeline of the above shareplan table
A datatable of two bills
A card version of the billing datatable
Deductions over a year
Deductions quarter-by-quarter as cards

The code

<td style="text-align: center;">
<table style="display: inline-block;">



Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store