Tables

Basic Data Table

This is a basic data table with both column headers and row headers.

Account ID	Information	Accunt Owner	Account Opening Date
1234	Some inforation about this account	John Doe	April 1, 1980
2345	Information about this account	Jane Doe	Mar 17, 1985
3456	More account information	Jim Doe	Jul 04, 1987
4567	This is also informative	Jessica Doe	Feb 14, 1982

It's important not to leave table header cells blank. This does not provide context when navigating to columns with screen readers.It's also important to maintain the structure of the table. If a cell has no data, for example, the row must still have the same amount of cells as other rows to maintain the table structure. Otherwise, screen readers may not properly associate headers will the correct corresponding cell.

Row Number	Information	Accunt Owner	Account Opening Date
1	Some inforation about this account	John Doe	April 1, 1980
2	Information about this account	Jane Doe	Mar 17, 1985
3	More account information	Jim Doe	Jul 04, 1987
4	This is also informative	Jessica Doe	Feb 14, 1982

Layout Table

This is a table that is used for layout. The ARIA role="presentation" role is applied to the <table> element to ensure the table structure is not conveyed by assistive technology such as screen readers.

This table	is used for layout only	and does not contain tabular information.
For these, we don't	want to convey	the table structure to screen readers.
To ensure the table	markup is not conveyed,	we use role="presentation".

ARIA Table

This table uses <div> elements to create cells and CSS to style the columns and rows. HTML <table> markup was not used. To create the necessary roles, ARIA markup is used. The following roles are used:

• The Table role
• The Row role
• The Cell role
• The Columnheader role