--- id: table title: Table --- # Table ## How to use


### With dark header



### With captions

Use the `` element to describe a table in the same way you would use a heading. A caption helps users find, navigate and understand tables.



### With numeric values



### With zebra rows



### With primary or secondary colored rows

The prop `color='primary'` or `color='secondary'` is only functional when Table component has `variant='default'`.



### With vertical lines



### With dense style



### Custom column widths



### Without data (empty table)



### With loader



### With stack style

Use this prop when you want to display a more user friendly table for small screens.



## Accessibility

You can read more about the accessibility patterns used in our Table
implementation in the ARIA Authoring Practices Guide (APG) at [Table](https://www.w3.org/WAI/ARIA/apg/patterns/table/) section.

## API

See below for a complete reference to all of the props  available to the components mentioned here.