Sortable Table Example

Sortable tables are not accessible and are used only on the Procurement page. Avoid sortable tables.

First Table

Click a table header to sort by that column.

This is the table caption. It is separate from the table summary, which is invisible and only available to screen readers.

Heading A	Heading B	Heading C
C	3	Z
A	2	X
B	1	Y

 

Another Table

Tables automatically become sortable when they:

• Have a class of "listing" (can be in addition to other classes) on the <table> tag.
• Have a <thead> that contains <th> cells.

Click any heading to sort by its column.

Heading 1	Heading 2
A	Z
B	X

 

Broken Table

This table has <th> cells without a <thead> containing them. Clicking a heading does nothing.

Heading A	Heading B
A	Z
B	X