# Vue Table Component > Documentation and examples for opt-in styling of tables. ## How to use Vue Table Component 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.html). ```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/docs/4.0/utilities/borders#border-color) can be added to change colors: ```html ``` ### Tables without borders Add `borderless` property for a table without borders. ```html ``` ```html ``` ## Small tables Add `small` property to make any `` more compact by cutting all cell `padding` in half. ```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="light"` or `color="dark"` 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 ``` You can also put the `` on the top of the table with `caption="top"`. ```html ``` Since version **4.5.0** also this 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|-xxl}"`. ```html ``` ```html ``` ```html ``` ```html ``` ```html ``` ```html ```