Skip to main content

Table

Tables are used to display data in a structured and organized manner. It is the most common way to display a lot of structured data in a web page. Since we use the <table> tag, it is accessible to the screen reader without any modification.

Simple Table

A simple table with a header and a body.

Product Color Type Stock
T-ShirtBlueTops15
JeansBlackBottoms32
SneakersWhiteShoes23
DressRedDresses11

Thematic Table

A variation of the simple table with more thematic colors.

Product Color Type Stock
T-ShirtBlueTops15
JeansBlackBottoms32
SneakersWhiteShoes23
DressRedDresses11

Table With Cell Borders

A variation of the simple table with cell borders.

Product Color Type Stock
T-ShirtBlueTops15
JeansBlackBottoms32
SneakersWhiteShoes23
DressRedDresses11

Table With A Caption

A table with a caption, done semantically with the <caption> tag.

Products

This is the available stock for the products listed below as of 02/05/2024

Product Color Type Stock
T-ShirtBlueTops15
JeansBlackBottoms32
SneakersWhiteShoes23
DressRedDresses11

Table With Conditional Styling

Information : Currently, only supported for Astrojs component.

A table with conditional styling for cells based on the value of a column.

Product Color Type Stock
T-ShirtBlueTops15
JeansBlackBottoms32
SneakersWhiteShoes23
DressLimited stockRedDresses11
SkirtRunning outGreenSkirts7
ShirtBlueTops25
JeansBlackPants18

Accessibility Note: While the colors are a good visual indicator, for accessibility ravixUI has added text in the table header for both visual and screen reader users. This is just one approach, you can also add another column to represent the same. The styling in this table is just a showcase of the different ways you can use conditional styling. In a real-world scenario, you would likely stick to one format for styling.

Accessibility Testing Status

ComponentNVDAWindows NarratorWAVEAxeIBM Equal Access
Simple TableYesYesYesYesYes
Thematic TableYesYesYesYesYes
Table With Cell BordersYesYesYesYesYes
Table With A CaptionYesYesYesYesYes

The tables adhere to the WCAG 2.1 AA standards for accessibility.

Additional manual testing maybe required to ensure the tables are accessible in your specific use case.