# Vue Table Component > Documentation and examples for opt-in styling of tables. ## Overview Due to the widespread use of `` elements across third-party widgets like calendars and date pickers, CoreUI's tables are **opt-in**. All table styles are not inherited in CoreUI, meaning any nested tables can be styled independent from the parent. Using the most basic table CoreUI, here's how ``-based tables look in CoreUI. ```html ``` In version **4.5.0** we introduced a new way to create a table, similarly to our [Smart Table component](https://coreui.io/vue/docs/components/smart-table/). ```vue ``` You can also put all table components together manually as hitherto. ```vue # Class Heading Heading 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ``` ## Variants Use contextual classes to color tables, table rows or individual cells. ```html ``` Since version **4.5.0** also this way. ```vue ``` ## Accented tables ### Striped rows Use `striped` property to add zebra-striping to any table row within the ``. ```html ``` ### Striped columns Use `stripedColumns` boolean property to add zebra-striping to any table column. ```html ``` These classes can also be added to table variants: ```html ``` ```html ``` ```html ``` ```html ``` ### Hoverable rows Use `hover` property to enable a hover state on table rows within a ``. ```html ``` ```html ``` These hoverable rows can also be combined with the striped variant: ```html ``` ### Active tables Highlight a table row or cell by adding a `active` property. ```html ``` As mentioned before since version **4.5.0** we have two ways to generate tables, also with custom properties for rows, and cells. ```vue ``` ```vue # Class Heading Heading 1 Mark Otto @mdo 2 Jacob Thornton @fat 3 Larry the Bird @twitter ``` ```html ``` ## Table borders ### Bordered tables Add `bordered` property for borders on all sides of the table and cells. ```html ``` [Border color utilities](https://coreui.io/vue/docs/utilities/border-color/) can be added to change colors: ```html ``` ### Tables without borders Add `borderless` property for a table without borders. ```html ``` ```html ``` ## Card-like tables Need a bordered, rounded table without nesting it in a [card](https://coreui.io/vue/docs/components/card/)? Wrap the table and clip the corners. ### With utilities Compose [border](https://coreui.io/vue/docs/utilities/border/), [border radius](https://coreui.io/vue/docs/utilities/border-radius/), and [overflow](https://coreui.io/vue/docs/utilities/overflow/) utilities. Drop the table's bottom margin with `.mb-0`. ```html ``` ### With `card` Add the `card` property for the card look in one step. The table gets the default border and corner radius of a [card](https://coreui.io/vue/docs/components/card/), and a `.theme-*` class on an ancestor colours the frame the way it colours a card. The cells are clipped, and the borders that would stack on the frame go: the last row's bottom border and the outer borders of a `bordered` table. A caption at the bottom keeps the line above it. ```html ``` Combine it with `responsive` when the table can overflow; both land on the same wrapper. ```html ``` > ##### Clipping > > `card` clips everything at the rounded edge: a dropdown menu opened from a cell, the focus ring of a control in an edge cell, and columns wider than the frame. Render menus outside the table with the dropdown's [`teleport`](https://coreui.io/vue/docs/components/dropdown/api/#cdropdown) property, and add `responsive` when the table can be wider than its container. ## Small tables Add `small` property to make any `` more compact by cutting all cell `padding` in half. ```html ``` ## Table group dividers Add a thicker, darker border between table groups—``, ``, and ``—with `.table-group-divider`. Customize the color by changing the `border-top-color` (which we don't currently provide a utility class for at this time). ```html ``` ## Vertical alignment Table cells of `` are always vertical aligned to the bottom. Table cells in `` inherit their alignment from `` and are aligned to the the top by default. Use the align property to re-align where needed. ```html ``` ## Nesting Border styles, active styles, and table variants are not inherited by nested tables. ```html ``` ## Anatomy ### Table head Similar to tables and dark tables, use the modifier prop `color="secondary"` or `color="inverse"` to make ``s appear light or dark gray. ```html ``` If you generate a table using the new method incorporated in version **4.5.0**, you have to use tableHeadProps property to pass properties to the table header component. ```vue ``` ```html ``` Starting from version **4.5.0** also this way. ```vue ``` ### Table foot ```html ``` Starting from version **4.5.0** also this way. ```vue ``` ### Captions A `` functions like a heading for a table. It helps users with screen readers to find a table and understand what it's about and decide if they want to read it. ```html ``` Starting from version **4.5.0** also this way. ```vue ``` Add `captionTop` to put the caption on the top of the table. ```html ``` It combines with the `caption` property the same way. ```vue ``` ## Responsive tables Responsive tables allow tables to be scrolled horizontally with ease. Make any table responsive across all viewports by adding a `responsive` property. Or, pick a maximum breakpoint with which to have a responsive table up to by using `responsive="{-sm|-md|-lg|-xl|-2xl}"`. ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ## Stacked tables A table that scrolls sideways is still a table; on a narrow screen it is often easier to read one record at a time. Add `.table-stacked{-sm|-md|-lg|-xl|-2xl}` to `` to turn each row into a block below that breakpoint — the header is hidden from sight (it stays in the accessibility tree) and every cell carries its own label. Two things are required: the `responsive` property, because that wrapper is the query container the class measures, and a `data-cell` attribute on every cell after the first, which supplies the label the hidden header would have given. The first cell is treated as the record's title and needs no label. ```html ``` > Because the breakpoint is read from the responsive wrapper rather than the window, a stacked table inside a narrow column stacks there while the same markup in the main content area stays a table. ## API Check out the documentation below for a comprehensive guide to all the props you can use with the components mentioned here. - [<CTable />](./api/#ctable) - [<CTableBody />](./api/#ctablebody) - [<CTableDataCell />](./api/#ctabledatacell) - [<CTableFoot />](./api/#ctablefoot) - [<CTableHead />](./api/#ctablehead) - [<CTableHeaderCell />](./api/#ctableheadercell) - [<CTableRow />](./api/#ctablerow)