# Table
A table arranges many items of the same kind in rows and columns, to compare and act. On mobile, each row becomes a card.
## Playground
```html
```
## When to use
- For items compared by the same characteristics: schedules with when and who, services with status.
- On work screens, almost always with `data-density="compact"`.
## When not to use
- **One item, several characteristics:** SummaryList.
- **Things to do, each with a status:** TaskList.
- **To lay out the page:** a table is data, never positioning.
## Examples
### A work table
Caption, header with the ink line, numbers on the right and each row’s action at the end.
Show code
```html
```
### On mobile
In a box narrower than 40rem, each row becomes a card: the name on top, each value with its column name beside it (`data-label`), the actions below.
Show code
```html
| Backup semanal |
Domingo, 3h |
```
### Sort by header
The sorting column is a link: the server returns the sorted page. The sorted column gets `aria-sort` and the arrow.
Show code
```html
Prazo… |
```
### Batch action
A box per row and the batch actions on top, in small buttons. It is a form: the ticked boxes go along with the button pressed.
Show code
```html
```
With no rows, the table becomes an [EmptyState](/en/components/emptystate/), in place of the rows. Never a header alone with nothing below.
## Anatomy
1. **Caption:** the table’s name, read by screen readers.
2. **Header:** soft text, with the ink line below.
3. **Row:** separated from the next by a hairline.
4. **Numbers** on the right, with same-width figures.
5. **Row action:** a small button, at the end.
## States
- **Hover on a row:** a slightly darker tone, very light, so the eye keeps the row. It is not selection.
- **Density:** comfortable for reading, compact on work screens; the switch animates.
- **Narrow box:** each row becomes a card. **Medium box and wide table:** it scrolls inside its own box; the page never scrolls sideways.
## Do and don’t
Do
Item
Value
Photos
1.204
Videos
38
Numbers on the right: the digits line up and comparison is by eye.
Don’t
Item
Value
Photos
1.204
Videos
38
Everything centered: the numbers do not line up.
Do
Backup
Edit
The action with a word, small, at the end of the row.
Don’t
Backup
Plants
Alternating stripes and icon-only actions: noise, and nobody knows what the icon does.
## Writing
- Header: one or two words, without repeating the unit in each cell.
- Empty cell: a dash, with hidden text ("no due date") for screen readers.
## Accessibility
- `` with the name and `` on each header.
- Each row’s action says which row it belongs to ("Edit weekly backup"), with hidden text.
- The scrolling box is a named region and takes focus.
## Attributes
Attribute
Values
What for
`class="feitio-table"`
required
Hairlines, header with the ink line, same-width figures.
`class="feitio-table-scroll" tabindex="0"`
around
Measures its own width: narrow, it turns into cards; medium, it scrolls. With `tabindex="0"`, `role="region"` and a name.
`class="title"`
on the name cell
The card title on mobile.
`data-label`
on the other cells
The column name, next to the value on the card.
`data-align="end"`
on the number column
Numbers on the right.
`class="actions"`
on the actions cell
Small buttons, at the end.
`aria-sort`
`"ascending"`, `"descending"`
On the sorted column.
|