--- title: Table summary: A table is a useful interface element that lets you visualize data and arrange it clearly. It allows users to browse a lot of information at once, and a good table design improves readability. description: Present data in clean, responsive tables. Add hover states, striped rows, sorting, and other options to improve readability. related: [/ui/components/datagrid, /ui/components/pagination] source: core/scss/ui/_tables.scss classnames: component: - class: table desc: Container element part: - class: td-truncate desc: Cell whose content is cut with an ellipsis instead of stretching the table style: - class: table-striped desc: Shades every other row - class: table-bordered desc: Border on every cell - class: table-borderless desc: Removes all borders - class: table-transparent desc: Removes the background modifier: - class: table-responsive desc: Scrolls sideways; table-responsive-{breakpoint} only below that width - class: table-mobile-{breakpoint} desc: Stacks rows into blocks below the breakpoint, using data-label on each cell - class: table-vcenter desc: Centers cell content vertically - class: table-center desc: Centers cell content horizontally - class: table-nowrap desc: Stops cell text from wrapping behavior: - class: table-hover desc: Highlights the row under the cursor - class: table-selectable desc: Rows with a checkbox, highlighted when checked - class: table-sort desc: Sortable header cell color: - class: table-{color} desc: Tints a row or a cell, for example table-success size: - class: table-sm desc: Tighter cell padding --- import Example from '@components/Example.astro'; import CodeDocs from '@components/CodeDocs.astro'; ## Basic table The basic table design has light padding and the presented data is separated with horizontal dividers. It helps provide users with all the necessary information, without overwhelming them with visuals. The `.table` class adds basic styling to a table:
Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User Edit
Jeffie Lewzey Chemical Engineer, Support jlewzey1@seesaa.net Admin Edit
Mallory Hulme Geologist IV, Support mhulme2@domainmarket.com User Edit
Dunn Slane Research Nurse, Sales dslane3@epa.gov Owner Edit
Emmy Levet VP Product Management, Accounting elevet4@senate.gov Admin Edit
## Responsive tables Use the `.table-responsive` class across each breakpoint for horizontal scrolling tables. If you want to create responsive tables up to a specific breakpoint, use `.table-responsive{-sm|-md|-lg|-xl}`. From that breakpoint and up, the table will behave normally, rather than scroll horizontally.
# Heading 1 Heading 2 Heading 3 Heading 4 Heading 5 Heading 6 Heading 7 Heading 8 Heading 9 Heading 10
1 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
2 Cell Cell Cell Cell Cell Cell Cell Cell Cell Cell
## No wrap If you don't want the table cell content to wrap to another line, use the `table-nowrap` class.
Name Title Email Role
Paweł Kuna UI Designer, Training paweluna@howstuffworks.com User Lorem ipsum dolor sit amet, consectetur adipisicing elit. Animi, commodi cupiditate debitis deserunt expedita hic incidunt iste modi molestiae nesciunt non nostrum perferendis perspiciatis placeat praesentium quaerat quo repellendus, voluptates. Edit
## Table variants Use contextual classes such as `.table-primary` or `.table-danger` on a `` element to color rows and highlight their meaning.
Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
## Table with sticky header Add the `.sticky-top` class to the `` element to keep the header row visible while users scroll through a long table.
Class Heading Heading
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
Default Cell Cell
Primary Cell Cell
Secondary Cell Cell
Success Cell Cell
Danger Cell Cell
Warning Cell Cell
Info Cell Cell
Light Cell Cell
Dark Cell Cell
## Sortable headers Put a `.table-sort` button inside a `th` to get a sortable-looking header. The button shows a neutral arrow, and adding `.asc` or `.desc` marks the current direction. Sorting itself is up to you - the classes only style the header. Tabler's own demo uses [List.js](https://listjs.com) and passes the field through `data-sort`.
Elliot Fisher Adelaide 92
Beverly Mills Bristol 78
## Selectable rows Add `.table-selectable` to the table and `.table-selectable-check` to each checkbox. A checked row gets a highlighted background, with no JavaScript involved. Inside such a row you can swap content with `.on-checked` and `.on-unchecked`: the first only shows while the row is selected, the second while it is not.
Task Status
Prepare the release notes Selected Not selected
Review the pull request Selected Not selected
## Stacked table on small screens A wide table can stack into a list instead of scrolling sideways. Use `.table-mobile-{breakpoint}` - `.table-mobile-md` stacks below `md` - and give every cell a `data-label`, which becomes the label above its value.
Name City Score
Elliot Fisher Adelaide 92
Beverly Mills Bristol 78
## Borderless, centered and transparent tables `.table-borderless` removes the header background, `.table-transparent` clears the header and body backgrounds, and `.table-center` centers every cell.
Plan Seats Price
Starter 3 $9
Team 10 $29
## Truncated cell A long value in one column stretches the whole table. Put `td-truncate` on that cell and `text-truncate` on the element inside it, and the text is cut with an ellipsis while the other columns keep their width.
Name Note
Elliot Fisher
A note long enough that it would otherwise push the first column out of the way and stretch the table past the width of the page.
## Accessibility A table is read cell by cell, so the structure has to say what each cell means. - Use `th` with `scope="col"` or `scope="row"` for headers. Without a scope, a screen reader cannot tie a value back to its column. - Add a `caption` when the table needs a title. It is announced first and stays tied to the table, unlike a heading above it. - In a selectable table, give every checkbox its own `aria-label` - "Select task" is enough, and "Select all rows" for the one in the header. - `.table-sort` is a real `button`, so it is reachable by keyboard. Once you wire up sorting, also set `aria-sort` on the `th` to `ascending`, `descending` or `none`. - A stacked `.table-mobile-*` still keeps its header cells in the markup, so the reading order stays correct while the `data-label` text carries the column name visually. ## SCSS variables Use these SCSS variables to customize tables. The default values are: