Select screen display size:

Tables

A Table is an arrangement of rows and columns that collects and shows big amounts of data in a simple grid. It can also contain different types of interaction for the user to manage this information. Is commonly used to show search results on-screen.

Use Cases

When the user needs to see a big amount of data that can be arranged in similar fields.

Type Standard Small Zebra Horizontal Scroll Fixed Column Collapsible Rows

Type

929 Checks Found

Name	Phone #	Email	Address	Leads	Opportunities	Status
Name:	John Amos	Phone:	(212)222-3341	Email:	jamos@me.com	Address:	1223 St Andrews Blvd, Boca Ration FL 33312	Leads:	160	Status:	13	Active:	Active	Action Another action Something else here
Name:	Jane Doe	Phone:	(213)333-4444	Email:	jdoe@me.com	Address:	1234 Elm Street, Los Angeles CA 90001	Leads:	120	Status:	15	Active:	Inactive	Action Another action Something else here
Name:	Bob Smith	Phone:	(214)444-5555	Email:	bsmith@me.com	Address:	5678 Oak Avenue, Dallas TX 75201	Leads:	140	Status:	12	Active:	Active	Action Another action Something else here

929 Checks Found

Name	Phone #	Email	Address	Leads	Opportunities	Status
Name:	John Amos	Phone:	(212)222-3341	Email:	jamos@me.com	Address:	1223 St Andrews Blvd, Boca Ration FL 33312	Leads:	160	Status:	13	Active:	Active
Name:	Jane Doe	Phone:	(213)333-4444	Email:	jdoe@me.com	Address:	1234 Elm Street, Los Angeles CA 90001	Leads:	120	Status:	15	Active:	Inactive
Name:	Bob Smith	Phone:	(214)444-5555	Email:	bsmith@me.com	Address:	5678 Oak Avenue, Dallas TX 75201	Leads:	140	Status:	12	Active:	Active

929 Checks Found

Name	Phone #	Email	Address	Leads	Opportunities	Status
Name:	John Amos	Phone:	(212)222-3341	Email:	jamos@me.com	Address:	1223 St Andrews Blvd, Boca Ration FL 33312	Leads:	160	Status:	13	Active:	Active
Name:	Jane Doe	Phone:	(213)333-4444	Email:	jdoe@me.com	Address:	1234 Elm Street, Los Angeles CA 90001	Leads:	120	Status:	15	Active:	Inactive
Name:	Bob Smith	Phone:	(214)444-5555	Email:	bsmith@me.com	Address:	5678 Oak Avenue, Dallas TX 75201	Leads:	140	Status:	12	Active:	Active

929 Checks Found

Name	Phone #	Email	Address	Leads	Opportunities	Status	Company	Job Title	City	State	Country	Zip Code	Source	Last Contacted	Notes	Assigned To	Created At	Updated At	Tags	Skills
Name:	John Amos	Phone:	(212)222-3341	Email:	jamos@me.com	Address:	1223 St Andrews Blvd, Boca Ration FL 33312	Leads:	160	Status:	13	Active:	Active	Company:	XYZ Corp	Job Title:	Manager	City:	New York	State:	NY	Country:	USA	Zip Code:	10001	Source:	Referral	Last Contacted:	2024-02-07	Notes:	Met at conference	Assigned To:	Emily Smith	Created At:	2024-01-15	Updated At:	2024-02-07	Tags:	Sales, Client	Skills:	Sales, Management
Name:	Jane Doe	Phone:	(123)456-7890	Email:	jdoe@example.com	Address:	456 Oak Street, Springfield, IL 62701	Leads:	120	Status:	7	Active:	Active	Company:	ABC Corporation	Job Title:	Senior Analyst	City:	Springfield	State:	IL	Country:	USA	Zip Code:	62701	Source:	Website Form	Last Contacted:	2024-02-05	Notes:	Interested in new products	Assigned To:	Michael Johnson	Created At:	2024-01-20	Updated At:	2024-02-05	Tags:	Sales, Leads	Skills:	Analytics, Sales
Name:	Mark Smith	Phone:	(555)123-4567	Email:	msmith@example.com	Address:	789 Maple Avenue, Denver, CO 80202	Leads:	80	Status:	5	Active:	Active	Company:	DEF Industries	Job Title:	Marketing Manager	City:	Denver	State:	CO	Country:	USA	Zip Code:	80202	Source:	Email Campaign	Last Contacted:	2024-02-06	Notes:	Interested in partnership	Assigned To:	Sarah Williams	Created At:	2024-01-25	Updated At:	2024-02-06	Tags:	Marketing, Leads	Skills:	Marketing, Communication

Name	Phone #
Name:	John Amos	Phone:	(212)222-3341
Name:	Jane Doe	Phone:	(123)456-7890
Name:	Mark Smith	Phone:	(555)123-4567

Email	Address	Leads	Opportunities	Status	Company	Job Title	City	State	Country	Zip Code	Source	Last Contacted	Notes	Assigned To	Created At	Updated At	Tags	Skills
Email:	jamos@me.com	Address:	1223 St Andrews Blvd, Boca Ration FL 33312	Leads:	160	Status:	13	Active:	Active	Company:	XYZ Corp	Job Title:	Manager	City:	New York	State:	NY	Country:	USA	Zip Code:	10001	Source:	Referral	Last Contacted:	2024-02-07	Notes:	Met at conference	Assigned To:	Emily Smith	Created At:	2024-01-15	Updated At:	2024-02-07	Tags:	Sales, Client	Skills:	Sales, Management
Email:	jdoe@example.com	Address:	456 Oak Street, Springfield, IL 62701	Leads:	120	Status:	7	Active:	Active	Company:	ABC Corporation	Job Title:	Senior Analyst	City:	Springfield	State:	IL	Country:	USA	Zip Code:	62701	Source:	Website Form	Last Contacted:	2024-02-05	Notes:	Interested in new products	Assigned To:	Michael Johnson	Created At:	2024-01-20	Updated At:	2024-02-05	Tags:	Sales, Leads	Skills:	Analytics, Sales
Email:	msmith@example.com	Address:	789 Maple Avenue, Denver, CO 80202	Leads:	80	Status:	5	Active:	Active	Company:	DEF Industries	Job Title:	Marketing Manager	City:	Denver	State:	CO	Country:	USA	Zip Code:	80202	Source:	Email Campaign	Last Contacted:	2024-02-06	Notes:	Interested in partnership	Assigned To:	Sarah Williams	Created At:	2024-01-25	Updated At:	2024-02-06	Tags:	Marketing, Leads	Skills:	Marketing, Communication

Building	Rent
Building:	Annex 12	Rent:	$550
Building:	Bienal Garden	Rent:	$1020
Building:	Cozé	Rent:	$890

929 Checks Found

Name	Phone #	Email	Address	Leads	Opportunities	Status
Name:	Group 1	Phone:	(212)222-3341	Email:	jamos@me.com	Address:	1223 St Andrews Blvd, Boca Ration FL 33312	Leads:	160	Opportunities:	13	Status:	Active	Action Another action Something else here
Name:	Subgroup 1.1	Phone:	(555)987-6543	Email:	janesmith@example.com	Address:	789 Pine Street, Somecity, USA	Leads:	30	Opportunities:	5	Status:	Active	Action Another action Something else here
Name:	Robert Johnson	Phone:	(555)456-7890	Email:	robertjohnson@example.com	Address:	321 Maple Street, Othercity, USA	Leads:	80	Opportunities:	12	Status:	Active	Action Another action Something else here
Name:	Subgroup 1.2	Phone:	(555)987-6543	Email:	janesmith@example.com	Address:	789 Pine Street, Somecity, USA	Leads:	30	Opportunities:	5	Status:	Active	Action Another action Something else here
Name:	Robert Johnson	Phone:	(555)456-7890	Email:	robertjohnson@example.com	Address:	321 Maple Street, Othercity, USA	Leads:	80	Opportunities:	12	Status:	Active	Action Another action Something else here
Name:	Emily White	Phone:	(555)876-9876	Email:	emilywhite@example.com	Address:	987 Pine Lane, Meadowville, USA	Leads:	40	Opportunities:	25	Status:	Active	Action Another action Something else here
Name:	Jane Johnson	Phone:	(555)555-1234	Email:	janejohnson@example.com	Address:	789 Oak Avenue, Springfield, USA	Leads:	75	Opportunities:	10	Status:	Inactive	Action Another action Something else here
Name:	Group 2	Phone:	(555)789-0123	Email:	michaelbrown@example.com	Address:	456 Pine Street, Lakeside, USA	Leads:	45	Opportunities:	15	Status:	Active	Action Another action Something else here
Name:	John Amos	Phone:	(212)222-3341	Email:	jamos@me.com	Address:	1223 St Andrews Blvd, Boca Ration FL 33312	Leads:	160	Opportunities:	13	Status:	Active	Action Another action Something else here
Name:	Alice Williams	Phone:	(555)876-5432	Email:	alicewilliams@example.com	Address:	321 Elm Street, Rivertown, USA	Leads:	90	Opportunities:	20	Status:	Inactive	Action Another action Something else here

HTML

Do's & Dont's

Content display, wrapping and interactions

In the most basic scenario, the information shown on a table will be just reported without any further interactions. But, even in this case, if the content overflows, the table must make use of different resources to adjust the content in the best way possible for the user (wrapping, horizontal scrolling and, of course, a concise captioning, for instance).

Be always mindful of the content amount, the information nature, business needs and the interactions that the user could find helpful on his tasks.

Reducing visual stress

Even when showing a single table, a screen can be easily saturated as this component can get very busy. This will create visual stress for the user, who may easily feel overwhelmed and lost.

Resources as Zebra tables or fixed columns are useful resources to avoid this scenarios.

Prioritize clarity, avoid ellipsis

The information shown on tables is quite variable on lenght, depending on its type.

Displaying this can be complex: it is important to make the best use of space possible and, at the same time, show as much information as possible, so the user can do a quick scan at a glance.

Even though there are many different resources available, try to be careful when using ellipsis on the content, and also when determining which content will be hidden by, for example, a scrolling bar.

Tables

Use Cases

929 Checks Found

929 Checks Found

929 Checks Found

929 Checks Found

929 Checks Found

Do's & Dont's

Alternative and Related components

Cards

Accordions