Go to AAD Home
Donate For AAD Members Search

Go to AAD Home


Tables are made with HTML block tool.

About tables

  • Keep use of tables as limited as possible. Remember: Tables were created for displaying numerical data.

  • Keep tables as small as possible to avoid overloading the user's capacity to process information. Rather than making one, large overcompassing table, keep the information in small chunks: Rethink your information and re-group it when necessary: Make several smaller tables rather than one large one.

  • Empathize with the user: Think through the received of this information: Is a table the best way to present the information? Keep in mind that almost 50% of our members view our site with their mobile devices. Although our tables are responsive, reading a large table in mobile phone can be taxing.

There are 3 types of tables:

1.) Regular tables

Dark version:

2.) Tables with a hover effect.

The hover will help the user to focus on a row of information. This is particularly helpful when the table is very long.

3.) Large tables

These tables are only "large" in a sense that the header row has larger font and more margin around it. This is to give emphasis to the table on the page. Same rules apply: Keep table as short as possible to reduce cognitive load.

Responsive table has horizontal scrolling when the display isn't large enough to show the table:

Code library assets: https://assets.aad.org/html/Components/tables.html