# Table > Tables lay out rows of data, with variants for responsive, sortable, selectable and sticky-header tables. Present data in clean, responsive tables. Add hover states, striped rows, sorting, and other options to improve readability. Source: https://docs.tabler.io/ui/components/table --- ## 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: ```html
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. ```html
# 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. ```html
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. ```html
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. ```html
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`. ```html
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. ```html
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. ```html
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. ```html
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. ```html
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: ```scss $table-bg: transparent; $table-color: inherit; $table-accent-bg: transparent; $table-cell-padding-x: 0.75rem; $table-cell-padding-y: 0.75rem; $table-cell-padding-y-sm: 0.25rem; $table-cell-padding-x-sm: 0.25rem; $table-cell-vertical-align: top; $table-border-factor: 0.2; $table-border-width: var(--border-width); $table-border-color: var(--border-color-translucent); $table-th-padding-x: $table-cell-padding-x; $table-th-padding-y: 0.5rem; $table-th-font-weight: null; $table-th-bg: var(--bg-surface-tertiary); $table-striped-color: $table-color; $table-striped-bg-factor: 0.05; $table-striped-order: even; $table-striped-bg: var(--bg-surface-tertiary); $table-striped-columns-order: even; $table-group-separator-color: var(--border-color-translucent); $table-active-color: $table-color; $table-active-bg-factor: 0.1; $table-active-bg: var(--active-bg); $table-hover-color: $table-color; $table-hover-bg-factor: 0.075; $table-hover-bg: color-mix(in srgb, var(--emphasis-color) #{math.percentage($table-hover-bg-factor)}, transparent); $table-caption-color: var(--secondary-color); $table-bg-scale: -80%; $table-variants: ( 'primary': shift-color($primary, $table-bg-scale), 'secondary': shift-color($secondary, $table-bg-scale), 'success': shift-color($success, $table-bg-scale), 'info': shift-color($info, $table-bg-scale), 'warning': shift-color($warning, $table-bg-scale), 'danger': shift-color($danger, $table-bg-scale), 'light': $light, 'dark': $dark, ); $table-sort-bg-image: url("data:image/svg+xml,"); $table-sort-asc-bg-image: url("data:image/svg+xml,"); $table-sort-desc-bg-image: url("data:image/svg+xml,"); $table-sort-icon-size: 1rem; $table-sort-icon-margin-start: 0.25rem; ``` _Source: `core/scss/_variables.scss`_